CSS Specificity: Selectors with examples
In this blog we will see how the css properties overrides one another with the hierarchy . Here we will see different types of Selectors and examples, next we will see which has higher hierarchy over one another.
SetUp:
first create a html file and styles file,
sample.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>My website</title>
</head>
<body>
<h1>Hello world</h1>
</body>
</html>we will create blank styles.css an link with html
The linking between html and css made by link tag and href is the file location of styles.css
Types of Selectors:
1) Element Selector
Element selector is basically selection based on tag name examples h1,p,h1…..
So, in the above html file you can see h1 tag, we will see how we can write css styles by element selector and with example
h1{
color:black
}In above code h1 is the tag and we changed the color property of h1 tag to black
when you run the code the code will be black
2) Class Selector
Class selector is selection based on class name, the prefix of the class is “.”. Below is the example code which is added to existing css file
styles.css
.title{
color:red
}sample.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>My website</title>
</head>
<body>
<h1 class="title">Hello world</h1>
</body>
</html>Now you can see the class named title is added to html h1 tag and see the output
You might observe here the class properties override the tag named css properties, as for h1 tag we gave color as black and for the same h1 tag we gave class selector and the color is red it overrides
3) Id Selector
Id selector is selection based on id name, the prefix of the class is “#”. Below is the example code which is added to existing css file.
styles.css
#title-color{
color: green;
}sample.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>My website</title>
</head>
<body>
<h1 class="title" id="title-color">Hello world</h1>
</body>
</html>We have added the id to the exiting html along with other selector and run the file.
styles.css
h1{
color:black
}
.title{
color:red
}
#title-color{
color: green;
}
You can see the h1 tag is text color is changed to green and the Id overide the class selector.
These are the three types of selectors and the hierarchy of the css properties apply to the html file is as follows
Id>Class>Element
We will see Other type of method to override all the above selector styles which is Inline styles
Inline styles:
Add inline style to h1 tag and have color property as orange
sample.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="./styles.css">
<title>My website</title>
</head>
<body>
<h1 class="title" id="title-color" style="color:orange">Hello world</h1>
</body>
</html>the output will change the color to Orange and it will override all the other selectors
Conclusion:
In this article, we have seen different types of selectors and with examples, next we see how each one override properties of another selectors and we saw the Inline styles how it overrides all the selectors with examples and the complete code.
If you like this Article please share with your friends and please checkout out other technology articles and projects in
If you have any suggestions to improve from myside, please write down in comment section.
