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.
- 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>