Table of contents
In modern era nobody like the website having on HTML! I ask to you, why do you like your favourite ? Well, most of the developers answer same, because of it’s user interface. You like you favourite website’s animations, it’s color and theme. Do you ever think how i can make my website beautiful like this? Well, you think about this, that’s why you are here. So, CSS is the language that is used to beautify the website . It provide Visual Aesthetics to the website. So, let’s start our journey of learning the CSS and Specificity Algorithm.
What is CSS ?
CSS stand for Cascading style sheets, is a coding language that is used provide Visual Aesthetics( style ) to the webpage. Basically, it is a stylesheet language that is used to add layout and visual effects to HTML elements of website.
Cascading :- In CSS the meaning of the “Cascading” is overriding the existing/earlier styles with the new style. In other words, cascading describe that how CSS rules are applied on the existing styles of the element.
Style-Sheets :- In CSS, the “style sheet” refers to set of rules that describe how the HTML elements are appeared visually on webpage by controlling elements like color, font size etc.
User Agent Style-Sheets 🤠
When you don’t write your own CSS, the browser ( User Agent ) uses it’s own CSS known as User Agent stylesheet. This is CSS is further Cascaded( override ) by the our own CSS. By this, we can say that CSS not change anything in the code it put layers on new style on existing style.
Types of CSS
There mainly three types of CSS which are Inline CSS, Internal CSS & External CSS. By using them we can put CSS in our HTML document.
1. Inline CSS
By inline CSS means, writing the CSS directly in the HTML element using the <style> attribute. It only apply CSS on that particular element in which we write CSS.
As you can see in above picture we change the color and font size of paragraph using the style attribute. This is called inline CSS.
2. Internal CSS
By internal CSS means, writing the CSS within the <head> section of the html document inside the <style> tag. We can change the group of elements at once by using the internal CSS.
As, you can see in above code we changed the font size and background color for h1 elements in html document.
3. External CSS
By external CSS means, we write the CSS in an another document and then link it with our HTML document using the <link> tag.
As you can see above we apply CSS on all the buttons available in the html document.
Selector in CSS
A CSS selector is the first part of a CSS Rule. It is a pattern of elements and other terms that tell the browser which HTML elements should be selected to have the CSS property values inside the rule applied to them.
The element or elements which are selected by the selector are referred to as the subject of the selector. Basically, selectors are used to target the HTML elements on our web pages that we want to style.
Types of selectors
Class Selectors :- The case-sensitive class selector starts with a dot (
.) character. The class selector selects the HTML element with a specific class attribute and change everything inside the element.
ID selectors :- The case-sensitive ID selector begins with a
#rather than a dot character, but is used in the same way as a class selector. The difference is that an ID should be unique for each HTML element
As you can see in above code the button only with id button1 is changed to color red.
Selectors lists :- If you have more than one thing which uses the same CSS then the individual selectors can be combined into a selector list so that the rule is applied to all of the individual selectors.
For example, if I have the same CSS for all buttons then you can directly apply CSS by suing the name of the element.
Universal Selector :- The universal selector is indicated by an asterisk (
*). It selects everything in the document.
So, this is all about the CSS. Now , let’s understand the CSS specificity Algorithm. Before stating the specificity topic remember one thing “THE CSS CODE IS READED FROM TOP TO BOTTOM”
What is Specificity ?
In CSS, specificity refers to as an algorithm that determines which CSS style rule should be applied on the HTML element when multiple style rules are present for the same element.
It basically, measure the “weight” or importance of the selector based upon it’s type. The highest specificity selector will overrides the lower specificity selector.
How Specificity is calculated ? (Specificity Algorithm)
The specificity is calculated by determining weight of selectors of each weight category.
The specificity algorithm is basically a four column value of four categories - inline styles, ID, classes and elements, represented as (0, 0, 0, 0). Each column corresponds to a selector and the values are summed up top determine the which CSS rule has higher specificity.
The below is the list of each selector with it’s weight in order of decreasing specificity.
Inline styles :- inline styles applied directly to an HTML element via the
<style>attribute add 1-0-0-0 to weight value.ID Selector:- each ID selector adds 0-1-0-0 to the weight value.
Class Selector:- Each class selector (
.class), attribute selector ([type="text"]), and pseudo-class (:hover,:nth-child()) adds 0-0-1-0 to the weight value.Element selector :- Each element selector such as
<p>,<h1>to<h6>,<div>etc. adds 0-0-0-1 to the weight value.
Steps to determine the specificity
First, write the specificity values of all the selector present in the CSS document.
Then, start comparing the values(0-0-0-0) from left to right .
The CSS rule with the highest value in the leftmost column will have the highest specificity.
If all the value are equal then, we know that the CSS read from top to bottom. So, the rule that appear last will have the highest specificity.
Example :- In the below code we declare a paragraph with attributes, id=”highlight” and a class=”important”. And, then we change the color of paragraph in CSS using all three selectors. The color of selector having highest specificity will be displayed.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p{
color: black;
}
.impotant{
color: green;
}
#highlight{
color: blue;
}
</style>
</head>
<body>
<p id="highlight" class="important">Hello World</p>
</body>
</html>
In above code, the first is element selector having specificity (0-0-0-1) then, we have the class selector with having specificity (0-0-1-0) and then, we have the id selector with specificity (0-1-0-0). When we compared the values we saw that from second place the ID selector have value 1 which is higher than rest of two. So, in above code id selector has the highest specificity containing color blue. So, the blue color is applied to the paragraph.
So, this is how the specificity algorithm works and determine which CSS rule will be applied if there are more than style rules are present for single element.
Exception (
!importantCSS rule)
There is an !important rule in CSS which gives extra priority to the elements. In fact, if there are multiple rules are present for single element and one of the rule is !important then, it will directly overwrite all other rules even without calculating the highest specificity.
This is the only rule which have highest specificity than the inline element and can override the inline element.
Syntax :-
selector {
property: value !important;
}
Avoid using the !important unless absolute necessary.
While !important can be helpful, it should be used very less because:
It makes debugging difficult by overriding normal specificity rules.
It can create conflicts in larger codebases.
It reduces the maintainability of your CSS.
Use Cases:
To temporarily override styles during debugging.
To apply critical styles that must not be overridden.
To fix third-party library styles without modifying the library directly.
Conclusion
So, CSS is a very important part in the creation of beautiful websites as it provides the user interface to the website and CSS Specification algorithm helps to get the highest specificity of the rule if there are more than one rule present for same HTML element. So, that it this is all about the CSS. I hope this article helps you understand the CSS and Specificity algorithm. If so, then please like the article. Thank you!