CSS Tutorial
Introduction
CSS Properties
CSS Designing
CSS Advance Topics
CSS FAQs
CSS Selectors
What are CSS Selectors?
CSS selectors are used to select specific HTML elements and apply styles to them. Instead of styling every element manually, selectors allow us to target elements efficiently using tag names, classes, IDs, or more.
Types of CSS Selectors
There are five major types of selectors you should know:
- Universal Selector
- Element Selector
- ID Selector
- Class Selector
- Group Selector
Let’s explore each one with examples.
Universal Selector
What it does:
Applies the given styles to all HTML elements on the page.
Syntax
* {
property: value;
}
Example
<html>
<head>
<style>
* {
color: purple;
text-align: center;
}
</style>
</head>
<body>
<p>Welcome to </p>
<h1>Learn With Arshyan </h1>
</body>
</html>
Result:
Both <p> and <h1> will be purple and centered – regardless of tag.
Element Selector
What it does:
Targets all elements of a specific tag name like p, h1, div, etc.
Syntax
p {
property: value;
}
Example:
<html>
<head>
<title>CSS</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Welcome to Learn With Arshyan</h1>
<h2>we offer: </h2>
<p>HTML – Tutorial </p>
<p>CSS – Tutorial </p>
</body>
</html>
Result:
All <p> tags will be underlined.
Note: Be cautions – if a tag is used many times, styles may apply more broadly than expected.
ID Selector
What it does:
Target a single unique element by its id.
Syntax:
#idName {
property: value;
}
Example:
<html>
<head>
<style>
#title {
text-align: center;
color: purple;
}
</style>
</head>
<body>
<h1 id="title"> Learn With Arshyan /<h1>
<p>I'm a Developer and the founder of learnwitharshyan.com</p>
</body>
</html>
Result:
Only the element with id= “title” is affected.
Tip: Use ID selectors when styling a single, unique element.
Class Selector
What it does:
Targets one or more elements with a shared class time.
Syntax:
.className {
property: value;
}
Example:
<html>
<head>
<title>CSS</title>
<style>
.purple {
color: purple;
}
</style>
</head>
<body>
<p>This is simple p tag</p>
<p class="purple">This p tag has class purple</p>
<p>This is simple p tag</p>
<p class="purple">This p tag has class purple</p>
</body>
</html>
Result:
Only elements with class = “purple” are affected.
Tip: Use class selectors when multiple elements need the same style.
Group Selector
What it does:
Targets multiple selectors at once to apply the same styles. Saves time and keeps code clean.
Syntax:
h1, p, a {
property: value;
}
Example:
<html>
<head>
<title>CSS</title>
<style>
h1 {
color: purple;
}
p, a {
color: black;
}
</style>
</head>
<body>
<h1>Learn With Arshyan</h1>
<p>This is the p tag</p>
<a href="#">This is the anchor (a) tag</a>
</body>
</html>
Result:
<h1>will be purple.- Both
<p>and<a>will be black.
Summary Table
Selector Type | Symbol | Use Case |
Universal |
| Apply style to every element |
Element (Tag) |
| Style all specific tag elements |
ID Selector |
| Style one unique element by ID |
Class Selector |
| Style multiple elements with a class |
Group Selector |
| Combine multiple selectors in one rule |