CSS Cascade and Specificity Resolution Quiz

1. Which selector has the highest specificity weight in CSS?

Element selector

Class selector

ID selector

Universal selector

In CSS, specificity determines which styles are applied when multiple rules match an element. The ID selector carries the highest specificity weight because it is designed to uniquely identify a single element, thus overriding styles from element and class selectors, which have lower specificity. This makes ID selectors the most powerful in controlling styling.

Explanation

In CSS, specificity determines which styles are applied when multiple rules match an element. The ID selector carries the highest specificity weight because it is designed to uniquely identify a single element, thus overriding styles from element and class selectors, which have lower specificity. This makes ID selectors the most powerful in controlling styling.

2. What is the specificity value of the selector #header .nav a?

(1, 0, 0, 1)

(1, 1, 0, 1)

(1, 1, 1, 0)

(0, 2, 1, 1)

The specificity of the selector #header .nav a is calculated by counting the components: 1 ID selector (#header), 1 class selector (.nav), and 1 type selector (a). This results in a specificity value of (1, 1, 0, 1), reflecting the contribution of each type of selector to the overall specificity.

Explanation

The specificity of the selector #header .nav a is calculated by counting the components: 1 ID selector (#header), 1 class selector (.nav), and 1 type selector (a). This results in a specificity value of (1, 1, 0, 1), reflecting the contribution of each type of selector to the overall specificity.

3. Which property overrides normal cascade rules in CSS?

!default

!important

!priority

!override

The `!important` declaration in CSS is used to give a style rule higher priority than normal cascading rules. When applied to a property, it ensures that this rule takes precedence over other conflicting styles, regardless of their specificity or order in the stylesheet, making it a powerful tool for overriding styles.

Explanation

The `!important` declaration in CSS is used to give a style rule higher priority than normal cascading rules. When applied to a property, it ensures that this rule takes precedence over other conflicting styles, regardless of their specificity or order in the stylesheet, making it a powerful tool for overriding styles.

4. In the cascade, which stylesheet has the lowest priority?

Inline styles

Internal stylesheet

External stylesheet

User agent stylesheet

User agent stylesheets are default styles provided by web browsers. They have the lowest priority in the CSS cascade because they can be easily overridden by external stylesheets, internal styles, and inline styles, which are more specific and take precedence in styling web content.

Explanation

User agent stylesheets are default styles provided by web browsers. They have the lowest priority in the CSS cascade because they can be easily overridden by external stylesheets, internal styles, and inline styles, which are more specific and take precedence in styling web content.

5. Two selectors have equal specificity. Which rule applies?

The first rule in the document

The last rule in the document

The most specific parent rule

Browser default wins

When two CSS selectors have equal specificity, the browser applies the rule that appears last in the stylesheet. This is based on the "Cascading" nature of CSS, where later rules override earlier ones if they have the same specificity, ensuring that the most recent declaration takes precedence.

Explanation

When two CSS selectors have equal specificity, the browser applies the rule that appears last in the stylesheet. This is based on the "Cascading" nature of CSS, where later rules override earlier ones if they have the same specificity, ensuring that the most recent declaration takes precedence.

6. What is the specificity of the selector div.container#main?

(0, 1, 1, 1)

(1, 1, 1, 0)

(1, 1, 0, 1)

(0, 2, 1, 0)

The specificity of the selector div.container#main is calculated based on its components: 1 ID selector (#main), 1 class selector (.container), and 1 type selector (div). This results in a specificity score of (1, 1, 1, 0), indicating one ID, one class, and one type selector, with no inline styles.

Explanation

The specificity of the selector div.container#main is calculated based on its components: 1 ID selector (#main), 1 class selector (.container), and 1 type selector (div). This results in a specificity score of (1, 1, 1, 0), indicating one ID, one class, and one type selector, with no inline styles.

7. Which CSS rule will override p { color: blue; } if both are in the same stylesheet?

.text { color: red; }

P.text { color: red; }

#paragraph { color: red; }

P:hover { color: red; }

The rule `#paragraph { color: red; }` overrides `p { color: blue; }` because it uses an ID selector, which has a higher specificity than the type selector for paragraphs. In CSS, specificity determines which styles are applied when multiple rules match the same element, with ID selectors being more specific than type selectors.

Explanation

The rule `#paragraph { color: red; }` overrides `p { color: blue; }` because it uses an ID selector, which has a higher specificity than the type selector for paragraphs. In CSS, specificity determines which styles are applied when multiple rules match the same element, with ID selectors being more specific than type selectors.

8. In CSS inheritance, which property is NOT inherited by default?

Font-size

Color

Margin

Line-height

In CSS, properties like font-size, color, and line-height are inherited by child elements from their parent elements, allowing for consistent styling. However, the margin property is not inherited by default; instead, it applies individually to each element. This design helps maintain layout control without unintended spacing effects from parent elements.

Explanation

In CSS, properties like font-size, color, and line-height are inherited by child elements from their parent elements, allowing for consistent styling. However, the margin property is not inherited by default; instead, it applies individually to each element. This design helps maintain layout control without unintended spacing effects from parent elements.

9. A rule in an external stylesheet conflicts with an inline style. Which wins?

External stylesheet

Inline style

The one written last

Depends on specificity only

Inline styles have higher specificity compared to external stylesheets, meaning they take precedence when both are applied to the same element. This prioritization ensures that any styles defined directly within an element's HTML will override those specified in external stylesheets, providing more control over the element's appearance.

Explanation

Inline styles have higher specificity compared to external stylesheets, meaning they take precedence when both are applied to the same element. This prioritization ensures that any styles defined directly within an element's HTML will override those specified in external stylesheets, providing more control over the element's appearance.

10. What does the universal selector (*) contribute to specificity?

(1, 0, 0, 0)

(0, 1, 0, 0)

(0, 0, 1, 0)

(0, 0, 0, 0)

The universal selector (*) has no specificity value, meaning it does not contribute to the specificity hierarchy in CSS. It matches all elements but does not override other selectors with higher specificity. Therefore, its specificity is represented as (0, 0, 0, 0), indicating it has the lowest precedence.

Explanation

The universal selector (*) has no specificity value, meaning it does not contribute to the specificity hierarchy in CSS. It matches all elements but does not override other selectors with higher specificity. Therefore, its specificity is represented as (0, 0, 0, 0), indicating it has the lowest precedence.

11. Which statement about CSS cascade is true?

All stylesheets have equal priority in cascade

Author styles override user agent styles by default

Cascade only applies to ID selectors

Cascade is ignored when !important is used anywhere

In CSS, author styles are defined by the web developer and take precedence over user agent styles, which are the default styles applied by the browser. This ensures that the developer's design choices are prioritized, allowing for greater control over the appearance of web pages.

Explanation

In CSS, author styles are defined by the web developer and take precedence over user agent styles, which are the default styles applied by the browser. This ensures that the developer's design choices are prioritized, allowing for greater control over the appearance of web pages.

12. The cascade priority from lowest to highest is: author, user agent, ____.

In the context of CSS and styling, the cascade priority determines how styles are applied. It ranks the sources of styles based on their specificity. The hierarchy from lowest to highest starts with author styles, followed by user agent styles (browser defaults), and finally user styles, which allow individual users to override other styles for customization.

Explanation

In the context of CSS and styling, the cascade priority determines how styles are applied. It ranks the sources of styles based on their specificity. The hierarchy from lowest to highest starts with author styles, followed by user agent styles (browser defaults), and finally user styles, which allow individual users to override other styles for customization.

Submit