Before we go on let's briefly note the difference between assigning a class to an HTML tag and assigning an id to an HTML tag. For the remainder of this section you can ignore id's and continue using classes, but a brief explanation is in order as you are likely to find references to id's when reading resources online.
Both classes and ids can be targeted by CSS rules (classes with a . and id's with a # symbol). For example, both paragraph tags below are styled the same, though one is referenced by class and the other by id.
<html lang="en-US">
<head>
<link href="styles.css" rel="stylesheet" type="text/css" media="all">
<title>Some Exciting Red Text</title>
</head>
<body>
<p class="intro">This text will appear red.</p>
<p id="line2">This text will also be red. </p>
</body>
</html>
.intro {
color: red;
}
#line2 {
color: red;
}
The important difference is that ids are unique, while classes are not unique. We can use the same class on multiple elements, while id's must be unique to a single element on the page. Id's may appear to work even when duplicated on the same page, but duplicate id's will lead to inconsistent behavior and difficult-to-find bugs.
If in doubt, use a class.
A particular id can only be attached to one element per web page, while the same class can be attached to many different elements on the same page.
When referencing classes in CSS, use: . (e.g. .intro)
When references ids in CSS, use: # (e.g. #line2)
Lesson 55 of 66
Last updated October 6, 2022