CSS Selectors
CSS Element Selector
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.