Manual:CSS

From MediaWiki.org
Jump to: navigation, search

Other languages:
Deutsch • ‎English • ‎British English • ‎español • ‎français • ‎italiano • ‎日本語 • ‎polski • ‎português • ‎português do Brasil

Cascading style sheet (CSS) markup sets much of the look and feel of MediaWiki: font size, colors, spacing, the logo and background image, even whether site content is displayed or is hidden.

CSS can be used to change the style of the entire wiki, for example to make the background a different colour, or you can use inline css to style specific pieces of text in your wiki. For example green text can be accomplished by doing <span style="color:green">green text</span>. If you want to make all text on the wiki green you can add the code * {color:green} to mediawiki:Common.css.

To change the look and feel of MediaWiki's monitor and projector display (how it looks in a browser window) you can put CSS into MediaWiki:Common.css.

If code added to MediaWiki:Common.css doesn't take effect immediately, you may have to do a hard refresh.

To change the way MediaWiki pages print, you put CSS into MediaWiki:Print.css on your wiki.

If enabled on your wiki, individual users can create custom stylesheets just for themselves at Special:MyPage/<skin_name>.css (for example Special:MyPage/vector.css if they are using the vector skin). Special:MyPage/common.css allows the creation of personal stylesheets for all skins.

You can also create custom skins for MediaWiki.

Help[edit | edit source]

CSS syntax, attributes and values, must be correct or stuff won't work right. W3C.org is an excellent reference for checking how to write CSS correctly directly from the standards:

Wikipedia provides a good overview of CSS, along with links to additional supporting resources.

If you do not want to read through the pages and pages of standard design and deployments, then reading from the W3 Schools explanation of features, derived from the W3C standards, will provide you a quick-reference guide to syntax and basic usage of the various elements. The site will provide reference to past versions but for the most point is an "up-to-date" reference guide.

Caveats[edit | edit source]

Be sure to keep your markup semantic. Relying on styling to indicate meaning is a bad practice (e.g. for machine readability such as by search engines, screen readers using text-to-speech, and text browsers).

Normalized CSS[edit | edit source]

Much CSS today relies on a "reset" or "normalize" CSS to make all browsers work the same. MediaWiki does not have a reset per se, though there are built-in stylesheets such as common/commonElements.css, common/commonContent.css, common/commonInterface.css, and MediaWiki:Common.css.

If you copy CSS, watch if it depends on additional CSS.

For example jsFiddle has a checkbox for "Normalized CSS". This sets margins to 0 and resets the numbers on ordered lists. Since none of this normalization CSS is running on MediaWiki sites, you should not use it when testing MediaWiki-related code.

jsfiddle has a feature to import CSS. If you're testing against the Vector skin on English Wikipedia, the primary sheets should be (in this order):

You can adjust the domain in the URL for other WMF wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

See also[edit | edit source]