Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Universal Selector in CSS
The CSS * selector is a universal selector which is used to select all elements of the HTML DOM. If you want to set a similar style for the entire document, then use the Universal selector.
Syntax
* {
/* declarations */
}
Possible Values
The universal selector accepts any valid CSS properties as values. Common use cases include −
| Property | Description |
|---|---|
margin, padding |
Reset spacing for all elements |
box-sizing |
Set box model behavior for all elements |
font-family |
Apply consistent typography |
Example 1: Reset Margins and Padding
To set the margins and padding settings for all the elements on the web page, set it under the Universal Selector −
<!DOCTYPE html>
<html>
<head>
<style>
* {
padding: 2px;
margin: 5px;
}
.container {
background-color: #f0f0f0;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="container">
<h1>Title</h1>
<p>This paragraph has universal spacing applied.</p>
<button>Click me</button>
</div>
</body>
</html>
All elements (h1, p, button, div) have 2px padding and 5px margin applied uniformly across the page.
Example 2: Set Box Sizing with Universal Selector
We have used the Universal Selector and set the box-sizing property. The box-sizing is set with the value border-box; so that the padding and border are included in the width and height −
<!DOCTYPE html>
<html>
<head>
<style>
* {
box-sizing: border-box;
}
.box {
width: 200px;
padding: 20px;
border: 5px solid #333;
background-color: #e0e0e0;
margin: 10px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
</body>
</html>
Two boxes with consistent 200px width, including padding and border within that width due to box-sizing: border-box.
Example 3: Set Font for the Document
Use the universal selector to select a similar font for all the elements set on the web page −
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Tutorials</h1>
<h2>Text Tutorial</h2>
<p>This includes the text library.</p>
<h2>Video Tutorial</h2>
<p>This includes the video lectures.</p>
</body>
</html>
All headings and paragraphs display with the same Segoe UI font family consistently across the page.
Key Points
- The universal selector has the lowest specificity (0,0,0,0)
- Use sparingly as it can impact performance on large documents
- Commonly used for CSS resets and consistent base styling
Conclusion
The CSS universal selector * is a powerful tool for applying styles to all elements at once. It's particularly useful for CSS resets, consistent typography, and global box model settings.
2K+ Views
