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
What does * { mean in HTML?
The asterisk symbol (*) in HTML is actually a CSS universal selector that targets every element in an HTML document. When used in CSS as *{}, it applies styles to all HTML elements on the page, making it a powerful tool for setting global styles or resetting default browser styles.
Syntax
Following is the syntax for the universal selector in CSS
* {
property: value;
/* CSS properties go here */
}
The asterisk * selects all elements in the HTML document, and any CSS properties defined within the curly braces will be applied to every element.
How the Universal Selector Works
The universal selector * is a CSS selector, not an HTML element. It targets every single element in the DOM (Document Object Model), including headings, paragraphs, divs, spans, images, and even the html and body elements themselves.
This selector is commonly used for
-
CSS Reset Removing default browser margins and padding from all elements.
-
Global Styling Applying consistent typography, box-sizing, or other properties across the entire page.
-
Border Boxing Setting
box-sizing: border-boxfor all elements to make layout calculations easier.
CSS Reset Example
One of the most common uses of the universal selector is to reset default browser styles
<!DOCTYPE html>
<html>
<head>
<title>CSS Universal Selector - Reset</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f0f8ff;
padding: 20px;
}
h1 {
color: #2c3e50;
margin-bottom: 10px;
}
p {
color: #34495e;
line-height: 1.6;
}
</style>
</head>
<body>
<h1>Welcome to TutorialsPoint</h1>
<p>This page uses the universal selector to reset all default margins and padding.</p>
<p>All elements now start with consistent spacing that we control.</p>
</body>
</html>
The universal selector removes all default margins and padding, giving you complete control over element spacing
Welcome to TutorialsPoint This page uses the universal selector to reset all default margins and padding. All elements now start with consistent spacing that we control.
Global Styling Example
The universal selector can apply consistent styling across all elements
<!DOCTYPE html>
<html>
<head>
<title>Universal Selector - Global Styling</title>
<style>
* {
font-family: Arial, sans-serif;
text-align: center;
border: 1px solid #ddd;
padding: 10px;
margin: 5px;
}
</style>
</head>
<body style="background-color: #f9f9f9;">
<h2>TutorialsPoint</h2>
<p>HTML Tutorial</p>
<div>CSS Tutorial</div>
<span>JavaScript Tutorial</span>
</body>
</html>
Every element gets the same border, padding, margin, and text alignment
All elements are centered with borders and padding applied uniformly.
Performance Considerations
While the universal selector is powerful, it should be used thoughtfully
-
Performance Impact The universal selector targets every element, which can impact rendering performance on large pages.
-
Specificity The universal selector has very low specificity (0,0,0,0), so other selectors easily override it.
-
Best Practice Use it primarily for CSS resets and global properties like
box-sizing.
Example Practical CSS Reset
Here's a practical example showing a modern CSS reset approach
<!DOCTYPE html>
<html>
<head>
<title>Modern CSS Reset with Universal Selector</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
line-height: 1.6;
color: #333;
padding: 20px;
background-color: #ffffff;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
border: 2px solid #e0e0e0;
border-radius: 8px;
}
h1 {
color: #2980b9;
margin-bottom: 15px;
}
p {
margin-bottom: 15px;
}
</style>
</head>
<body>
<div class="container">
<h1>Clean Layout with Universal Reset</h1>
<p>The universal selector removed all default browser styling.</p>
<p>Now we have complete control over spacing and layout.</p>
<p>This approach ensures consistency across different browsers.</p>
</div>
</body>
</html>
This creates a clean, consistent layout with all default browser styles removed and custom spacing applied.
Common Use Cases
The universal selector is typically used for
| Use Case | CSS Properties | Purpose |
|---|---|---|
| CSS Reset | margin: 0; padding: 0; |
Remove default browser spacing |
| Border Box Model | box-sizing: border-box; |
Include padding and border in element width |
| Global Typography | font-family: Arial, sans-serif; |
Set consistent font across all elements |
| Debug Styling | border: 1px solid red; |
Visualize all elements during development |
Conclusion
The * symbol in CSS is the universal selector that targets all HTML elements in a document. It's most commonly used for CSS resets to remove default browser styling and establish consistent base styles. While powerful, it should be used judiciously due to its broad scope and potential performance impact on large pages.
725 Views
