Class vs Id

Let’s briefly note the difference between assigning a class to an HTML tag and assigning an id to an HTML tag.

Goal

Follow along to learn when to use classes or Ids in CSS.

Class Vs Id

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Some Exciting Blue Text</title>
  <link rel="stylesheet" href="main.css">
</head>
<body>
  <p class="blue">This text will appear blue.</p>
  <p id="also-blue">This text will also be blue. </p>
</body>
</html>

CSS

/* main.css */
.blue {
  color: blue;
}

#also-blue {
  color: blue;
}

This will output:

Some Exciting Blue Text

This text will appear blue.

This text will also be blue.

Conclusion

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.

javascript

Behavior-Driven Development

behavior-driven devoplement (or BDD) is a process of taking a problem we want to solve or a concept we want to understand and turn it into a set of specific programming tasks.

html

css

javascript

What is Git and Github

Git is the tool that we can use to save all changes and additions to our code on the computer we're working on. GitHub is the online location we can upload our Git-managed code to for safekeeping.