Advantages over inline style declarations

The content below is styled using TemplateStyles :

The two tables were created by putting {{Stylish}} in the source code for the page. In this example, both tables display the same content, but are styled differently. The wikitext transcluded from Template:Stylish when {{Stylish}} is added to a page's source text begins with a <templatestyles /> tag.

Written as <templatestyles src="Template:Stylish/styles.css" />, that tag creates a reference to the stylesheet Template:Stylish/styles.css. In that stylesheet, the classes column-demo and zebra are defined.

The template's code contains two copies of the information for a table formatted using the wikitext markup found at Help:Tables#Wiki table markup summary, neither copy with any styling information. For the table on the left, the markup begins with {| class="column-demo" while for the right it is {| class="zebra". Apart from that difference, the rest of the code for the tables is identical.

Despite those classes being undefined in the template's code, because the code references a CSS stylesheet with definitions for them, the definitions for those classes in the stylesheet are used, giving them their colors and setting their alignments.

The code for those two classes uses the :nth-child() pseudo-class to style separate rows differently, a feature which simply is not possible to use in inline CSS styles (i.e. 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.

Responsive templates

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:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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

See also

• 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.