How to use CSS class?

UI5 / By

A CSS class is an attribute used to define a group of HTML elements a unique styling and formatting. Class is a group of elements that are similar or unique. For example, when we want to add blue text to a set of paragraphs, or bold red text to set of headings in our website we use CSS class.

How to add a class to your HTML element?

<div class=”class1”>

<p class=”class1”>This is a paragraph</p>

Each HTML element can have multiple classes.

<div class=”class2”>

How to use a class in CSS?

.class1{

width: 50px;

height: 50px;

background: blue;

}

Example:

css class

OUTPUT:

css class

Where can you add CSS classes in HTML?

CSS classes can be added to any HTML elements. Some of the most common ones are:

  • <p> paragraph
  • <body>
  • <h1>, <h2>, …<h6> headings
  • <title>
  • <blockquote>
  • <span>
  • <div>
  • <img> images
  • <button>
  • <a>
  • <links>
  • <embed>
  • <table>

and much more.