Guidelines:CSS

Cascading Style Sheets (CSS) is the language used to define 's appearance. It is used to customize MediaWiki's default interface and its various skins. It is also used to define the presentation of templates.

If you have questions about 's CSS, we invite you to ask them in the.

If you would like to help improve the wiki's CSS, Category:Templates Needing CSS Improvements lists templates which do not follow the best practices outlined below.

Learning CSS
If you are new to CSS, check out the following resources:
 * MDN Web Docs
 * Khan Academy Intro to HTML/CSS

CSS at
uses to apply CSS to templates. See Category:Template Styles for a list of the wiki's template-specific CSS files.

CSS for the general site interface is found on the following staff-restricted pages:
 * 1) MediaWiki:Gadget-Site.css and MediaWiki:Gadget-Variables.css, for CSS common to desktop and mobile views
 * 2) MediaWiki:Common.css and MediaWiki:Mobile.css, for CSS specific to the desktop view or mobile view, respectively
 * 3) MediaWiki:Vector.css and MediaWiki:Timeless.css, the default desktop and mobile skins, respectively
 * 4) Various Category:Gadget Styles

Non-default skins are maintained unofficially by the community. See Category:Community-Maintained Skins.

Best Practices
When writing CSS for, try your best to adhere to these best practices. If you see a template that does not follow these practices, please add it to Category:Templates Needing CSS Improvements.

Design Tokens
When choosing CSS values such as colors or spacing units, try as much as possible to use the values in MediaWiki:Gadget-Variables.css. These variables constitute 's design tokens. Using them ensures a consistent design across the wiki. In particular, using variables instead of hard-coded colors will allow us to support multiple color themes on the wiki.

Unfortunately, CSS variables won't work in template styles until we upgrade to MediaWiki 1.39. For now, we can copy the values of these variables into template styles. Once we upgrade we can do a site-wide text replacement to swap in variable references.

Inline Styles
Generally, if a template contains anything but the smallest amount of styling, it should be placed in a separate CSS file to simplify maintenance. This enables the use of more advanced styling such as media queries for responsive design (see below).

Avoid using inline styles in articles, especially when styles may be copied to other pages. The duplication makes the styles difficult to maintain if they ever need to be changed.

Responsive Design
Templates should be responsive—they should not appear broken when viewed on mobile devices.

To achieve this, you may need to use media queries.

Media Queries
Note how Template:Main Page Categories/Styles.css, for example, starts with CSS that works on small screens then uses media queries to have the template make use of the additional space:

Targeting Screen Sizes
In some cases you may need to show different content on smaller screens versus larger ones. Module:Data Table does this for the Upgrading page, for example.

has classes for targeting specific screen sizes.

MediaWiki:Gadget-Site.css defines the following sizes:
 * : under 53.125rem (850px)
 * : 53.125rem (850px)
 * : 68.75rem (1100px)
 * : 90rem (1440px) and over

A  class also exists which hides content on screens smaller than 850px when using the mobile skin. However, completely hiding content on mobile is generally not recommended as all readers of the wiki should have access to the same information. Exceptions include non-essential navigation elements, particularly imagemaps such as Template:Great Plateau which are only fully usable with a mouse.

units
uses  units for most size-related design tokens. On most browsers, 1rem equals 16px by default. Using rem units ensures that all users have a consistent experience regardless of their font settings.

There is some debate among web developers as to whether rem units should be used to this extent. We do not claim to be experts in this field and defer to the judgement of the makers of the design systems Lightning and Polaris, who use rem values in their design tokens.

Selectors and Class Naming
Assign unique class names such that elements (even sub-elements) can be targeted with a single class selector. Avoid using IDs and tags in CSS selectors. Here's why.

The BEM Methodology is recommended for this purpose.