Lesson Wednesday

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 week 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.

index.html
<html>
  <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>
styles.css
.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.

Summary


  • 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)