Back to: CSS Tutorials for Beginners and Professionals
Conflicting Styles in CSS with Examples
In this article, I am going to discuss Conflicting Styles in CSS with Examples. Please read our previous article where we discussed CSS Selectors with Examples.
Conflicting CSS Styles:
CSS stands for cascading style sheets and cascading simply means multiple styles can be applied or multiple rules can be applied to the same element. Now, these rules may lead to conflicts. Let’s take an example and understand what this conflict means:
Page1.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>uHost</title>
<link rel="stylesheet" href="page1.css">
</head>
<body>
<main>
<section>
<h1>H1 style conflicts </h1>
</section>
</main>
</body>
</html>
Page1.css
h1{
color:blue;
background-color: red;
}
h1{
color: red;
background-color: yellow;
}
You can clearly see from the above example code there are two styles set for h1. What do you think which style would be applied to h1 in the final output? And why??
Output
So, from the above output, the second h1 style gets applied to the h1 tag. Because it overwrites the first h1 style (color:blue, background-color:red) as it comes second in the file and the file is parsed top to bottom. Let’s take another example of a conflict:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS Course</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<link rel="stylesheet" href="code.css">
</head>
<body>
<main>
<h1 class="h1-design">H1 Design Conflict</h1>
</main>
</body>
</html>
Code.css
h1{
color: red;
}
.h1-design{
color: blue;
}
Code Explanation:
In the above index.html page, we have one h1 tag which has assigned a class named h1-design. In the code.css file, both h1 and h1-design denote the same h1 tag. Now in this case which color (blue or red) will be set to h1 and why?
Output
You must argue that the h1-design class style comes later in the file so that’s why it has overwritten the previous style and the color blue has been applied to the h1 tag. Let’s find out and switch the order of the code.css file as shown below.
.h1-design{
color: blue;
}
h1{
color: red;
}
Output
Again, the same output why?
So, there must be something else going on here other than the order of style. Two things are going on here, multiple rules seem to affect the same element and additionally, the different rules here seem to have different priorities because otherwise, how would we explain that this h1-design class overwrites the color, even though it comes before we set up the other rules?
Now to resolve such conflicts, CSS knows a concept called specificity and there are clear rules included in the CSS specification that define how such conflict should be resolved and which type of selector has a higher specificity.
Overview:
Cascading means multiple rules are applied to the same element. Specificity resolves conflicts arising from that fact and specificity then simply has the following order, the tag selector and pseudo-elements selectors have the lowest priority and the lowest specificity.
- The universal selector has the lowest priority, but we rarely use that.
- Then a higher specificity is assigned to a class and pseudo-class as well as attribute selectors. So, these three are on the same level and if we then have two conflicts here, simply the latter one in the same file wins.
- A higher specificity is assigned to ID selectors, so if an element has a tag, a class, and an ID selector and they all set the color of that element, the ID selector would win no matter where it is positioned in the CSS file.
- The highest priority however is assigned to inline styles. It will overwrite all other styles; they have the highest specificity.
In the next article, I am going to discuss CSS Combinators with Examples. Here, in this article, I try to explain Conflicting Styles in CSS with Examples. I hope this Conflicting Styles in CSS with Examples article will help you with your need. I would like to have your feedback. Please post your feedback, question, or comments about this article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
Registration Open For New Online Training
Enhance Your Professional Journey with Our Upcoming Live Session. For complete information on Registration, Course Details, Syllabus, and to get the Zoom Credentials to attend the free live Demo Sessions, please click on the below links.