Many developers are aware of the concept of class overwriting in CSS. Well, is true but when it comes to how these classes are overwritten, most of them get confused. Classes are among the important assets of front-end development. Therefore, it is very important to have clarity about them. The attributes of style that are required to be included in the HTML elements are defined within the classes and then could be invoked using the “style” attribute within the tag. The style attribute supports as many values(classes) that you provide, and the confusion starts from here!
Whether you talk about defining classes in the same file within the block or invoking classes from the different CSS files. This rule remains consistent.
“The order of the classes in which they would work does not depend upon the order, in which they are written in the class attribute. Rather, it is decided by the order in which they appear in the block or the .css file”
In case multiple classes consist of similar attributes and they are used in the same HTML element. Then, the class modified the latest would be used to style the element.
Below example illustrates the concept of order of classes:
Example
<!DOCTYPE html><html>
<head>
<title>Specify the order of classes in CSS</title>
<style type="text/css">
h1 {
color: green;
}
.container {
width: 600px;
padding: 5px;
border: 2px solid black;
}
.box1 {
width: 300px;
height: 50px;
background-color: purple;
}
.box2 {
width: 595px;
height: 50px;
background-color: yellow;
}
</style>
</head>
<body>
<h1>Geeksforgeeks</h1>
<b>A Computer Science Portal for Geeks</b>
<br>
<br>
<div class="container">
<div>
<input type="text" class="box1" value=
"How is it going everyone, this is box number 1">
</div>
<div>
<input type="text" class="box2" value=
"This is box number 2">
</div>
<div>
<input type="text" class="box1 box2" value=
"Here we are trying to combine box1 and box2, let us name it box3">
</div>
<div>
<input type="text" class="box2 box1" value=
"This is similar to box number 3, only difference is precedence of classes, let us name it box4">
</div>
</div>
</body>
</html>
|
Output:
- Now if you notice div1 and div2 representing classes box1 and box2 respectively would give you the result as expected.
- However, in the case of div3 with the style attribute as box1 box2, it invokes multiple CSS classes. Now one might easily confuse that since box1 is written first in the style attribute of div3 and therefore is called prior and then as soon as box2 is invoked it should overwrite box1. But that is not the case. If you look carefully in styling.css file, box1{} is defined prior to box2{} and that is why box1 is overwritten by box2. In case of div4, when we are calling box2 prior to box1. This same mechanism works and provides the style of box2 in the div4 block.
Note: Remember the inline CSS always have more priority than the external and internal CSS. Therefore if you use inline styling in the HTML elements, then the properties defined in the inline styling would overwrite predefined classes. YOu can ignore all these things if you are aware of !important keyword.