CSS Element Selector

The CSS Element Selector selects HTML elements based on their tag names. It allows you to apply the same styles to all elements of a particular type, such as paragraphs, headings, or buttons.

For example, you can use the p selector to change the text color of every paragraph on a webpage.

CSS Element Selector Syntax

The syntax for an element selector is simple:

element {
    property: value;
}

Here, element represents an HTML tag, while property and value define the style you want to apply.

CSS Element Selector Example

The following example changes the color of all headings and paragraphs.

<!DOCTYPE html>
<html>
<head>
    <title>CSS Element Selector</title>
    <style>
        h1 {
            color: blue;
        }

        p {
            font-size: 18px;
            color: green;
        }
    </style>
</head>
<body>
    <h1>Welcome to Web4Learners</h1>
    <p>Learn CSS step by step.</p>
    <p>This paragraph also appears green.</p>
</body>
</html>

In this example, all <h1> elements appear blue, and all <p> elements have green text with an 18-pixel font size.

Using Element Selectors with Multiple Properties

You can apply multiple CSS properties to the same element selector.

h2 {
    color: darkblue;
    font-size: 24px;
    text-align: center;
}

This rule changes the heading color, font size, and alignment. Learn more about writing CSS rules in our CSS Syntax tutorial.

When to Use CSS Element Selectors

Element selectors are useful when you want to apply consistent styles to every element of a particular type. For example, you can set a default font for paragraphs or style all level-two headings across a webpage.

However, when you need to target only specific elements, consider using a CSS Class Selector or an ID Selector.

Element selectors are one of the fundamental parts of CSS and help you control webpage appearance with simple, readable rules.