Element Selector

Learn how to select HTML elements using their element names and apply CSS styles to them.

What is an Element Selector?

An element selector selects HTML elements based on their element name.

For example, the h1 selector selects all <h1> elements on a page.

Similarly, the p selector selects all paragraph elements.

Simple Definition:

An element selector targets HTML elements by their tag name.

How Element Selector Works

HTML Element

<h1>

↓

Element Selector

h1

↓

CSS Property

color: blue;

↓

Styled HTML Element

Element Selector Syntax

element {
    property: value;
}

In this syntax, element represents the HTML element that you want to style.

Example 1: Selecting an h1 Element

Suppose we have an HTML heading:

<h1>Welcome to CSS</h1>

We can use the h1 element selector to change its text color.

h1 {
    color: blue;
}

Output

Welcome to CSS

Example 2: Selecting Paragraphs

The p selector selects all paragraph elements.

p {
    color: green;
}

Output

This is the first paragraph.

This is the second paragraph.

Example 3: Selecting Buttons

We can also use an element selector to style all buttons.

button {
    background-color: blue;
    color: white;
}

Output

Element Selector Applies to All Matching Elements

If a page contains multiple elements of the same type, the element selector applies the CSS rule to all matching elements.

h2 {
    color: purple;
}

Output

First Heading

Second Heading

Common Element Selectors

Selector	HTML Element	Purpose
`h1`	`<h1>`	Selects all h1 headings.
`p`	`<p>`	Selects all paragraphs.
`div`	`<div>`	Selects all div elements.
`button`	`<button>`	Selects all buttons.
`img`	`<img>`	Selects all images.

Important Points

Element selectors use HTML element names.
The selector applies to all matching elements.
Element selectors are simple and easy to use.
They are useful when the same style is required for every element of a particular type.

Summary

An element selector selects HTML elements by their element name. For example, h1 selects all h1 headings and p selects all paragraphs. The same CSS rule is applied to every matching element.