Classes and IDs?! You may have heard of them before when referring to HTML and CSS.

If you are a beginner and want to learn the basics of coding, check out our FREE 30-minute intro course here: training.mammothinteractive.com/p/learn-to-code-in-30-minutes

Classes and IDs are SUPER useful because they allow us to target certain elements on a page. For instance, if you create an item, giving it a class or ID will be useful later on when you want to stylize the item, such as change its color or size.

Classes are used to give a group of items the same style. Identifiers (IDs) are more specific than classes and are also used to stylize.

To follow along with this tutorial, visit jsbin.com, which allows you to test your code in real time. In JS Bin, click on the HTML tab to open a blank HTML file.

Whenever you make a class, first make a div within the body tag:

  <div>
  </div>

Give the div a class, and name it vegetables. It is good practice to name the class after its function or what it contains.

  <div class="vegetables">
  </div>

  <div class="vegetables">
     <ul>
       <li>Carrots</li>
       <li>Onions</li>
       <li>Broccoli</li>
     </ul>
  </div>

If you wanted to make the list ordered, you would simply need to change ul to ol.

Next we will make another div containing fruits.

  <div class="fruits">
    <ul>
      <li>Apples</li>
      <li>Bananas</li>
      <li>Watermelon</li>
    </ul>
  </div>

Now we have two unordered lists each in a different div. We also have a class for each div. Let’s see what happens when we target these classes. Open the CSS tab. To target a specific class in CSS,m type the class name with a dot in front of it. For instance:

.vegetables {

}

Any styling in here will be applicable to the div vegetables. For example, to change the color of the text “Carrots Onions Broccoli” to blue, write:

.vegetables {
color: blue;
}

Likewise, we can change the font style to something like italic, and font size to 20 pixels.

.vegetables {
color: blue;
font-style: italic;
font-size: 20px;
}

There are times when you will want to be more specific. Let’s say you have a class but there is something within the class that you want to style differently from the rest. For instance, if you want to single out Broccoli, you can put an ID on it in HTML, as shown in the following code. An ID is meant to be used for one element only.

  <div class="vegetables">
     <ul>
       <li>Carrots</li>
       <li>Onions</li>
       <li id="least-favorite">Broccoli</li>
     </ul>
  </div>

To actually change the styling of this ID, you have to select the ID and apply styling on it in CSS. Selecting an ID is a bit different from selecting a class. The following code selects the ID least-favorite:

#least-favorite {
color: red;
}

IDs override classes because IDs are more specific. For this reason, you want to use IDs sparingly because they are harder to fix later on if you have a lot of code.

From here, why don’t we add a new list item in the vegetables div that is a link? The following box of code shows how to add links in HTML.

  <div class="vegetables">
     <ul>
       <li>Carrots</li>
       <li>Onions</li>
       <li id="least-favorite">Broccoli</li>
       <li><a href="#">Test link</a></li>
     </ul>
  </div>

In place of # you would put a link to a website.

Now in our vegetables list we have a new item: Test link. You can apply styling to this, but it is in its own tag. Thus, in CSS, you can target every a tag in the vegetables div like so:

.vegetables a {
text-decoration: none;
color: purple;
}

As you can see, you can select tags within classes. You can do the same with any other div or class.

Those are the basics of classes and IDs! A large part of learning to code is experimentation, so play around with creating more classes and IDs. For more FREE tutorials, check out our 30-minute beginners course on coding: training.mammothinteractive.com/p/learn-to-code-in-30-minutes