View source for Help:TemplateStyles/examples

{{note|Expand Me}}

== 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 <code>:nth-child()</code> pseudo-class which cannot be used in inline CSS.

{{Stylish}}

<br clear="all">

== 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:

{{ResponsiveAmboxExample}}

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

== See also ==

* [https://www.wikidata.org/wiki/Q51724369 Wikidata item for Wikipedia:TemplateStyles] 

* [https://de.wikipedia.beta.wmflabs.org/wiki/TemplateStyles beta:de:TemplateStyles] - demo compiled for introducing TemplateStyles to the German Wikipedia.

{{Purge button}}