Help:TemplateStyles/examples

Expand Me

Advantage over inline CSSEdit

The content below is styled using template styles :

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



In this example, the template named Template:Stylish has the content of the tables (that here are two identical tables, with only different titles), and this template refers to Template:Stylish/styles.css to describe their respective style sheets.

The tables above use CSS that uses the :nth-child() pseudo-class, which cannot be used in inline CSS.

Responsive templatesEdit

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 alsoEdit