The cascade

Question 1

What is the cascade ?

Answer 1

The cascade is the algorithm for solving conflicts where multiple CSS rules apply to an HTML element.

Question 2

What are the 4 stages of the cascade algorithm ?

Answer 2

Position and order of appearance: the order of which your CSS rules appear

Specificity: an algorithm which determines which CSS selector has the strongest match

Origin: the order of when CSS appears and where it comes from, whether that is a browser style, CSS from a browser extension, or your authored CSS

Importance: some CSS rules are weighted more heavily than others, especially with the !important rule type

Question 3

What is the order of specificity of CSS origins from less specific to more specific ?

Answer 3

1. User agent base styles. These are the styles that your browser applies to HTML elements by default.
2. Local user styles. These can come from the operating system level, such as a base font size, or a preference of reduced motion. They can also come from browser extensions, such as a browser extension that allows a user to write their own custom CSS for a webpage.
3. Authored CSS. The CSS that you author.
4. Authored !important. Any !important that you add to your authored declarations.
5. Local user styles !important. Any !important that come from the operating system level, or browser extension level CSS.
6. User agent !important. Any !important that are defined in the default CSS, provided by the browser.

Question 4

What is the CSS specificity ?

Answer 4

It is an algorithm which determines which CSS selector has the strongest match

Question 5

Which rule can have priority over an inlinestyleattribute ?

Answer 5

a declaration that has!importantdefined.

Question 6

Which of a class and an element has the highest specificity ?

Answer 6

The class

Question 7

What is the order of “importance” of css rules from least important, to most important ?

Answer 7

normal rule type, such asfont-size,backgroundorcolor

animationrule type

!importantrule type (following the same order as origin)

transitionrule type

Question 8

What is the universal selector number of points ?

Answer 8

0 point

Question 9

What is the number of point of an element or a pseudo-element selector ?

Answer 9

1 point

Question 10

What is the number of point of class, pseudo-class and atrribute selectors ?

Answer 10

10 points

Question 11

How many point does Tlthe:not()pseudo-class itself adds to the specificity calculation ?

Answer 11

Nothing. 0 points.

However, the selectors passed in as arguments do get added to the specificity calculation.

Question 12

What is the number of points of an ID selector?

Answer 12

100 points

Question 13

What is the number of points of an inline style attribute ?

Answer 13

CSS applied directly to thestyleattribute of the HTML element, gets aspecificity score of 1,000 points.

Question 14

What is the number of points of an !importantrule attribute ?

Answer 14

10,000 points. This is the highest specificity that one individual item can get.