Multiple classes

Back to the index.

This page tests the assigning of multiple class names to one element. Each test paragraph has two values for its class attribute.


p.colour {color: #CB000F;}
p.underline {text-decoration: underline;}
p.large {font-size: 150%;}
p.small {font-size: 90%;}
p.underline.small {border: 1px solid;}

Note the last rule: it says "any p that has a class underline AND small". Explorer 6- doesn't read this last rule correctly; it applies it to any paragraph that has a class "small".

This paragraph has class="colour large" It should be red and large.

This paragraph has class="underline large" It should be underlined and large.

This paragraph has class="colour small" It should be red and small.

This paragraph has class="underline small" It should be underlined, small, and have a border.