Let’s start with a question, what is CSS? I know, everyone knows. The answer is Cascading Style Sheets. Let ask another one, What is Cascading? That is trouble. Most of the people will miss it,I don’t know too. Let google it. The answer is `(of water) pour downwards rapidly and in large quantities.` But in CSS, Cascading is Process of combining different stylesheets and resolving conflicts between CSS rules and declarations, when more than one rule applies to a certain element. So, Cascading is works like that combining different stylesheets types and printed out to CSSOM How many Different Stylesheets in CSS? User Stylesheet Owner of browser, he/she can redesign layout and color design and fonts with his stylesheet. That changes will be called User stylesheet changes and it will override both web page CSS and default browser stylesheet. Here is , you can try it yourself to change . And here is . the Stylus tool GitHub dark theme the Wikipedia Dark theme Author Stylesheet Author stylesheet is an original sheet from the web page that you request via the internet. Browser ( User Agent) Firefox and chrome and other web browsers are set their own rules on the web page when user browse. When you don’t want to default CSS style from Browser you need to use reset CSS. The goal of a reset CSS is to reduce browser inconsistencies in things like default line heights, margins and font sizes of heading, and so on. If you want to use it, then feel free to use the following reset.css stylesheet. Here is more information about : Basic and Samples Browser Agent Style sheets What is CSS Rules and declarations? What happens to CSS when we load up a webpage? It organizes files and resolve conflicting using-declaration rule while multi CSS stylesheets were loaded. There is 3 rule in declaration rule; Source Order and Specificity and Importance. Following is the whole picture of How a web page loads? Importance Importance means using key in css. The property in CSS is used to provide more weight (importance) than normal property. !important !important the !important means that “this is important”, ignore all the subsequent rules, and apply !important rule and the !important keyword must be placed at the end of the line, immediately before the semicolon. let deep drive into that. The following are ordered from High to Low. User Sheet !important declarations Author Sheet !important declarations Author Sheet declarations User Sheet declarations Default browser declarations Eg of declarations; !important logout < > nav < = > a class “button” </ > a </ > nav { : red;
} { : blue ;
} nav .button background-color .button background-color !important will turn over their order procedure, So tag element’s background color is blue now. We also need to consider about declaration. !important a !important Specificity Specificity is one type of ordering CSS using their inline style and IDs and class and element. Inline styles IDs Classes, pseudo-classes, attribute Elements, pseudo-elements Above that order Inline styles come first, We all know inline style is top at order. After that IDs and class and its pseudo-classes and attributes and elements will come later accordingly. e.g; logout < > nav < = = > a id "logout" class "button" </ > a </ > nav { : black;  
} { : green;  
} { : red;  
} a background-color .button background-color #logout background-color For that example button's background will be because of ID is top of the order. If we remove ID from CSS class, button's background will be . It's order was moved to Class. logout red logout green What about I will change change following like that ... { : black ;
}
... a background-color !important will take over their Specificity procedure, So tag element’s background color is black now. !important a Source Order The last one of Ordering Rules is Source Order.We will discuss the following example; { : green;
} #first .css a background-color { : red;
} #second .css a background-color I will import first.css and second.css style sheet in index.html. Click Links < = = = > link rel “stylesheet” type “text/css” href “first.css” < = = = > link rel “stylesheet” type “text/css” href “second.css” < = > a class “button” </ > a What is the background color of that ` ` tag element? a Red? Or Green? Answer is red, because of the CSS source ordering that CSS stylesheet was override by CSS stylesheet. That is why we should care about when we add css stylesheet in HTML.  We should follow the ordering rule when import the css file in HTML. first.css second.css #your browser reset css come first #import css lib like bootstrap/minial come later #your own css stylesheet should be last < = = = > link rel “stylesheet” type “text/css” href “reset.css” < = = = > link rel “stylesheet” type “text/css” href “lib.css” < = = = > link rel “stylesheet” type “text/css” href “author.css” So, I hope your will understand about these 3 Rule of Order Declarations at CSS. Here is the flow of rules. Summary CSS declarations marked with !important have highest priority; But, only use !important as a last resource. It’s better to use correct specificities - more maintainable code! Inline styles will always have priority over styles in external stylesheets. IDs and Classes and Elements will come accordingly to their order. The universal select * has no specificity value Rely more on specificity than on the order of selectors Now, I will be concluded in my article here. When I was developing my website without using bootstrap, Create Multiple CSS files make me facing a lot of issues like Source Ordering and use many !important declaration in CSS.  I hope your guys can get some ideas and surely be passed through similar mistakes. keep moving forwards

What Are We Missing at Learning CSS

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

10 CSS Tips To Make Your Site Faster

12 Websites to Take Your CSS Skills From Beginner to Pro

An Introduction to CSS Variables

Avoid Headaches by Understanding CSS Specificity

CSS Block Element Modifier

Flexbox VS Grid: This is Why You Should Be Using Both

10 CSS Tips To Make Your Site Faster

12 Websites to Take Your CSS Skills From Beginner to Pro

An Introduction to CSS Variables

Avoid Headaches by Understanding CSS Specificity

CSS Block Element Modifier

Flexbox VS Grid: This is Why You Should Be Using Both

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps