Cascading Style Sheets

skip to content

Class vs ID


	.classelement {color:red;}
	<div class="classelement">text here<⁄div>

a class can be used multiple times


	#IDelement {color:red;}
	<div id="IDelement">text here<⁄div>

ID can only be used once
IDs carry a heavier weight in determining styles

IDs can be more specific

This example shows how a links can be defined within an ID only.

#testid {background:#efefef;;}
#testid a{font-weight:bold;color:navy;text-decoration:none;}
#testid a:hover{color:green;background:yellow;text-decoration:underline;}

<div id="testid">
	<a href="#">Link inside testid ID<⁄a>
<a href="#">Link outside ID<⁄a>

 Link inside testid ID (redefined A link)
 Link outside ID (base A link)