CSS: Working with Multiple Class Names

This day I would like to share with you a good css trick ;)

An element's class attribute can have multiple values, each separated by whitespace. This is a very powerful features of CSS, allowing you to apply styles from more than one class to any element.

We can read in the HTML specifications:

class = cdata-list [CS]

"This attribute assigns a class name or set of class names to an element. Any number of elements may be assigned the same class name or names. Multiple class names must be separated by white space characters."

So we can make this css code:

.title { font-size: 25px }

.red { color: red }

.right { float: right }

and the html code:

< h1 class = "title red right">Website Title< /h1>

Now you should see your title (25px) in red on the right side :)

25 Dec 2006 . 13:56