CSS Selectors
CSS selectors allow us to choose specific elements and apply styles to them. They help in targeting particular HTML elements for custom styling.
What are CSS Selectors
There, We can make use of CSS selector. CSS selectors allow us to choose specific elements and apply styles to them. Suppose we want to add a custom style to only a specific tag(s). We can use CSS selectors to do that.
Types of CSS Selectors
There are different types of CSS selectors, which are as follows:
1. Universal Selector
Universal selector represented by * targets all the HTML elements on the page.
The syntax of Universal Selector is as follows:
* {
property: value;
}Example of Universal Selector
Consider the code snippet:
<html>
<head>
<style>
* {
color: skyblue;
text-align: center;
padding: 24px;
}
</style>
</head>
<body>
<p>Welcome to</p>
<h1>CoderrShyam</h1>
</body>
</html>Output of Universal Selector
Welcome to
CoderrShyam
Notice, Irrespective of the tag, the style will be applied to all the elements and tags.
2. Element Selector
The element selector selects the target element based on the specific type. Suppose you want to underline all the <p> tags; in this case, the element selector will be the best choice.
The syntax of Element Selector is as follows:
p {
property: value;
}A selector can be any HTML tag. Here, we have considered the <p> tag.
Example of Element Selector
Consider the code snippet:
<html>
<head>
<title>CSS</title>
<style>
p {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<h2>we offer:</h2>
<p>HTML Tutorials</p>
<p>CSS Tutorials</p>
<p>JavaScript Tutorials</p>
</body>
</html>Output of Element Selector
CoderrShyam
we offer:
HTML Tutorials
CSS Tutorials
JavaScript Tutorials
Notice, The style will be applied to all the <p> tags.
3. ID Selector
The ID selector selects the target element based on the specific ID. The ID selector is represented by #.
The syntax of ID Selector is as follows:
#id {
property: value;
}Example of ID Selector
Consider the code snippet:
<html>
<head>
<style>
#title {
text-align: center;
color: red;
}
</style>
</head>
<body>
<h1 id="title">CoderrShyam</h1>
<p>I'm a Developer and the founder of Coderrshyam.vercel.app</p>
</body>
</html>Note: Element selector is not recommended as the same tag can be used multiple times in the document. So, overlapping rules can occur in the stylesheet.
In the style block, the selector #title, will only target the HTML element having an ID of title.
Consider the output of the above code:
Output of ID Selector
CoderrShyam
I'm a Developer and the founder of Coderrshyam.vercel.app
Notice, how the property color: red is only applied to <h1> tag.
4. Class Selector
The class selector does the same job as the id selector, a class selector helps group various types of elements. Suppose, we want to give a custom style to a specific group of elements. In this case, the class selector is the best option.
It is written with the period . character followed by the class name in the style sheet.
The syntax of Class Selector is as follows:
.class {
property: value;
}Example of Class Selector
Consider the code snippet:
<html>
<head>
<title>CSS</title>
<style>
.red {
color: red;
}
</style>
</head>
<body>
<p>This is simple p tag</p>
<p class="red">This p tag has class red</p>
<p>This is simple p tag</p>
<p class="red">This p tag has class red</p>
</body>
</html>In the above code snippet, the color:red will only be applied to the element having class red.
Output of Class Selector
This is simple p tag
This p tag has class red
This is simple p tag
This p tag has class red
Note: The class selector helps in grouping two or more elements.
5. Attribute Selector
The group selector is used to minimise the code. Commas , are used to separate each selector in a grouping. This reduces the number of lines of code. The code also looks clean.
The syntax of Group Selector is as follows:
div,
p,
a {
property: value;
}Example of Group Selector
Consider the code snippet:
<html>
<head>
<title>CSS</title>
<style>
h1 {
color: red;
}
p,
a {
color: purple;
}
</style>
</head>
<body>
<h1>CoderrShyam</h1>
<p>This is the p tag</p>
<a href="#">This is the anchor (a) tag</a>
</body>
</html>In the above code snippet, the color: purple will be applied to both <p> and <a> tags.
Output of Group Selector
Conclusion
- Universal Selector (*): Target the entire page.
- Element Selector: Target a specific element.
- ID Selector (#): Target element with a specific ID.
- Class Selector (.): Target element(s) with the same class.
- Group Selector: Group elements and target them.
How is this guide?
February 26th, 2026
Ways to add CSS
There are three ways to add CSS in HTML.
CSS Specificity
CSS Specificity helps determine what style will be applied to the HTML element(s) when there are overlapping or multiple CSS rules.
© 2026CoderrShyamAll Rights Reserved.