 |
This is an information page.
It is not one of Wikipedia's policies or guidelines; rather, its purpose is to explain certain aspects of Wikipedia's norms, customs, technicalities, or practices. It may reflect differing levels of consensus and vetting. |
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.
Style may be chosen specifically for a piece of content, see e.g., color; scope of parameters
Alternatively, style is specified for CSS selectors, expressed in terms of elements, classes, and ID's. This is done on various levels:
Author style sheets, in this order:
Note: See WP:CLASS for a list of all the style sheets loaded.
Per skin: MediaWiki Manual:Gallery of user styles etc. Typically loaded style sheets:
e.g., monobook/main.css (normal skin for PC's), chick/main.css (normal skin for handhelds)
Examples for Monobook:
Note: MediaWiki sites other than English Wikipedia may use MediaWiki:Gadget-site.css instead of MediaWiki:Common.css.
Page-specific style-sheets may be introduced through TemplateStyles. Pages, particularly templates, may also have inline CSS.
Some pages have their own CSS, e.g., MediaWiki:FileUploadWizard.css
Note that in CSS terminology, the user-specific style sheets are not user style sheets.
An HTML element may be just taken from the wikitext (see HTML in wikitext), e.g., span, or the result of translating wikitext, e.g., the '''...''' code is changed into <b>...</b>, or part of the code for the skin.
A class may be produced by the software, e.g., ns-namespace number for the HTML-element "body", and extiw for an interwiki link in the page body, or taken from the wikitext.
Similarly, an ID may be produced by the software, e.g., bodyContent, or taken from the wikitext.
In the case of conflicting style settings for a piece of content, the resulting setting depends primarily on the indication "!important". Secondarily, if both are important, the user wins, if neither is, the author wins. Tertiarily it depends on specificity. Only lastly, it depends on order between and within style sheets: the last wins. Thus, a User:username/monobook.css does not win from MediaWiki:Monobook.css (both author, not user) if the specificity of the latter is greater. See also cascade.
MediaWiki supports most CSS, with such exceptions as the url() attribute. There were some bugs in CSS support in earlier versions.
You can use CSS styling in HTML elements in your code (see Help:HTML in wikitext for a list of elements supported by MediaWiki) like you would in normal HTML markup.
For example, a <div>...</div> element with a green border and its contents floated to the right would be created with
<div style="float:right; border:thin solid green;">
Here comes a short paragraph that is<br />
contained in a "div" element that is<br />
floated to the right.
</div>
Here comes a short paragraph that is
contained in a "div" element that is
floated to the right.
which would produce the box to the right. Some wikitext elements allow you to insert CSS styling directly into them. An example is the table syntax:
{| style="your style here"
|-
|your table stuff
|}
You may wish to use a style type that is already predefined by MediaWiki, or the site that you are visiting. You can also create a style that is unique to your page.
Vector is the default style, you can view it at: MediaWiki:Vector.css
You will give your CSS tag an existing "class"
Please put a list of existing classes here.
In an embedded page, one can hide comments in one version, and show them in another view. One extreme "style" for a text is not displaying it, with
.''classname'' {display: none}
#''id'' {display: none}
etc.
Non-displayed links do not work (as opposed to links in a very small font).
It cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.
To view hidden text, download the Web Developer Toolbar for Firefox here, then choose Misc. → show hidden elements in that toolbar. It will make all hidden elements appear.
One can exclude content from being printed by declaring the content to be of the "noprint" class:
<div class="someclass noprint">This will not appear in the print version.</div>
The portlet class is the style used by all the div blocks around the main content. Identified blocks using that class:
The footer at the bottom of the page includes blocks with the following ids
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.
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 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;
|
<code>|
| |
|---|---|
Get personal technical help at the Teahouse, help desk, village pump (technical), talk pagesorIRC. | |
| General technical help |
|
| Special page-related |
|
| Wikitext |
|
| Links and diffs |
|
| Media files: images, videos and sounds |
|
| Other graphics |
|
| Templates and Lua modules |
|
| Data structure |
|
| HTML and CSS |
|
| Customisation and tools |
|
| Automated editing |
|
| |
|
| |
|---|---|
| Project CSS |
|
| Project JS |
|
| Usergroup CSS |
|
| Usergroup JS |
|
| Other CSS |
|
| Other JS |
|
| Personal CSS |
|
| Personal JS |
|
| |
