Help:TemplateStyles/examples

^

Advantage over inline CSS

The content below is styled using template styles (see Template:Stylish and Template:Stylish/styles.css). The tables below use CSS that uses the :nth-child() pseudo-class which cannot be used in inline CSS.

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

Responsive templates

Another good use case is making templates responsive. "Responsive", in this case, means that elements dynamically grow, shrink, move around or become hidden depending on a device's features, such as height or width. Template:ResponsiveAmbox is a modified version of Template: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.

See also

• Wikidata item for Wikipedia:TemplateStyles

• beta:de:TemplateStyles - demo compiled for introducing TemplateStyles to the German Wikipedia.