CSS PROPERTIES- understanding the cascade?

Oct 02, 2020

As popularly known that CSS is a language of rules (my opinion). One rule can easily override another and the secret behind overriding is specificity. And it is generally seen as ‘When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element - last rule win.’ this is not applicable to everything but a rule of the same specificity. CSS stands for Cascading Style Sheet. Cascade in the real sense means what stylesheet get applied as the page loads. Note: As specificity is the order by which CSS rules get applied so as cascading is the order by which stylesheet got applied especially when loading CSS from more than one source. Cascading in action: The browser by default has the ability of loading stylesheet from different sources and the cascade is the rule to be sure which to be loaded as a developer. Below are the different sources of stylesheet. User Stylesheet: This is a special setting by the user of the webpage. Many people prefer bold font type on every website they visit and some are colour (set awon dark mode)🤣. Setting update automatically generate a stylesheet known as User Stylesheet and get saved on the browser. User Agent Stylesheet (browser default stylesheet): This is a set of CSS rules that is applied to every html tags e.g anchor tag having an underline and a text colour of blue, heading tags having default margin and padding and also block elements having a default display of block etc. Author Stylesheet (developers stylesheet sheet): This is the set of CSS rules declared by the developer to style a particular pages which can be of any of the three below I. Inline ii. Embedded or Internal iii. External.

All the stylesheet discussed above has the CSS weight in the order of author stylesheet having the highest preference followed by user stylesheet and lastly the browser default stylesheet(user agent stylesheet). More so, Specificity is a rule by which browsers follow to pick what to display to the users or clients from bunch of rules written by the developer. MDN defined specificity to be the means by which browsers decide which CSS property values are the most relevant to an element and, therefore, will be applied. Specificity is based on the matching rules which are composed of different sorts of CSS selectors. and you can read more on Abdulqudus Abubakre post here and interact with his game here.

The main focus of this article is what override another. The most recognised CSS rules by the browser is the inline but it can also be overwritten by external stylesheet through the use of !important value to the necessary property. But it is not the best practices as MDN testifies ‘Using !important, however, is bad practice and should be avoided because it makes debugging more difficult by breaking the natural cascading in your stylesheets.’ One property override another but the CSS property background cannot be overwritten by background-color but background can override background-color. This is very important as many CSS developers fall victim. Chilled and enjoy your day with this❤️. Thanks! Abdulqudus Abubakre Aliyu Abubakar CSS Weekly