Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to specify order of classes using CSS?
Cascading Style Sheets (CSS) is a powerful component of web development which enables the developers to determine the visual appearance of their websites. In CSS, classes are used as selectors which enables us to apply several specific styles to an element. You can also use multiple classes for a particular element.
However, when you apply multiple classes to an element, it is necessary to know how to specify the order of these classes in which they will be rendered to avoid discrepancies and unexpected results. In this article, we will discuss different methods to specify the order of classes in CSS and the importance of specificity and cascading rules which helps in determining the precedence.
What are Classes in CSS?
In CSS, a class is selector used to apply specific set of styles to HTML elements. They are powerful tools which enables us to group elements together and maintain uniformity across multiple elements on a webpage. It allows us to reuse CSS styles for many elements in case of large websites.
Using Multiple Classes for an Element
If you have defined set of classes in CSS, you can use combinations of them for a particular element in order to make it unique and attractive. However, you have to specify the order of the classes so that the compiler runs the code smoothly and provides the output according to your needs. This is done by cascading and specificity rules.
The order in which we define the classes in the CSS file is used to determine their precedence while applying multiple classes to an element. This is because CSS is cascading which means the compiler reads it from last to top and right to left. So, the one which is mentioned at the last in the CSS code gets the priority. Let’s understand this better with an example.
Example
Suppose you have defined two classes in a CSS file.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1"> Here, we have applied class1 to the div element. </div>
<div class="class2"> Here, we have applied class2 to the div element. </div>
<div class="class1 class2"> This is an example. Here, we will apply both classes to the div element. </div>
</body>
</html>
Since .class2 is declared after .class1 in the CSS code, class2 gets the precedence. Hence, when we apply both class1 and class2 to the div element, the div element is mostly styled according to the class2.
However, you can see that properties which are not mentioned in class2 but are there in class1, is applied to the div element. Like the text-align: center is mentioned in class1 but not in class2. But still, the last div element is centrally aligned. This is because the properties which are unique in class1 will be applied to the element as it is, however, for the properties which are same in both classes, the compiler uses the cascading rule for rendering them.
Order of the Classes
The order of classes written in HTML doesn’t determines the priority. Consider the following example
Example
Suppose that you have defined two classes similar to the above example. However, you have changed the order of classes in the HTML code. What do you think will be the result? Will it be different from the previous one? Let’s see.
<html>
<head>
<style>
.class1 {
margin: 10px;
padding: 1px;
text-align: center;
font-size: 18px;
color: red;
letter-spacing: 1px;
}
.class2 {
margin: 12px;
padding: 5px;
color: blue;
font-size: 20px;
font-family: Georgia;
letter-spacing: 1px;
}
h1 {
text-align: center;
}
</style>
</head>
<body>
<h1> CSS Classes </h1>
<div class="class1 class2"> This is an example. Here, we will apply first class1 and then class2 to the div element. </div>
<div class="class2 class1"> This is an example. Here, we will apply first class2 and then class1 to the div element. </div>
</body>
</html>
As you can see there is no change in the result. The styles will be applied only according to the order of classes which is mentioned in the CSS.
Use of the !Important Rule in CSS
In CSS, the !important rule enables the developers to override the cascading order of styles and ensures that the desired specific styles gets the highest priority.
Syntax
selector{
property: value !important;
}
If you use the !important keyword beside CSS property, then the compiler will ensure that it is applied to that element regardless of any specificity order of the styles. Let’s see an example.
Input
Original Linked List: 1 -> 2 -> 3 -> 4 -> 5 -> null
Example
In the following example, since b precedes a, so, the styles are applied according to b for the last div element. However, the color of the text is applied as written in class “a” which means the text is red in color. This is because we have used !important keyword for the color property in class “a”.
<html>
<head>
<style>
* {
margin: 10px;
padding: 2px;
}
.a {
color: red !important;
letter-spacing: 1px;
text-shadow: 2px 2px 2px grey;
font-size: 16px;
font-family: Calibri;
}
.b {
color: blue;
letter-spacing: 1px;
font-size: 20px;
font-family: Georgia;
}
</style>
</head>
<body>
<h1> !Important Rule </h1>
<div class="a"> Here, we have applied only class "a" to the div element. </div>
<div class="b"> Here, we have applied only class "b" to the div element. </div>
<div class="a b"> Here, we have applied both the classes to the div element. </div>
</body>
</html>
Conclusion
In this article, we have discussed the cascading and specificity rule used for specifying the order of the classes in CSS while applying multiple classes to a particular element. We have also discussed !important rule which is used to override any specificity order.
280 Views
