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
Selected Reading
Selects all elements with CSS
To select all elements on a webpage, use the universal selector (*) in CSS. This selector applies styles to every HTML element within the document, making it useful for resetting default styles or applying global formatting.
Syntax
* {
property: value;
}
Example
The following example demonstrates how to apply styles to all elements using the universal selector −
<!DOCTYPE html>
<html>
<head>
<style>
* {
color: blue;
background-color: orange;
margin: 5px;
padding: 10px;
}
</style>
</head>
<body>
<h1>Demo Website</h1>
<h2>Learning</h2>
<p id="tutorials">Tutorials on web dev, programming, database, networking, etc.</p>
<p>Every tutorial has lessons with illustrations and figures.</p>
<div>This is a div element.</div>
</body>
</html>
All elements on the page display with blue text on orange background, with 5px margin and 10px padding applied uniformly. The heading, paragraphs, and div all inherit these styles.
Common Use Cases
The universal selector is commonly used for:
- CSS Reset: Removing default browser margins and padding
- Global styling: Applying consistent font-family or box-sizing
- Debugging: Adding borders to visualize element boundaries
Example: CSS Reset
Here's a practical example using the universal selector for a basic CSS reset −
<!DOCTYPE html>
<html>
<head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
}
h1, h2 {
margin-bottom: 15px;
}
p {
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>Clean Layout</h1>
<h2>No Default Spacing</h2>
<p>All elements start with zero margin and padding.</p>
<p>Custom spacing is applied only where needed.</p>
</body>
</html>
A clean webpage layout with no default browser spacing. All elements have consistent styling with custom margins applied only to specific elements.
Conclusion
The universal selector (*) is a powerful tool for applying styles to all elements. Use it wisely for resets and global styles, but avoid overusing it as it can impact performance and specificity.
Updated on: 2026-03-15T12:46:07+05:30
315 Views
Advertisements