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 {
property: value;
}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; |
<!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
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.
