Cascade in English is a small waterfall, typically one of several that fall in stages down a steep rocky slope. CSS uses the definition of a cascade to create an algorithm that chooses and calculates when to choose the right rule to style a specific element. This algorithm is called Cascade. The cascade algorithm woks on the centre of CSS engine (Cogliati & Vuorimaa, 2006) and integrates well with most browser and xml-based documents.
Cascade algorithm finds all property-value pairs that effect an element and sort them by importance (give them scores), and the selected property-value pair for an Element falls from the `most important` pair till it reaches the `least important` pair, where the most important pair will be chosen, and at this point the cascading stops and that selected property-value styles that specific HTML element (MDN, 2020).
if -for any reason- the most important pair (style rule) is not applicable to be applied, the algorithm will fall for the next rule in the `importance cascade` and so forth. If there are no rules that styles a specific element, the cascade will always find a default value and apply it, probably from the User-Agent (UA) stylesheet (W3C, 1997).
CSS uses some complex methods to score priority of style rules, but here are some general guidelines:
1. Position and order of appearance: the latter overwrites its priors.
2. Specificity: ids > classes > element selectors, however using combinators might change the selector specificity.
3. Origin of stylesheet: Cascade arranges stylesheets from different origins where: User-Agent (browser) stylesheets < user stylesheets < Author stylesheets.
4. Importance: using the `! important` rule will always give the rule the highest priority unless the is another `! important` rule that styles this element but with higher specificity.
When 2 rules get the very exact score the rule that appears later in the source code will always take priority.
There are lots of things that can be easily done by CSS but very hard to do them in HTML, I will list 5 of them:
1. Mass selection: if you have large number of html elements, then style each of them individually is very inconvenient task, however, you can use CSS class or element selectors to target many elements with one style rule.
2. Effective inheritance: If you have multiple elements that needs different styles, you can extract the common styles into one class rule, then style the different parts on each element individually.
3. Mobile responsiveness: mobiles are now very popular, using CSS media queries you control how your website will appear on specific screen dimensions; however, this is not possible with html.
4. Importing and applying non standards fonts: HTML itself does not have functionality to work or select fonts, when dealing with custom fonts you need to import and apply them using CSS.
5. Changing the styles of websites that you don’t own: you can always add a stylesheet to the very bottom of any HTML document, overwriting all styles that already created by the site owner (on your side only, you cannot change the origin of the site).
References:
- Cogliati, A., & Vuorimaa, P. (2006). Optimized CSS Engine. In WEBIST (1) (pp. 206–213).
- MDN Contributors. (2020. January 9). Inheritance and Cascade. https://developer.mozilla.org/en-US/docs/Learn/CSS
- W3C Contributors. (1997, November 4). CSS2 Specifications — W3C Working Draft. https://www.w3.org/TR/WD-CSS2-971104/cascade.html
