Mix and Match CSS Classes

Posted by Ed Johnson on 28 Dec 2009 02:21, last edited by GoVegan on 09 May 2010 05:54

Tags: class css span

rating: +2+x

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,georgia,serif;}
.arial {font-family:arial,sans-serif;}
.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.

Author

Ed JohnsonEd Johnson. Please visit his/her userPage.


Related articles

Comments

Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-Share Alike 2.5 License.