ID and Class

CSS selectors are used to “find” (or select) the HTML elements you want to style.

You can also define your own selectors in the form of Class and ID selectors.

In the CSS, a class selector is a name preceded by a full stop (“.”) and an ID selector is a name preceded by a hash character (“#”).

ID:

ID’s are unique

  • Each element can have only one ID
  • Each page can have only one element with that ID
<button id="btn-save">Save</button>

Css

#btn-save{
    background-color: #ccc;
}

Class:

Classes are not unique

  • You can use the same class on multiple elements.
  • You can use multiple classes on the same element.
<button class="btn-save">Save</button>

CSS

.btn-save{
    background-color: #ccc;
}