The class Selector

The class Selector

//in the example below, all HTML elements with class="center" will be red 
//and center-aligned

.center {
  text-align: center;
  color: red;
}
//in the example below, only <p> elements with class="center" 
//will be center-aligned

p.center {
  text-align: center;
  color: red;
}
//n the example below, the <p> element will be styled according to 
//class="center" and to class="large"

<p class="center large">This paragraph refers to two classes.</p>
  • Selects elements with a specific class attribute.
  • To select elements with a specific class, write a period (.) character, followed by the name of the class.
  • You can also specify that only specific HTML elements should be affected by a class.
  • HTML elements can also refer to more than one class.
  • A class name cannot start with a number!.

Related concepts

The class Selector

The class Selector — Structure map

Clickable & Draggable!

The class Selector — Related pages: