HTML5ANDCSS3 logoHTML5ANDCSS3Tools and Tutorials

CSS Selectors

CSS Element Selector

The CSS Element Selector is used to select and style HTML elements based on their tag name.
It is the most basic type of selector in CSS and applies styles to all instances of a specific HTML element on a page.

For example, you can target all <p> tags or all <h1> tags and apply the same styling to them.

Element Selector Syntax

css

element {
    property: value;
}

Element Selector Example

css

p {
color: blue;
font-size: 18px;
}

👉 This will apply styles to all <p> elements on the page.

Attributes

PropertyDescriptionExample
colorSets text colorcolor: red;
font-sizeSets text sizefont-size: 20px;
text-alignAligns texttext-align: center;
backgroundSets background colorbackground: yellow;
marginAdds outer spacingmargin: 10px;

Complete CSS Element Selector Example

html

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

        p {
            color: green;
            font-size: 18px;
        }
    </style>
</head>
<body>

    <h1>Element Selector Example</h1>

    <p>This is the first paragraph.</p>
    <p>This is the second paragraph.</p>

</body>
</html>

Output

Browser Output

css

The heading will appear in blue color
All paragraphs will appear in green color with larger font size
Styles are applied to every matching element

Browser Support

Chrome
Firefox
Edge
Safari
Opera
IE9+
✅Yes✅Yes✅Yes✅Yes✅Yes✅Yes

Notes

  • Targets elements by their HTML tag name
  • Applies styles to all matching elements globally
  • Simple and easy to use for basic styling
  • Less flexible compared to class and ID selectors
  • Best used when you want consistent styling across all similar elements

Conclusion

The CSS Element Selector is the foundation of CSS styling. It allows you to quickly apply styles to all elements of a specific type, making it ideal for basic and consistent design across a webpage.

PreviousCSS CommentsNextCSS Class Selector