Test what you learned.

8 questions on CSS Fundamentals. Pass 70% to clear the chapter.

← Review chapter lessons

Quiz

CSS Fundamentals — Chapter Quiz

Eight questions on selectors, cascade, specificity, box model.

0/ 8

Question 1
1
Which selector has the HIGHEST specificity?
Ap.leadB.card .leadC#hero pDp
#hero p → (1, 0, 1). p.lead → (0, 1, 1). .card .lead → (0, 2, 0). p → (0, 0, 1). IDs trump classes which trump elements.
Question 2
2
Two rules with the same specificity — the LATER one wins.
TTrueFFalse
Source order is the tiebreaker. Later wins if everything else ties.
Question 3
3
With box-sizing: border-box, width: 300px includes…
AJust contentBContent and paddingCContent + padding + borderDContent + padding + border + margin
border-box makes width the total including padding and border (but NOT margin). The default content-box measures only content.
Question 4
4
Which color wins for <p class="lead">?
```
p { color: black; }
.lead { color: gray; }
p.lead { color: red; }
```
AblackBgrayCredDBrowser default
p.lead → (0, 1, 1), highest specificity. Wins.
Question 5
5
Which property is INHERITED by default?
AmarginBcolorCpaddingDwidth
Text-related properties (color, font-*, line-height) inherit. Layout properties (margin, padding, width) don't.
Question 6
6
For body text that scales with the user's browser font-size, use…
A16pxB1emC1remD1vw
rem is relative to the root font-size, which respects the user's browser preference. px is fixed; em compounds.
Question 7
7
!important is the recommended way to override third-party CSS.
TTrueFFalse
!important is a sledgehammer that spirals. Prefer cascade layers, lower specificity selectors, or moving the rule later in the source.
Question 8
8
To match .card regardless of where it appears, the selector is .____.
.card matches every element with class="card", anywhere in the document.