Page 86 - CSS

Chapter 10: Cascading and Specificity

Remarks

CSS specificity intends to promote code conciseness by allowing an author to define some
general formatting rules for a broad set of elements, and then to override them for a certain
subset.

Examples

Cascading

Cascading and specificity are used together to determine the final value of a CSS styling property.
They also define the mechanisms for resolving conflicts in CSS rule sets.

CSS Loading order

Styles are read from the following sources, in this order:

1. User Agent stylesheet (The styles supplied by the browser vendor)
2. User stylesheet (The additional styling a user has set on his/her browser)
3. Author stylesheet (Author here means the creator of the webpage/website)
• Maybe one or more .css files
• In the <style> element of the HTML document
4. Inline styles (In the style attribute on an HTML element)

The browser will lookup the corresponding style(s) when rendering an element.

How are conflicts resolved?

When only one CSS rule set is trying to set a style for an element, then there is no conflict, and
that rule set is used.

When multiple rule sets are found with conflicting settings, first the Specificty rules, and then the
Cascading rules are used to determine what style to use.

Example 1 - Specificity rules

.mystyle { color: blue; } /* specificity: 0, 0, 1, 0 */
div { color: red; } /* specificity: 0, 0, 0, 1 */

<div class="mystyle">Hello World</div>

https://riptutorial.com/ 64