Introduction

In this tutorial, you will create a CSS class selector, which will allow you to apply CSS rules only to HTML elements that are assigned the class. CSS class selectors are useful when you want to apply different style rules for different instances of the same HTML element.

Prerequisites

To follow this tutorial, make sure you have set up the necessary files and folders as instructed in a previous tutorial in this series How To Set Up You CSS and HTML Practice Project.

How CSS Class Selectors Work

A CSS class selector allows you to assign style rules to HTML elements that you designate with that class rather than all instances of a certain element. Unlike HTML elements (such as <p>, <h1>or <img>), whose names are predetermined, class names are chosen by the developer when they create the class. Class names are always preceded by a ., which can help you distinguish between tag selectors and class selectors in CSS files.

A CSS rule for a class selector is written in the same way as a rule for a tag selector, with the exception of the . prepended to the class name:

.red-text {
  color: red;
}

Copy

To use a class when adding HTML content to your webpage, you must specify it in the opening tag of an HTML element using the class attribute in your HTML document like so:

<h1 class=".red-text">Content.</element>

Copy

Creating a CSS Class Using a Class Selector

Let’s begin exploring CSS classes in practice. Erase everything in your styles.css file and add the following code snippet to specify a rule for the class red-text:

styles.css

.red-text {
  color: red;
}

Copy

After adding the code snippet to your styles.css file, save the file.

#css