In this tutorial, we will learn about the CSS selector. CSS Selectors are use to select and style HTML elements. There are various ways to select and style HTML elements you can select HTML elements with the tag name. For example, you want to style H1 tag in your web page when you with style (like you change the text colour to RED) it using tag name all the h1 elements in your web page will automatically adapt that style. Furthermore, there are various other ways to select HTML elements with we will discuss in this tutorial. Ways to select HTML elements.
Page Contents
- Based on Tag Name
- Based on Class
- Based on ID
- Universal Selector
Based on Tag Name:
This type of selector work on similar kind of elements. For example, if you change the colour of h4 element using this selector it will change the colour of all h4 elements in a web page(in case of internal CSS). check this example below.
<html>
<head>
<style>
h4{
color:red
}
</style>
</head>
<body>
<h4>This is H4 Tag</h4>
<h4>This is H4 Tag</h4>
<h4>This is H4 Tag</h4>
</body>
</html>
Based on Class:
To use class selector we use a special class attribute with HTML elements. With the help of class selector, we can select a specific HTML element at a single time. For example, you have a total of five h3 elements on the web page you want to change the colour of first and last h3 element we can do this with the help of class selector. To mention the class selector we write. followed by class name in CSS. Check this example.
<html>
<head>
<style>
.heading{
color:red
}
</style>
</head>
<body>
<h4 class="heading">This is H4 Tag</h4>
<h4>This is H4 Tag</h4>
<h4 class="heading">This is H4 Tag</h4>
</body>
</html>
Based on ID:
To use id selector we use id attribute with HTML element. Id selector is used for a specific element in the web page. To mention id selector we write # followed by id name in CSS. Check the following example.
<html>
<head>
<style>
#mainHeading{
color:red
font-size:28px;
}
</style>
</head>
<body>
<h4 id=" #mainHeading">This is H4 Tag</h4>
<h4>This is H4 Tag</h4>
<h4>This is H4 Tag</h4>
</body>
</html>
Universal Selector:
This universal selector affects every element of the web page. To mention universal selector we write * in CSS file. Check this Example.
<html>
<head>
<style>
*{
color:red
font-size:15px;
}
</style>
</head>
<body>
<h4>This is H4 Tag</h4>
<h5>This is H4 Tag</h5>
<h6>This is H4 Tag</h6>
</body>
</html>
Parvesh Sandila is a results-driven tech professional with 8+ years of experience in web and mobile development, leadership, and emerging technologies.
After completing his Master’s in Computer Applications (MCA), he began his journey as a programming mentor, guiding 100+ students and helping them build strong foundations in coding. In 2019, he founded Owlbuddy.com, a platform dedicated to providing free, high-quality programming tutorials for aspiring developers.
He then transitioned into a full-time programmer, where his hands-on expertise and problem-solving skills led him to grow into a Team Lead and Technical Project Manager, successfully delivering scalable web and mobile solutions. Today, he works with advanced technologies such as AI systems, RAG architectures, and modern digital solutions, while also collaborating through a strategic partnership with Technobae (UK) to build next-generation products.