Hello learners!
Nobody loves those old & boring websites. Gone are the days where you would look into a website having only HTML! You love your favourite websites because of the User Interface that it showcases. You love those animations, colour gradients, effects etc.
You know the reason behind your love for them? It’s nothing but Cascading Style Sheets (CSS)!
This picture summarises the power of CSS!
User Agent 👤
Even if you don’t write your own CSS, your browser (User Agent) comes by default with some CSS. A button will not look same in CHROME & SAFARI. Let me show you that :
These are some of the properties that your browser applies to the elements on your website by default. Therefore, the word User Agent Stylesheet has been written there.
These are the stylings that the developer explicitly adds in the code.
Structure Of CSS 🧱
There are 2 components that come into picture when you write CSS → KEY & VALUE.
Every styling in CSS is done in <key> : <value> pair
background-color & border-radius → Keys
#fff & 20px → Values
Types Of CSS 🔢
Inline CSS 📏
You write the styling of the elements then & there while typing the code in html.
Styling done while typing the code of button then & there
It does not applies to other buttons as it is explicitly being mentioned for a particular button.
Internal CSS 🔗
You write the styling of the elements in
<style> </style>tags in the same file of the code.
Styling done after writing the code of button & h1 in separate tags but in the same .html file
It applies to all the buttons and h1 tags as these are not explicit stylings but general stylings.
External CSS 🚀
You write the styling of the elements in a different file with the extension
.css
The structure of the website is present in .html file & styling in .css file
It also applies to all the buttons as these are not explicit but general stylings.
Order Of Picking Up The CSS 🧩
There are 3 types of CSS discussed above. There is User Agent CSS as well.
Now the question arises → How will the browser know which CSS it has to pick? What if there is INLINE CSS as well as INTERNAL CSS?! Which one will the browser pick up?
The answer is pretty straightforward. The browser first looks for INLINE CSS. Then it looks for INTERNAL CSS / EXTERNAL CSS. Then it looks for USER AGENT CSS.
The above image clearly defines the order of checking the CSS Presence.
Why Cascading? 🥞
The meaning of cascading is simply, ‘When something falls over the other thing ’.
Why is the word cascading used here? Because one style is falling over the other style and is completely hiding the one which it falls over. Let me show you how!
Your website loads with default User Agent CSS already.
It then checks for the Inline CSS. If it finds it then the Inline CSS, CASCADES over the User Agent CSS and completely hides the default behaviour.
Fun Fact → Inline CSS has the highest SPECIFICITY (Stay tuned for the next article on this keyword. It is the brain of CSS!). Therefore nothing can cascade over the Inline CSS. Let’s consider the second scenario where there is no Inline CSS.
Your website loads with default User Agent CSS already.
It then checks for Inline CSS. It doesn’t find it.
It then checks for Internal / External CSS.
Internal / External CSS gets applied → Internal / Excess CSS CASCADES over the User Agent CSS and completely hides it.
What if there is more than one occurrences of a CSS Styling for the same element (Button, for example)?!
More than one occurrences of CSS Styling on same element (button, here)
Internal / External CSS gets applied. It CASCADES the User Agent CSS Styling.
It then keeps on going on in the downwards direction in the Internal / External CSS.
If it finds that the same element (button) has been applied some newer styling then it will adopt the new styling (2nd in the above photo ) and forget the previous one(1st in the above photo ). Newer styling CASCADES over the previous styling.
The topmost is ‘Internal CSS Styling Number 2, hence it will be visible as it will cascade other sheets.
The button has BLUE BORDER && NOT GREEN BORDER as 2nd styling cascaded over the 1st styling.
Conclusion ✅
CSS is an endless ocean. It is so vast that you can spend months and months on it and still not being able to know 100 percent of it! Therefore, it becomes important to know the basics of it. Only if your foundation is strong you can build a huge building.
Thank you for reading till this point. Stay tuned for the next article covering the selectors in CSS & the SPECIFICITY ALGORITHM which essentially is the brain of the CSS! It will have CSS Cheatsheet as well!