CSS Selectors

CSS Element Selector

Written by Swapnil RajaUpdated 30 Jul 2026

Select HTML elements by tag name and understand when a broad type selector is appropriate for document defaults and base styles.

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. The supporting concepts are explained in CSS Class Selector and CSS Group Selector.

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

Property	Description	Example
color	Sets text color	color: red;
font-size	Sets text size	font-size: 20px;
text-align	Aligns text	text-align: center;
background	Sets background color	background: yellow;
margin	Adds outer spacing	margin: 10px;

Type selectors belong in the base layer

Type selectors are useful for document-wide defaults such as readable paragraphs, list spacing, and inherited form typography. They become harder to manage when they encode component-specific appearance, because every matching element receives the rule. Keep broad element rules low in the cascade and use classes for reusable components that need variants or local exceptions.

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>

Browser Support

Feature	Chrome	Edge	Firefox	Safari
Type selector	1	12	1	1

Versions show the first stable desktop release with unprefixed support. Data source: MDN Browser Compatibility Data 8.0.8.

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 Math Functions NextCSS Class Selector