The CSS Universal Selector
The universal selector (*) selects all HTML elements on the page.
Example
This rule affects every element on the page.
Prompt
A web page using the CSS universal selector (*) in a
<style> block.
Use * to make every element on the page center-aligned with blue text. Include a heading and a couple of paragraphs.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Universal Selector</title>
<style>
* {
text-align: center;
color: blue;
}
</style>
</head>
<body>
<h1>Hello world!</h1>
<p>Every element on this page is affected by the universal selector.</p>
<p>So is this one.</p>
</body>
</html>
The CSS Grouping Selector
The grouping selector selects all the HTML elements that share the same style.
When several selectors have the same declarations, grouping them keeps the code shorter.
To group selectors, separate each one with a comma.
Example
Here h1, h2, and p are grouped into one rule.
Prompt
A web page using a grouped CSS selector in a
<style> block.
Group h1, h2, and p into a single rule (h1, h2, p) that makes them center-aligned with red text. Include one of each element so the shared style is visible.
Output: complete HTML page
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Grouping Selector</title>
<style>
h1, h2, p {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<h2>Smaller heading</h2>
<p>This is a paragraph. All three elements share the same style.</p>
</body>
</html>
Before grouping
The same style written out separately for h1, h2, and p. Grouping them removes this repetition.
styles.css
h1 {
text-align: center;
color: red;
}
h2 {
text-align: center;
color: red;
}
p {
text-align: center;
color: red;
}
All CSS Simple Selectors
A quick summary of the simple selectors:
#id— for example#firstnameselects the element withid="firstname"..class— for example.introselects all elements with the classintro.*— selects all elements.element— for examplepselects all<p>elements.element,element,..— for examplediv, pselects all<div>elements and all<p>elements.