HTML/CSS Class and ID Selectors: Everything You Need to Know

In this introductory tutorial on HTML/CSS Class and ID Selectors, we will dive into some creative examples providing valuable insight into the power of these Selectors to give unlimited ability for web design.

HTML and CSS Interplay

CSS stands for “Cascading Style Sheet” and is used in conjunction with HTML (Hypertext Markup Language) as a powerful tool for creating web design and layout. The HTML uses the CSS attributes id and class to add any number of styles to enhance your web environment.

ID vs. Class: What You Need to Know

Although they have similar functions, they are not the same and do not always share the same purpose.

ID’s are unique

Each element can have only one ID.
Each ID can have an unlimited amount of Styles applied to it.
Each page can have only one element with that ID.
IDs use “#” in the CSS which can also be used as an identifier for HTML “Jump Links” (hyperlinks). This allows you to jump from one place to another on the same web page and can also be used in creating a well-designed Table of Contents.

Below is an example of the ID used in the CSS area of the HTML:

#top {
    background-color: #ccc;
    padding: 20px
}

Classes are not unique

You can use the same Class on multiple elements.
Class naming is case sensitive.
Classes use a “.” in front of the name in the CSS as seen in the illustration below.
Each Class can have an unlimited amount of Styles applied to it.
You can use multiple classes on the same element.

Below is an example of a Class used in the CSS area of the HTML:

.introduction {
  color: red;
    font-weight: bold;
    font: 20px Arial, Helvetica, sans-serif;
}

Helpful Hint #1: Designing Your Web Content

The following example displays an entire HTML web page incorporating the ID and Class selectors.

The following example is the resulting web output:

Helpful Hint #2: Using the ID Selector to Create Jump Links

In the following example, we illustrate the effective behavior of the ID selector to build a hyperlinked Table of Contents. Remember that the web is not a static environment like hard copy pages. Utilizing the ability to hyperlink with Jump Links gives your web users ease of use.

The following is an actual HTML page with code that you can copy.

<!DOCTYPE html>
<html>
<head>
<style>
/* Style the element with the id "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 30px;
  text-align: center;
}

#locator {
  background-color: yellow;
  color: black;
  padding: 10px;
  text-align: left;
}

</style>
</head>
<body>

<a href="#gi">Production Graphic Design</a>

<p>Ehendis el molupta tendign ihicaes tibus.Occus di consecatem laciendit ero oditate consedi gniste porporit, quiam ut eatas et inus sit adipient ut qui dunt alique prae. Facerrupta ad quatia aut et autatur, num quam qui quidusa mustotaqui dis qui ressi quaersperor magnimporat perchillam, eniam.</p>

<!-- hyperlinking to this location -->
<a name="gi">
<h1 id="locator">Jump to this location on the page from the Production Graphic Design link at the top.</h1>

</body>
</html>

The following illustration provides information on the code displayed above. From this illustration, you can see the relationship of the two code sections that talk to each other in order to form the Jump Link.

Helpful Hint #3: Using the Class Selector in Multiple Elements

For this section, we want to show how you can use a Class name in multiple places to repeat a theme on your web page. Once you have given the styles to that class name, you can use it as often as you like.

Tip: The Class name can be named with any name you want to use. We suggest using an intuitive and logical naming convention that helps to identify the content. This in turn becomes a content identifier and helps to lay out your code in a well structured format.

Remember the difference between Class and ID: A Class name can be used by multiple HTML elements, while an ID name must only be used by one HTML element within the page.

The following is a sample HTML page using the Class name GreekCity. You can copy code from this to try it out yourself.

<!DOCTYPE html>
<html>

<head>
  <style>
    /* Style the element with the id “header” */
    #header {
      border: 8px solid black;
      border-radius: 25px;
      padding: 30px;
      text-align: center;
    }

    /* Style all elements with the class name “greek-city” */
    .greek-city {
      background-color: #0d5eaf;
      color: white;
      padding: 10px;
      text-align: center;
    }

    /* Style all elements with the class name “description” */
    .description {
      color: #0d5eaf;
      margin: auto;
      width: 75%;
    }
  </style>
</head>

<body>

  <!– An element with a unique id –>
  <h1 id=”header”>Greek Cities</h1>

  <!– Multiple elements with same classes –>
  <h2 class=”greek-city”>Athens</h2>
  <p class=”description”>Known as the cradle of Western
    civilization, Athens is a vibrant city that blends ancient
    history with modern culture, featuring landmarks like the
    Acropolis and the Parthenon.
  </p>

  <h2 class=”greek-city”>Thessaloniki</h2>
  <p class=”description”>Greece’s second-largest city, Thessaloniki
    is rich in Byzantine history and offers a lively waterfront,
    diverse festivals, and a vibrant culinary scene.
  </p>

  <h2 class=”greek-city”>Heraklion</h2>
  <p class=”description”>As the capital of Crete, Heraklion is
    the gateway to the island’s ancient treasures, including the
    renowned Palace of Knossos, and is known for its dynamic blend
    of urban architecture and historic sites.
  </p>
</body>
</html>

This is what it looks like in your browser.

Outro: Where to Next?

This introduction to Class and ID selectors should provide a starting point for further inquiry into the unlimited creative aspects that HTML offers. We will continue to explore other areas of HTML design in the next blog. We hope this introduction has piqued your interest and inspired you to explore further and dive deeper into the world of web design.

Enroll in our Intro to Programming Nanodegree program today!

Start Learning