CSS Quiz

1. Which way of adding CSS is best for a multi-page website?

• Inline style attributes
• A <style> element in each page
• An external stylesheet linked from every page
• A <script> that sets styles

One cached file styles every page and keeps content and presentation separate (lesson 02).

2. What does nav a select?

• Only links that are direct children of nav
• Every link anywhere inside a nav
• The nav element when it contains a link
• A nav immediately followed by a link

A space is the descendant combinator (lesson 04).

3. What is the specificity of ul li.item:hover?

• (0,1,2)
• (0,2,2)
• (1,1,2)
• (0,0,4)

One class plus one pseudo-class gives 2 in the middle column; two type selectors give 2 in the last (lesson 07).

4. Two rules with equal specificity set the same property. Which wins?

• The first one in the stylesheet
• The one that appears later
• The shorter selector
• Neither — the browser default is used

When everything else is equal, source order decides (lesson 07).

5. Which of these properties is inherited by default?

• border
• padding
• color
• background-color

Text-related properties inherit; box-related ones don't (lesson 08).

6. A user sets their browser's default font size to 20px. Which unit respects that?

• px
• rem
• vw
• cm

rem is relative to the root font size, which follows the user's setting (lesson 09).

7. What does clamp(1rem, 2.5vw, 2rem) return on a very wide screen?

• 1rem
• 2.5vw
• 2rem
• An error

The preferred value is capped at the maximum (lesson 14).

8. Where can a custom property declared on :root be used?

• Only in the :root rule
• Anywhere in the document, because custom properties inherit
• Only in the same stylesheet file
• Only inside @media rules

Custom properties inherit, so values on the root reach every element (lesson 13).

9. With box-sizing: content-box, a box has width: 200px; padding: 20px; border: 5px solid. How wide is it on screen?

• 200px
• 225px
• 250px
• 240px

200 + 2×20 + 2×5 = 250. With border-box it would be 200px (lesson 17).

10. Two paragraphs have margin-bottom: 30px and margin-top: 20px. How much space is between them?

• 50px
• 30px
• 20px
• 10px

Vertical margins collapse to the larger one (lesson 15).

11. Which font-display value shows fallback text immediately and swaps in the web font when it loads?

• block
• swap
• optional
• auto

swap avoids invisible text while the font downloads (lesson 20).

12. What does display: none do that visibility: hidden doesn't?

• Removes the element from the layout so it takes up no space
• Hides it from mouse clicks only
• Keeps it readable for screen readers
• Animates it out

visibility: hidden keeps the element's space (lesson 23).

13. An element with position: absolute is positioned relative to what?

• The viewport, always
• Its parent element, always
• Its nearest positioned ancestor
• Where it would normally be

If no ancestor is positioned, the initial containing block is used (lesson 24).

14. Why might z-index: 9999 fail to put an element on top?

• z-index only goes up to 999
• The element is inside a stacking context that is itself below another element
• z-index only works with Flexbox
• It needs !important

z-index values only compete within the same stacking context (lesson 25).

15. In a Flexbox row, which property aligns items vertically?

• justify-content
• align-items
• flex-direction
• vertical-align

justify-content works on the main axis; align-items on the cross axis (lesson 27).

16. What does flex: 1 on every item in a row do?

• Makes each item 1px wide
• Makes the items share the available space equally
• Stops the items from shrinking
• Puts each item on its own line

Grow 1, shrink 1, basis 0 — so all items get an equal share (lesson 28).

17. What does grid-template-columns: 200px 1fr create?

• Two equal columns
• A 200px column and a column that takes the rest of the space
• One 200px column repeated
• A 200px gap between columns

fr distributes the free space left after fixed tracks (lesson 29).

18. Which declaration makes a grid item span from the first column line to the last?

• grid-column: 1 / 3
• grid-column: 1 / -1
• grid-column: span all
• grid-column: full

Negative line numbers count from the end (lesson 30).

19. What is a "mobile-first" stylesheet?

• Base styles target small screens and min-width queries add styles for larger ones
• A stylesheet only served to phones
• One that uses max-width queries everywhere
• One that hides content on mobile

Small-screen styles are simpler, so building upwards keeps the CSS lean (lesson 32).

20. How do container queries differ from media queries?

• They only work in Grid
• They respond to the size of an ancestor container rather than the viewport
• They respond to the device orientation
• They replace Flexbox

A component can adapt to wherever it is placed (lesson 33).

21. What does margin-inline-start map to in a right-to-left language?

• margin-left
• margin-right
• margin-top
• Nothing — it only works in English

Logical properties follow the writing direction (lesson 34).

22. Which properties are cheapest to animate?

• width and height
• top and left
• transform and opacity
• margin and padding

They avoid layout and paint work, so the browser can animate them smoothly (lesson 37).

23. What must a transition have to work?

• A @keyframes rule
• A change in a property value, such as on :hover
• JavaScript
• animation-iteration-count

Transitions animate between two states; keyframe animations can run on their own (lessons 37–38).

24. What does object-fit: cover do to an image?

• Stretches it to fill the box, distorting it
• Fills the box while keeping the aspect ratio, cropping the overflow
• Shows the whole image with empty space around it
• Tiles the image

contain would show the whole image with letterboxing (lesson 41).

25. What does .card:has(img) select?

• Images inside cards
• Cards that contain an image
• Cards that come after an image
• Images with the class "card"

:has() selects an element based on its contents (lesson 43).

26. What is the specificity of :where(#nav .link)?

• (1,1,0)
• (0,1,0)
• (0,0,0)
• (1,0,0)

:where() always contributes zero, which makes it ideal for defaults (lesson 43).

27. In native CSS nesting, what does &.active inside .tab { } mean?

• .tab .active
• .tab.active
• .tab-active
• .active .tab

& is replaced by the parent selector with no space (lesson 44).

28. With @layer base, utilities;, a #id rule in base and a .class rule in utilities both set color. Which wins?

• The #id rule, because ids are more specific
• The .class rule, because later layers beat earlier ones
• Whichever appears last in the file
• Neither

Layer order is checked before specificity (lesson 45).

29. What does light-dark(white, black) need in order to switch values?

• A media query around it
• color-scheme: light dark on the element or an ancestor
• JavaScript
• A data-theme attribute

The function follows the used colour scheme (lesson 46).

30. What is the minimum WCAG contrast ratio for normal-sized body text?

• 2:1
• 3:1
• 4.5:1
• 7:1

3:1 applies to large text and interface components (lesson 48).