Help:TemplateStyles/examples

Advantages over inline style declarations

The content below is styled using TemplateStyles :

The Zebra	Looks	Really	good
and	cute	With	lots
of stripes	That make	a horse	Jealous

The Zebra	Looks	Really	good
and	cute	With	lots
of stripes	That make	a horse	Jealous

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:

<templatestyles src="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.

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:

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

Advantages over inline style declarations

Responsive templates

See also