MediaWiki:Common.css is aCascading Style Sheet loaded after the activeSkin's stylesheet.This stylesheet is loaded with allskins and a similar stylesheet specific to the skin – named "MediaWiki:skinname.css" – is appended to it (see below).Although only Monobook.css is listed onSpecial:AllMessages, the other skin-specific stylesheets will work nonetheless.
If$wgAllowUserCss is set totrue, users can customize the interface for themselves only by creating user subpages withlowercase titles (see below).
Global stylesheets won't load on special restricted pages like login or preferences, unless you enable$wgAllowSiteCSSOnRestrictedPages.
They also won't load ifsafemode is used.
These are stylesheets that affect all users of the wiki, depending on their setup — what skin they use, their user group, etc.
body.client-nojs selectorThese are stylesheets that only yourself and users with theeditusercss right, usually interface admins, can edit.
In the case of conflicting style settings for a piece of content, the resulting setting depends primarily on specificity.For two rules of the same specificity, it depends on order between and within stylesheets: the last wins.See alsocascading order.The order can be overriden with the indication!important, but this should generally be avoided.
In the Monobook skin, the CSS selectors relevant for the style of the page body include the following.As far as possible, examples are given, which show the result for the current style settings:
:link:visited:link#contentTop:link.external:link.extiw:link.image:link.internal
:link.new.allpagesredirectbody.ns-0, ..., body.ns-15div#bodyContentdiv#column-contentdiv#editsectiondiv#globalWrapperdiv#tocindentdiv.toclineh1.firstHeadingh2h3smalltable.toc:link:visiteda:link:visiteda<aname="bookmark">).#p-lang aOne may also have the style depend on the value of an attribute, e.g. with the selectors:
:link[title = "User:username"]}}link[title = "pagename"]}}link[href = "full url"]}}to color-code or highlight particular users (including oneself) and/or links to particular pages (like the bolding of watched pages on Recent Changes).
The watchlist and Recent Changes use two classes:
.autocomment.newThe page history has classes autocomment and:
.user.minorThus the font specified foruser applies in the page history, but not in the watchlist or Recent Changes.
textarea#wpTextbox1input#wpSummaryOne extremestyle for a text isdisplay:none;, i.e., not displaying it, e.g.
p<spanstyle="display:none;">q</span>r → pqrTo allow a text to optionally have this style, specify a class or id for it; a user who wants to hide it can then correspondingly specify in their personal CSS:
.classname{display:none;} or#id{display:none;}Non-displayed links do not work, as opposed to links in a very small font, compare:
p<spanstyle="display:none;">[[q]]</span>r gives pqrp<small><small><small><small><small>[[q]]</small></small></small></small></small>r gives pqrIt cannot be used to remove text in expressions for template names, parameter names, parameter values, page names in links, etc.
Whiledisplay: none; produces nothing,visibility: hidden; produces blank spaces replacing the content; its opposite isvisibility: visible;.
Example:
p<spanstyle="visibility: hidden;">q</span>r gives pqrTry inspecting the page with theDeveloper tools probably provided with your browser to find the hidden element.
If you would like to view the hidden text, you could use an add-on for your browser.For example, theWeb Developer add-on is available forFirefox andChrome.You could add it to your browser and then choose "Misc." -> "Display Hidden Elements" in that toolbar, to make all hidden elements appear.
One can exclude content from being printed (if the browser supports CSS) by declaring the content to be of the "noprint" class:
<divclass="someclass noprint">This will not appear in the print version.</div>
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., 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 pageMediaWiki:Common.css, which applies for all users and all skins, as far as not overridden.
Wikitext like
<span>Wed</span>
displays "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 thannone, that style is applied.
<a href="//en.wikipedia.org/wiki/example" title="en:example">en:example</a>, the same in all skins.