The CSS Universal Selector is used to select all elements on a webpage.
It is represented by an asterisk (*) and applies styles to every HTML element, unless overridden by more specific selectors.
This selector is often used for:
- Resetting default browser styles
- Applying global styling
* {
property: value;
}* {
margin: 0;
padding: 0;
}👉 This removes default spacing from all elements.
Attributes
| Property | Description | Example |
|---|---|---|
| margin | Controls outer spacing | margin: 0; |
| padding | Controls inner spacing | padding: 0; |
| box-sizing | Defines box model calculation | box-sizing: border-box; |
| font-family | Sets font for all elements | font-family: Arial; |
| color | Sets default text color | color: black; |
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Universal Selector</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
h1 {
color: blue;
}
p {
color: green;
padding: 10px;
}
</style>
</head>
<body>
<h1>Universal Selector Example</h1>
<p>This paragraph has no default margin.</p>
<p>Spacing is controlled using CSS.</p>
</body>
</html>Output
Browser Output
All elements will have no default margin and padding
Layout becomes more consistent across browsers
Heading will appear in blue
Paragraphs will appear in green with padding
Browser Support
 Chrome |  Firefox |  Edge |  Safari |  Opera |  IE9+ |
|---|---|---|---|---|---|
| ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes | ✅Yes |
Notes
- The universal selector targets every element
- Useful for creating a CSS reset
- Can impact performance if overused in large projects
- Often combined with other selectors for better control
- Lower specificity compared to class and ID selectors
Conclusion
The CSS Universal Selector is a powerful tool for applying global styles across a webpage. It is especially useful for resetting default browser styles and ensuring consistent layout behavior.
