Open main menu

Help:TemplateStyles/examples

< Help:TemplateStyles
Expand Me

Advantage over inline CSSEdit

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