Skip to main content
Practice

Class

Reusing Styles​

A CSS Class is an identifier used to apply styles to HTML elements or to select elements using JavaScript.

It is primarily used to apply the same CSS style to multiple HTML elements.


Key Features of Class

  • A class is defined in CSS with a name that starts with a . and can be assigned to multiple elements to share the same style.

  • Multiple classes can be applied to a single HTML element.

  • Class names are defined without spaces, using letters, numbers, hyphens (-), and underscores (_).


For example, the following CSS class sets a yellow background color and blue text color.

highlighted CSS class
.highlighted {
  background-color: yellow;
  color: blue;
}

You can apply this class in an HTML document to give the same style to h1, h2, and p tags as follows:

Applying CSS class
<h1 class="highlighted">Highlighted H1</h1>
<h2 class="highlighted">Highlighted H2</h2>
<p class="highlighted">Highlighted Paragraph 1</p>
<p class="highlighted">Highlighted Paragraph 2</p>

Follow the highlighted parts in the code to type it yourself.

The background-color of all cards will be applied as coral.

Want to learn more?

Join CodeFriends Plus membership or enroll in a course to start your journey.