CSS Selectors

❮ Prev Next: CSS Selectors Group ❯

A CSS selector selects the element of the HTML you want to style, CSS selectors are used to select the HTML elements you want to style, Here we will explain some basic CSS selectors.

CSS element Selector

The element selector selects the HTML element you want to style based on the name of the element.

In the following example, all the <p> elements will be right-aligned, with a green text color.

Example CSS Element Selector

p {
color: green;
text-align: right;
}

The CSS class Selector

Class is also an important attribute of HTML attributes.

In CSS, this attribute is known as class selector.

The class selector selects the HTML element by a specific 'class attribute'.

You can customize the name of the CSS class.

Put a dot before the name of the CSS class, as you can see in the following example.

In the following example we have created a class named center, the text of the HTML element we will add to this class will be green and center aligned.

Example of CSS class selector

.center {
color: green;
text-align: center;
}

How to add CSS class selector as HTML tag's attribute?

Example add class

<p class="center">This is a paragraph.</p>

After adding the CSS class to the HTML tag, the text of the paragraph is green and center aligned:

Result

This is a paragraph.

CSS id Selector

Like the class attribute, the ID is an attribute of HTML.

In CSS, this attribute is known as ID selector.

The ID selector selects the HTML element by a specific 'ID attribute'.

You can customize the name of the CSS ID to your liking.

Put a hash # before the CSS ID name, as you can see in the following example.

In the following example we have created an ID with the name of the center, the text of the HTML element that we will add to this ID will be green and center center.

Example of CSS id selector

#center {
color: green;
text-align: center;
}

How to add CSS ID selector as HTML tag's attribute?

Example ad id

<p id="center"> This is a paragraph </p>

After adding the CSS ID to the HTML tag, the text of the paragraph is green and center aligned:

Result

This is a paragraph

CSS Universal Selector

The Universal Selector star (*) selects all HTML elements on the page.

Example of CSS Universal Selector

The CSS principle below will affect every HTML element on the page.

٭ {
color: green;
text-align: center;
}

Example

We have used CSS Universal Selector in this page:

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<p>This is another paragraph</p>

After using CSS Universal Selector, the text of each element of the page has become green and center aligned:

Result

This is a heading
This is a paragraph
This is another paragraph

note

You will learn a lot about CSS selectors, declarations and CSS features in the next tutorials.

❮ Prev Next: CSS Selectors Group ❯