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
rating: +2
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 Johnson Ed Johnson . Please visit his/her userPage.
Related articles
Comments
Wow, I didn't know about this! Thanks Ed!
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server