CSS Selector

A CSS Selector can be its element tag, by its class or by its id.

CSS Select by Element

You can target and change the style of an element by its tag name. For example, you can target all paragraphs by selecting p tag.

p {
   color: blue;
}

<p>This is the first paragraph</p>
<p>This is the second paragraph</p>
<h4>This is a heading</h4>

In the above example, we have changed the color of all p elements only.

CSS Select by Class Name

All elements have a class attribute. A class is a collection of elements that can have the same design. You can define many elements with the same class. When writing in CSS, a class should be start with a dot/point followed by the class name. When defining the class name in an element, remove the dot and just add the class name. Example,

.text-content {
   color: blue;
}

<p class="text-content">This is the first paragraph</p>
<p class="text-content">This is the second paragraph</p>
<h4>This is a heading</h4>

CSS Select by ID

Elements also have id attribute. Add the id of the element in its attribute. The id should be unique for each element meaning to say no elements should have the same id, you can use class instead if you need to repeat their id in other elements. In CSS, an id is defined by starting with a # sign followed by the id name. In defining the id for the element attribute, remove the # sign and just add the id name. For example,

#text {
   color: blue;
}

<p id="text">This is the first paragraph</p>
<p>This is the second paragraph</p>
<h4>This is a heading</h4>