Help:TemplateStyles/examples

The content below is styled using TemplateStyles :

These two tables were created by a call to Template:Stylish (between two horizontal rules). As can be seen in the source code of that template, both tables contain the same content but refer to two different classes. The styles associated with those classes, including how the tables are floated to opposite sides of the screen, are defined on the page Template:Stylish/styles.css and are enabled by the first line of Template:Stylish:

<templatestylessrc="Template:Stylish/styles.css"/>

This tag allows Template:Stylish/styles.css to act as a stylesheet for the other template.

Note that the code for the two classes uses the :nth-child() pseudo-class to style every other row or column differently, a feature which is simply not possible using inline CSS styles (because it only works in code referenced from a stylesheet).

For security reasons, CSS on most Wikimedia wikis is not true CSS; rather, it is a feature of wikitext with a subset of all possible CSS properties, and will usually only allow "external" stylesheet references to on-wiki hosted stylesheets with the "sanitized-CSS" content model. This is set automatically in some namespaces, but otherwise must be done manually by an administrator.

Another good use case is making templates responsive, meaning that elements dynamically grow, shrink and rearrange themselves or become hidden depending on a device's characteristics such as height, width or display resolution. {{ResponsiveAmbox}} is a modified version of {{Ambox}} that uses Template:ResponsiveAmbox/styles.css. The styles will hide the image to the left if the browser window is narrow enough. Here's an example:

Just like with the previous example, this cannot be done using inline styles.

• Russian Wikipedia's Main Page uses TemplateStyles to reflow the content for smaller viewports.
• Wikidata item for Wikipedia:TemplateStyles
• beta:de:TemplateStyles - demo compiled for introducing TemplateStyles to the German Wikipedia.