Jump to content

Help:Cascading Style Sheets

From Wikipedia, the free encyclopedia
This is an old revision of this page, as edited by 1.46.20.72 (talk) at 20:19, 27 February 2022. The present address (URL) is a permanent link to this revision, which may differ significantly from the current revision.

Cascading Style Sheets allows for flexible formatting of a page. They should be used instead of tables for non-tabular content whenever possible, because they can be manipulated by the reader or overridden by an author if your CSS is embedded in another page via a template.

Major style blocks

An annotated desktop screenshot of an example article, showcasing the style blocks
  • column-content – overall space within the margins of which the content exists.
  • firstHeading – the class of the heading tag at the top of every page
  • contentSub – the name of the wiki immediately underneath the main heading, but above the body text
  • content – the white background, thin bordered box which contains the main page content.
  • bodyContent – the main page content within the content box

The portlet class is the style used by all the div blocks around the main content. Identified blocks using that class:

  • p-cactions – id for the list of page-related tabs above the main content (page, talk, edit, etc.), top.
  • p-personal – id for the list of user-related links above the main content (username, talk, etc.), top.
  • p-logo – id for the block that contains the logo, top left.
  • p-navigation – id for the block that contains the navigation links on the left of the page
  • p-search – the block that contains the search buttons
  • p-tb – the block that contains the toolbox links
  • p-lang – the block that contains interlanguage links

The footer at the bottom of the page includes blocks with the following ids

  • footer – overall footer container block
  • f-poweredbyico – the powered by MediaWiki image that normally resides to the right of the page
  • f-list – id for the list that contains all the bits of text at the bottom of the page

Style depending on a parameter or variable

Variable class or id

A class or id can depend on the result produced by a template or on a template parameter, e.g. class="abc{{{1|def}}}". For one or more of the possible class names the style of that class can be defined. If the class is undefined it is ignored, so the standard style is used.

In the simplest case we have e.g. class="abc{{{1}}}" and define class abcdef. If the parameter value is "def" it applies.

If a page for general use only makes sense when styles are defined for certain classes, then these have to be specified in the page MediaWiki:Common.css, which applies for all users and all skins, as far as not overridden.

Variable style parameter value

Wikitext that reads 

<span style="display:{{{3|none}}}">Wed</span>

will display "Wed" if parameter 3 is defined, but its value is not "none", and displays nothing if parameter 3 is undefined or "none". If the value of parameter 3 is a display style other than "none", that style is applied.

Wiki headings

Wiki headings use the following default CSS:

Wikimarkup HTML Style
= Heading = <h1> 
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.8em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
== Heading == <h2> 
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.5em; font-family: 'Linux Libertine',Georgia,Times,serif; margin-top: 1em; margin-bottom: 0.25em; line-height: 1.3; padding: 0; border-bottom: 1px solid #AAAAAA;
=== Heading === <h3> 
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 1.2em; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
==== Heading ==== <h4> 
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
===== Heading ===== <h5> 
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;
====== Heading ====== <h6> 
color: #000000; background: none; overflow: hidden; page-break-after: avoid; font-size: 100%; font-weight: bold; margin-top: 0.3em; margin-bottom: 0; line-height: 1.6; padding-top: 0.5em; padding-bottom: 0;

See also

Retrieved from "https://en.wikipedia.org/w/index.php?title=Help:Cascading_Style_Sheets&oldid=1074350131"