>> English << | Português | По-русскиZVON > Tutorials > CSS tutorial
>> Example 9 << | Prev | Next | Contents

Description

Sometimes we would like to distinguish between elements of the same name. In this case class attribute on these elements comes very handy. In stylesheet the required element is marked by its name, followed by "." and the value of class attribute.

>> Case 1 <<
HTML SourceCSS stylesheet

<div> div: 000 </div>
<div class = "aaa"> div: aaa </div>
<div class = "bbb"> div: bbb </div>
<div class = "ccc"> div: ccc </div>
<p> p: 000 </p>
<p class = "aaa"> p: aaa </p>
<p class = "bbb"> p: bbb </p>
<p class = "ccc"> p: ccc </p>
body {background-color: white;  color: black}

div {color: white; background-color:navy}
div.aaa {color: aqua; background-color: green}
div.bbb {color: maroon; background-color: yellow}

p.aaa {color: green}
p.bbb {color: maroon}
p.ccc {color: purple}

Browser output