Manual:CSS

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

CSS can be used to change the style of the entire wiki; such as, to change the background to a different color. Alternatively, you can use inline CSS to style specific pieces of text in your wiki. For example green text can be accomplished by doing. If you want to make all text on the wiki larger you can add the code  to MediaWiki:Common.css.

For mobile version use MediaWiki:Mobile.css

To change the look and feel of MediaWiki's screen display (how it looks in a browser) you can put CSS into .

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

If allowcss>Special:MyLanguage/Manual:$wgAllowUserCss|enabled on your wiki, individual users can create custom stylesheets, for their personal display at Special:MyPage/&lt;skin_name&gt;.css (Ex. : the user can input Special:MyPage/vector.css if they are using the vector skin). Special:MyPage/common.css allows the creation of personalized, individual stylesheets, for all skins.

You can also create cat-skinning>:Category:Skinning|custom skins for MediaWiki.

Help
CSS syntax, attributes, and values, must be correct or else the display won't work correctly. [http://www.w3.org/</> World Wide Web Consortium (W3C)] is an excellent reference for learning how to write CSS correctly, directly from the standards:
 * <tvar|propidx>https://www.w3.org/TR/CSS21/propidx.html</> -- CSS 2.1 Index of properties &larr; very helpful
 * <tvar|indexlist>http://www.w3.org/TR/CSS21/indexlist.html</> -- CSS 2.1 Index of everything
 * <tvar|minitoc>http://www.w3.org/TR/CSS21/cover.html#minitoc</> -- CSS 2.1 Table of Contents

Wikipedia gives a good overview of CSS.

If you prefer an easily consumable reference, alongside demos of CSS features, [<tvar|css-mdn>https://developer.mozilla.org/en-US/docs/Web/CSS</> Mozilla Developer Network CSS Reference] will provide you an "up-to-date" guide to syntax, along with basic usage of the various elements.


 * [<tvar|css-mdn>https://developer.mozilla.org/en-US/docs/Web/CSS</> Mozilla Developer Network CSS Reference]

Caveats
Be sure to keep your HTML markup semantic. Relying entirely on CSS 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
Much of the CSS markup 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; including: common/commonElements.css, common/commonContent.css, common/commonInterface.css, and <tvar|1></>.

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

For example: jsFiddle, has a checkbox for "Normalized CSS". This sets s to , 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):


 * [/load.php?debug=true&lang=en&modules=mediawiki.legacy.shared&only=styles&skin=vector Legacy general (all skins that use CSS) CSS built in to core ]
 * [/load.php?debug=true&lang=en&modules=skins.vector.styles&only=styles&skin=vector General and Vector CSS built-in to core ]
 * [/load.php?debug=true&lang=en&modules=site&only=styles&skin=vector Site CSS (MediaWiki namespace) ]
 * [/load.php?debug=true&lang=en&modules=ext.gadget.site-styles&only=styles&skin=vector CSS for all skins (for all users) on MediaWiki.org (MediaWiki namespace) ]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector skin CSS (MediaWiki namespace) ]
 * [/load.php?debug=true&lang=en&modules=site.styles&only=styles&skin=vector Vector skin CSS (MediaWiki namespace) ]

You can adjust the domain name within the URL for other WikiMedia Foundation (WMF) wikis. By importing these, you can get a better idea how your CSS interacts with the CSS on WMF wikis.

Styles not working on Special:UserLogin or Special:Preferences?
By default, site CSS customizations (e.g. <tvar|common>MediaWiki:Common.css</>) do not take effect on the login and preferences pages.

This is done to preserve the security of the login process, and to allow users to remove any unwanted customizations without being interfered with.

If you are not concerned about the security risks, you can use the <tvar|AllowSIteCSSOnRestrictedPages></> configuration setting to allow custom CSS to work on these pages.