Mixed Classes

You can create "special purpose" classes and mix and match them to suit your needs:

[!-- put the following into a page to see the results --]
[[module css]]
/* custom mix and match classes */
.big {font-size: 36px;}
.medium {font-size: 24px;}
.small {font-size: 8px;}
.times {font-family:"Times New Roman";}
.arial {font-family:"Arial";}
.blue {color: blue;}
.red {color: red;}
.green {color: green;}
[[/module]]
[[span class="big"]]Big[[/span]]
[[span class="medium"]]Medium[[/span]]
[[span class="small"]]Small[[/span]]
[[span class="big blue"]]Big Blue[[/span]]
[[span class="medium green times"]]Medium Green Times[[/span]]
[[span class="small blue arial"]]Small Blue Arial[[/span]]
[[span class="red blue arial"]]Red Blue Arial[[/span]]
[[span class="red green arial"]]Red Green Arial[[/span]]

Big
Medium
Small
Big Blue
Medium Green Times
Small Blue Arial
Red Blue Arial
Red Green Arial

Note the behavior of the last 2 lines. The order of the colors in the custom CSS is blue, red, green. The color conflicts in the class= lines are resolved by which item is listed last in the CSS.

This page and example uses [[module css]] ... [[/module]], but you should make these classes as part of your site's custom theme CSS so they can be easily called on any page.

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License