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.

    <link href="styles.css" rel="stylesheet" type="text/css" media="all">
    <title>Some Exciting Red Text</title>
    <p class="intro">This text will appear red.</p>
    <p id="line2">This text will also be red. </p>
.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)