Class selector

Name: Learn CSS: Introduction
Rating: 4.741400000000000000 (642 reviews)

In CSS, class selector allows you to select and style elements based on class name. It is one of the most commonly used selectors in CSS.

By using a class selector, you can apply a particular style to multiple elements of your HTML document instead of repeating it for each individual element.

Syntax

1 .classname {
2     property: value;
3 }

The class selector starts with a dot (.) followed by the class name.
The property/value pairs inside the curly braces define the styling rules for the selected elements.

For example, consider the following HTML:

1 <h1 class="header">Welcome to my website</h1>

In the above example, we have applied a class header to the h1 element

1 .header {
2
3 }

Then we have created a CSS styling rule for the header class.

The styles defined for header class will be applied to all elements with the class header.

Instructions

On line 11 of index.html there is an <h1> element with the class title.
Now, open style.css. On line 14, use the class selector to create a ruleset that selects that HTML element using the class title.

Inside the curly braces of the .title selector, add the declaration:

1background-color: yellow;

This code will change the background color of the h1 with the title class to yellow.

Already have an account?

Course content