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.

HTML/CSS web page defined
Illustration 1: Sample web page with HTML and CSS defined

The following example is the resulting web output:

Sample of resulting output from HTML/CSS
Illustration 2: Sample of resulting output from HTML/CSS

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.

Same page hyperlink code sample
Illustration 3: Sample code for hyperlink table of contents

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 "myHeader" */
#myHeader {
  background-color: lightblue;
  color: black;
  padding: 30px;
  text-align: center;
}

/* Style all elements with the class name "GreekCity" */
.GreekCity {
  background-color: #9815B0;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<!-- An element with a unique id -->
<h1 id="myHeader">Greek Cities</h1>

<!-- Multiple elements with same class -->
<h2 class="GreekCity">Athens</h2>
<p>City number 1.</p>

<h2 class="GreekCity">Thessaloniki</h2>
<p>City number 2.</p>

<h2 class="GreekCity">Mykonos</h2>
<p>City number 3.</p>

</body>
</html>

The following illustration identifies the areas we discussed in this section:

Multiple use of Class on same web page

The following example is the resulting web output:

Illustration 4: Sample code output for Multiple Class Selector

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