css image

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

css output text with red color

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;
}
css output text with green color

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

css output text with orange color

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

https://mdpuneethreddy.com

You can checkout fun projects here.

If you have any suggestions to improve from myside, please write down in comment section.

About the author

puneethrdy

View all posts