Episode 1 — Fundamentals / 1.6 — CSS Core Fundamentals
1.6 — Exercise Questions: CSS Core Fundamentals
Practice questions for all nine subtopics in Section 1.6. Mix of short-answer, specificity scoring, code reasoning, and DevTools drills. Try each without reopening the lesson files first.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.6.a→1.6.iin sequence. - Answer closed-book first — write an answer (bullets or short paragraphs), then compare to the matching lesson.
- Hands-on DevTools — use Elements → Styles, Computed tab, and box model diagram where indicated.
- Redo misses — retry the next day; mark weak subtopics (
1.6.bspecificity,1.6.dbox model, etc.). - Interview prep — pair with
1.6-Interview-Questions.md.
1.6.a — Selectors (Q1–Q8)
Q1. Name six different CSS selector types and give one example of each.
Q2. What is the difference between a descendant combinator ( ) and a child combinator (>)?
Q3. Write a selector that targets every <a> directly inside a <nav> but not deeper nested links.
Q4. What does the :has() pseudo-class do? Write a rule that styles a .card differently when it contains an <img>.
Q5. What is the difference between :hover and :focus-visible? When would you use each?
Q6. Write a CSS rule using :nth-child() to style every odd row in a table.
Q7. What do ::before and ::after pseudo-elements create? Give one common use case.
Q8. What does the attribute selector [href^="https://"] target?
1.6.b — Specificity & Cascade (Q9–Q17)
Q9. Score the specificity of each selector:
- (a)
h1 - (b)
.card .title - (c)
#hero - (d)
nav ul.menu li a:hover - (e)
style="color: red"
Q10. Two rules target the same <p>: .card p { color: blue; } and p { color: red; }. Which color wins? Why?
Q11. What happens when specificity is equal between two rules?
Q12. Explain !important — what does it do, and why should it be used sparingly?
Q13. What is the difference between :is() and :where() in terms of specificity?
Q14. A third-party widget injects styles with !important. How can you override them without an endless !important chain?
Q15. What are cascade layers (@layer)? How do they change the normal specificity battle?
Q16. True or false: "10 class selectors beat 1 ID selector." Explain.
Q17. Hands-on: Open any styled page → DevTools → Elements → Styles. Find a declaration that is struck through. What selector beat it, and what is each selector's specificity?
1.6.c — Inheritance (Q18–Q24)
Q18. Name five CSS properties that inherit by default and three that do not.
Q19. Why does setting color: navy on <body> color all text on the page, but setting border: 1px solid black does not give every element a border?
Q20. What is the difference between initial, inherit, unset, and revert?
Q21. Why do form elements (<button>, <input>) often not inherit font-family from the body? How do you fix it?
Q22. What does all: unset do? Give one scenario where it is useful.
Q23. What is the computed value of a CSS property? Where can you see it in DevTools?
Q24. Hands-on: Open DevTools → Elements → Computed tab. Pick any element. Find a property that shows "inherited from body" — which property is it, and what is the computed value?
1.6.d — Box Model (Q25–Q34)
Q25. List the four layers of the box model from inside to outside.
Q26. An element has width: 300px; padding: 20px; border: 5px solid; box-sizing: content-box. What is its total horizontal space? Now change to border-box — what changes?
Q27. Why does every modern CSS reset include *, *::before, *::after { box-sizing: border-box; }?
Q28. What is margin collapsing? Give one example where it occurs and one where it doesn't.
Q29. How do you horizontally center a block element with a fixed width using margins?
Q30. What is the difference between inline, block, and inline-block display values in terms of margin and padding behavior?
Q31. Why can't you set width or height on an inline element like <span>?
Q32. What is the difference between outline and border in the box model?
Q33. Why should you avoid removing outline on :focus without providing an alternative?
Q34. Hands-on: Open DevTools → Elements → select any element. Look at the Box Model diagram in the Computed tab. What values do you see for content, padding, border, and margin?
1.6.e — Units (Q35–Q42)
Q35. Compare px, rem, em, %, and vw — what is each relative to?
Q36. Why is rem better than px for font sizes from an accessibility perspective?
Q37. What is em compounding, and how does nesting 1.2em inside 1.2em produce unexpected sizes?
Q38. What is the ch unit? Write a CSS rule using ch to limit line width for readability.
Q39. Explain the mobile 100vh problem and how dvh fixes it.
Q40. When would you use % vs vw for width?
Q41. For media queries, should you use px or em/rem? Why?
Q42. Hands-on: Create an element with font-size: 2rem and padding: 1em. Then wrap it in a container with font-size: 1.5rem. Does the padding change? Why or why not?
1.6.f — Modern CSS Functions (Q43–Q49)
Q43. What does clamp(1rem, 3vw, 2rem) mean in plain English?
Q44. Write a CSS rule using min() to make a container that is 90% of the viewport but never wider than 1200px.
Q45. Write a CSS rule using max() to ensure an element is at least 200px wide.
Q46. How does clamp() replace multiple media queries for fluid typography?
Q47. Can you mix rem and vw inside clamp()? Give an example.
Q48. Why should the minimum bound in fluid typography use rem instead of px?
Q49. Hands-on: Apply font-size: clamp(1rem, 2.5vw, 2rem) to a heading. Resize the browser window. At what viewport width does the font stop growing?
1.6.g — CSS Variables (Q50–Q57)
Q50. Write a CSS rule defining three custom properties on :root and using one of them in a .button.
Q51. What does var(--color, #333) do when --color is not defined?
Q52. How do CSS custom properties inherit differently from Sass variables?
Q53. How would you override a custom property for a specific section of the page?
Q54. How can JavaScript change a CSS custom property at runtime?
Q55. Write a dark mode implementation using custom properties and a data-theme attribute.
Q56. What is a component-scoped custom property? Give an example with a .card component.
Q57. Hands-on: In DevTools → Elements → Styles, find a var() usage. Click it — does DevTools show the resolved value? What is the inheritance chain?
1.6.h — Design Systems (Q58–Q63)
Q58. What are the four main layers of a design system?
Q59. Why does using a finite set of spacing values (a spacing scale) improve a codebase?
Q60. What is the difference between a component library and a design system?
Q61. Name three popular open-source design systems and one thing each is known for.
Q62. What is the anti-pattern of using --blue-500 directly in components instead of a semantic token like --color-primary?
Q63. A new developer joins and adds padding: 13px to a component. Why is this a problem in a token-based system, and how would you fix it?
1.6.i — Design Tokens (Q64–Q72)
Q64. What is a design token? Give three examples from different categories.
Q65. Explain the three token tiers (primitive, semantic, component) with a color example.
Q66. Why does the semantic tier matter for theming (e.g., switching from light to dark mode)?
Q67. What is a spacing system based on a 4px/8px grid? List at least six token values.
Q68. What WCAG contrast ratio must normal text meet? Why does this matter for color tokens?
Q69. How can a single tokens.json file generate outputs for CSS, iOS, and Android?
Q70. Write a CSS :root block with a primitive, semantic, and component token for a primary color.
Q71. What is a z-index token and why is it better than hardcoding z-index values?
Q72. Exercise: Design a minimal token system for a landing page with: 3 brand colors, 5 spacing values, 2 font families, and 3 border radii. Write it as CSS custom properties.
Practical Exercises (Q73–Q78)
Q73. Hands-on: Create a simple HTML page with a .card component. Style it using only CSS custom properties for colors, spacing, and border-radius. Then create a .card.dark variant by overriding the variables.
Q74. Hands-on: Open DevTools → Styles panel. Find a specificity conflict (struck-through rule). Calculate the specificity of both selectors. Which wins and why?
Q75. Exercise: Given this CSS, predict the final color of the <p>:
p { color: blue; }
.text { color: green; }
#intro .text { color: red; }
<div id="intro"><p class="text">Hello</p></div>
Q76. Exercise: Convert this fixed-pixel design to use rem and clamp():
h1 { font-size: 36px; }
.container { max-width: 1200px; padding: 24px; }
Q77. Hands-on: Apply margin: 30px 0 to two adjacent <div> elements. Measure the gap in DevTools. Is it 60px or 30px? Why?
Q78. Exercise: Build a complete token-based color system with light/dark theming. Define primitives, semantic tokens, and dark overrides. Use only CSS custom properties.
Reflection (Q79–Q80)
Q79. Draw the box model from memory. Label all four layers. Add the box-sizing behavior for both content-box and border-box.
Q80. Which subtopic (1.6.a–1.6.i) is weakest for you? List three follow-up actions (read, build, test).
Answer hints
(Short reminders — expand in your own words when studying.)
| Q | Hint |
|---|---|
| Q1 | Element, class, ID, attribute, pseudo-class, pseudo-element, combinator |
| Q2 | Descendant = any depth; child = direct children only |
| Q3 | nav > a { } |
| Q4 | Parent selector; .card:has(img) { padding: 0; } |
| Q5 | :hover = mouse; :focus-visible = keyboard focus (preferred for styling) |
| Q9a | 0,0,0,1 |
| Q9b | 0,0,2,0 |
| Q9c | 0,1,0,0 |
| Q9d | 0,0,2,4 (.menu + :hover = 2 classes; nav ul li a = 4 elements) |
| Q9e | 1,0,0,0 |
| Q10 | Blue — .card p has higher specificity (0,0,1,1 vs 0,0,0,1) |
| Q11 | Last rule in source order wins |
| Q13 | :is() takes highest argument; :where() has zero specificity |
| Q14 | @layer (put third-party in lower layer), or higher-specificity selector with !important |
| Q16 | False — specificity categories never overflow; 1 ID always beats any number of classes |
| Q18 | Inherit: color, font-family, font-size, line-height, text-align; Not: margin, padding, border |
| Q19 | color inherits; border does not — different CSS specification defaults |
| Q20 | initial = spec default; inherit = parent value; unset = inherit if inheritable else initial; revert = browser default |
| Q21 | User-agent stylesheets override; fix with font: inherit |
| Q25 | Content → Padding → Border → Margin |
| Q26 | Content-box: 300 + 40 + 10 = 350px. Border-box: 300px (content shrinks to 250px) |
| Q27 | Makes width include padding + border — predictable layout math |
| Q28 | Siblings: vertical margins merge (larger wins). Flex children: no collapse |
| Q29 | margin: 0 auto; on the block element |
| Q30 | Block: respects all; inline: vertical margin/padding don't affect layout flow; inline-block: all respected |
| Q32 | outline not in box model (no layout impact); border is part of box model |
| Q35 | px = absolute; rem = root font; em = own font; % = parent dimension; vw = viewport width |
| Q36 | rem scales with user font-size setting; px ignores it — a11y violation |
| Q37 | 1.2em × 1.2em = 1.44× root — each nesting multiplies |
| Q38 | Width of 0 glyph; max-width: 70ch; |
| Q39 | Mobile address bar makes 100vh overflow; dvh adjusts dynamically |
| Q43 | "Be 3vw, but never less than 1rem or more than 2rem" |
| Q44 | .container { width: min(90%, 1200px); } |
| Q45 | element { width: max(200px, ...); } |
| Q48 | rem respects user font-size pref; px doesn't — accessibility |
| Q50 | :root { --x: val; } .button { prop: var(--x); } |
| Q51 | Falls back to #333 |
| Q52 | CSS vars inherit down DOM; Sass vars are flat scope, compiled away |
| Q54 | document.documentElement.style.setProperty('--x', 'value') |
| Q58 | Principles, tokens, components, documentation |
| Q62 | Brand change requires touching every component; semantic layer decouples |
| Q65 | Primitive --blue-500; semantic --color-primary: var(--blue-500); component --button-bg: var(--color-primary) |
| Q68 | 4.5:1 for normal text; ensures readability for low-vision users |
| Q75 | Red — #intro .text has highest specificity (0,1,1,0) |
| Q77 | 30px — vertical margins collapse (larger wins) |
← Back to 1.6 — CSS Core Fundamentals (README)