In this chapter, you will learn how CSS selects HTML elements to apply styles. CSS provides different types of selectors, and each one is used in a different way. Let’s understand the most common CSS selectors one by one.
What is a CSS Selector?
A CSS selector is used to select an HTML element that you want to style.
For example:
p {
color: blue;
}
Here, p is the selector. It selects all <p> elements and changes their text color to blue.
1. Element Selector
An element selector selects HTML elements based on their tag name.
For example:
h1 {
color: blue;
}
This CSS selects all <h1> elements.
Example
<!DOCTYPE html>
<html>
<head>
<title>Element Selector</title>
<style>
h1 {
color: blue;
}
p {
color: green;
}
</style>
</head>
<body>
<h1>Welcome to CSS</h1>
<p>This paragraph is green.</p>
<p>This paragraph is also green.</p>
</body>
</html>
Result
- All
<h1>elements will be blue. - All
<p>elements will be green.
2. ID Selector
An ID selector selects one specific HTML element using its id attribute. In CSS, an ID selector starts with a hash (#) symbol.
Example
<h1 id="heading">Learning CSS</h1>
#heading {
color: red;
}
The id value in HTML and the selector in CSS should match.
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>ID Selector</title>
<style>
#heading {
color: red;
}
</style>
</head>
<body>
<h1 id="heading">Learning CSS</h1>
</body>
</html>
The heading will appear in red.
An
idshould be unique on a page. This means you should not use the sameidfor multiple elements.
3. Class Selector
A class selector selects HTML elements using their class attribute. In CSS, a class selector starts with a dot (.).
Example
<p class="text">Learning CSS is easy.</p>
.text {
color: purple;
}
Complete Example
<!DOCTYPE html>
<html>
<head>
<title>Class Selector</title>
<style>
.text {
color: purple;
}
</style>
</head>
<body>
<p class="text">Learning CSS is easy.</p>
</body>
</html>
One class can also be used on multiple elements.
<h2 class="blue-text">Heading</h2>
<p class="blue-text">Paragraph</p>
.blue-text {
color: blue;
}
Both elements will appear in blue.
4. Universal Selector
The universal selector selects all HTML elements on the page. It uses an asterisk (*).
Example
<!DOCTYPE html>
<html>
<head>
<title>Universal Selector</title>
<style>
* {
color: blue;
}
</style>
</head>
<body>
<h1>CSS Selectors</h1>
<p>This is a paragraph.</p>
<h2>Learning CSS</h2>
</body>
</html>
The universal selector applies the color blue to all the elements on the page.
Quick Recap
- Selectors in CSS is used to select HTML elements.
- An element selector selects elements by their tag name.
- An ID selector uses
#. - A class selector uses
.. - A universal selector uses
*.
Mini Quiz
Mini Project
Mini Project: My Skills Profile
Question:
Create a simple skills profile webpage with headings and paragraphs, then use different CSS selectors to style specific elements.
Requirements
- Add a main heading with the text “My Skills Profile”.
- Add a paragraph introducing your skills.
- Use an element selector to change all paragraph text to green.
- Add a heading with the text “Web Development” and give it an
id. - Use an ID selector to change the Web Development heading to red.
- Add two elements with the same
classand use a class selector to change their text color to purple. - Use the universal selector to change the text color of all elements to blue.
View Answer Code
<!DOCTYPE html>
<html>
<head>
<title>My Skills Profile</title>
<style>
* {
color: blue;
}
p {
color: green;
}
#web-development {
color: red;
}
.skill {
color: purple;
}
</style>
</head>
<body>
<h1>My Skills Profile</h1>
<p>I am learning different skills to build my career in technology.</p>
<h2 id="web-development">Web Development</h2>
<p class="skill">HTML</p>
<p class="skill">CSS</p>
</body>
</html>
Frequently Asked Questions (FAQs)
Q1. What is CSS selectors?
A CSS selector is used to select HTML elements that you want to style using CSS.
Q2. What are the common types of CSS selectors?
Some of the most common CSS selectors are the element selector, ID selector, class selector, and universal selector.
Q3. What is an element selector in CSS?
An element selector selects HTML elements based on their tag name. It is useful when you want to apply the same style to all elements of a specific type.
Q4. What is an ID selector in CSS?
An ID selector selects one specific HTML element using its unique ID attribute. In CSS, an ID selector starts with a hash symbol.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
