MICKAI® Trust AgentFree AI courses

web · Level 2

CSS: responsive layouts, grids and typography

Style the event page by hand so it reads well on a phone and a laptop, measure each result in a real browser, and learn to check CSS an AI assistant writes.

By Mickarle Wagstaff-Irons - Micky Irons

  • Level 2Getting going
  • 140 min
  • 6 chapters
  • Free PDF, no account
Download free PDF (PDF, 2.0 MB)
The Pageweb / 02

Start with the essentials

The short answer

Responsive CSS starts with a border-box model, custom properties for your choices, and layouts that adapt by themselves: flexbox for a line of items, grid for columns, and fluid type from clamp(). Add media or container queries only where needed, honour the reader's colour scheme, motion and text size, and keep a visible focus ring. Test at several widths, and check AI-written CSS the same way.

What you will learn

  • You will be able to explain the box model and box-sizing, and measure a box in the browser.
  • You will be able to predict which rule wins from the cascade order and specificity, and keep colours and spacing in custom properties.
  • You will be able to build a flexbox row and a grid that chooses its own column count, and read its tracks in developer tools.
  • You will be able to make type and layout adapt with clamp(), media queries, container queries and logical properties, and say how well each is supported.
  • You will be able to honour colour scheme, reduced motion, focus visibility and contrast, naming the WCAG 2.2 criteria correctly.
  • You will be able to review CSS that an AI assistant wrote and find its common faults by measuring.

Who it is for

People who have built the event page in the HTML workbook and want it to look good on a phone and a laptop, writing CSS by hand without a framework. You should be able to edit files in a plain text editor and open them in a browser.

Before you start

  • The HTML workbook (build a meaningful, accessible page), or the finished Marigold Lane event page from it. A plain text editor and a desktop browser with developer tools. The tool names here are those of Microsoft Edge, and other browsers differ in detail. No JavaScript knowledge is needed: the few one-line Console checks are given in full.

Keep learning

The complete workbook

This workbook teaches CSS by hand, with no frameworks. You will extend a small invented event page with a box-model fix, custom properties, a flexbox header, a responsive grid of cards, fluid headings, a container query, a dark theme and reduced-motion and focus styles, measuring every result in a real browser at three widths. You will also learn to debug layout in developer tools and to review CSS written by an AI assistant.

  1. 01
    Every element is a box

    Measure the boxes on the event page, and see why one line of CSS makes widths mean what they say.

    In the workbook · 1 exercise
  2. 02
    The cascade, specificity and custom properties

    When rules disagree the browser must pick one. Learn the real order, and keep your choices in custom properties.

    In the workbook · 1 exercise
  3. 03
    Flexbox and grid

    Flexbox lays items along one line, grid along rows and columns. Use each where it fits.

    In the workbook · 1 exercise
  4. 04
    Fluid type, media queries and container queries

    Adapt the page without piles of breakpoints: text that scales, one media query, and a container query.

    In the workbook · 1 exercise
  5. 05
    Preferences, focus and contrast

    Readers choose a colour scheme and a motion level, and many use only a keyboard. Style for them, then check.

    In the workbook · 1 exercise
  6. 06
    Debugging layout, and reviewing AI-written CSS

    Learn the browser's tools, then use them on a stylesheet you did not write.

    In the workbook · 1 exercise

Also inside: a 10-point checklist, a glossary of 11 terms and 10 questions and answers to test yourself. 6 hands-on exercises, each with a worked answer at the back where the workbook gives one.

Download all 6 chapters as PDF (PDF, 2.0 MB)

No login, no card, no account. Before the download we ask you to follow Mickai (two quick links). Free to download and use for personal learning, study groups and inside your own team. Please do not resell the workbooks or republish them as your own. Link people to trust-agent.ai instead.

Test yourself

Questions and answers

Why do I need box-sizing: border-box?

By default width sets only the content, and padding and border are added outside it, so a box is wider than the number you wrote. With border-box, width covers content, padding and border. In this workbook's test at 768 and 1280 pixels, the event page's main measured 704 pixels wide by default and 672 with it.

What is the difference between flexbox and grid?

Flexbox is one-dimensional: it arranges items along a row or a column and can wrap them. Grid is two-dimensional: you define columns and rows and place items in them. Use flexbox when the content decides the flow along one line, and grid when you want to decide the columns.

What does repeat(auto-fit, minmax(12rem, 1fr)) do?

It creates as many columns as fit, each at least 12rem wide and sharing any spare space equally. auto-fit collapses empty columns so few items stretch to fill the row, and auto-fill keeps them. Write min(12rem, 100%) for the minimum so a container narrower than 12rem cannot overflow.

Why is my CSS rule being ignored?

Usually another rule wins. Inspect the element: the Styles tab lists every matching rule with overridden ones marked, and hovering a selector shows its specificity. A higher-specificity selector beats a later one, and a later one beats an earlier one of equal score. A misspelt property is rejected by the browser.

Is !important always wrong?

It is a blunt tool. It outranks normal declarations whatever the selector, so overriding it needs another !important that wins on specificity or order, and stylesheets get harder to change. Fix the specificity or the order instead. An AI assistant that scatters it through a stylesheet is showing a warning sign.

Should I use media queries or container queries?

Use a media query when the page as a whole should change with the screen or a reader setting, such as colour scheme. Use a container query when a component should adapt to the space it is given, wherever it is placed. A card in a narrow column and in a wide one can then share one rule.

Can I use container queries yet?

Size container queries are widely supported. On 26 September 2026 caniuse listed them in Edge and Chrome 106 and later, Firefox 110 and later and Safari 16.0 and later, and marked them Baseline widely available. The W3C specification is still a Working Draft. Check the support tables again on the day you use them.

How do I make text scale with the screen and still respect zoom?

Use clamp(min, preferred, max) with a rem part in the preferred value, such as clamp(1.5rem, 1.1rem + 2.5vw, 3rem). A size in vw alone ignores the reader's text size setting, which WCAG's failure technique F94 warns against. MDN advises a maximum at least twice the minimum.

Do I still need vendor prefixes like -webkit-?

Rarely. Caniuse lists box-shadow and border-radius as Baseline widely available, so prefixed copies add nothing, and -moz-border-radius was rejected by Edge 153 in this workbook's test. Check a property's support table before adding any prefix, because a few prefixed forms still matter.

How do I check CSS an AI assistant wrote?

Treat it as a draft from a stranger. Run it through the Nu Html Checker, which caught the invented margin-x in this workbook's test but also reported valid container queries as errors. Then look for what it misses: fixed pixel widths, !important, prefixes, removed focus outlines and low contrast. Test at 360, 768 and 1280 pixels, find any overflow, press Tab, and try dark mode and reduced motion.

When you have finished

Get your certificate of completion

Type your name and download a certificate for this workbook as a PDF, ready to print or to add to LinkedIn. It is made on your own device, so your name is never sent to us. It is a self-declared certificate, not an accredited qualification.

Make my certificate

Learn the language

Key terms

CSS pixel
The browser's unit of length, px. It is a CSS unit, not a physical screen dot.
Box model
How every element becomes a box of content, padding, border and margin, from the inside out.
Cascade
The rules by which the browser picks one winning declaration when several apply: origin and importance, then specificity, then order.
Specificity
A three-part score for a selector (IDs, then classes and attributes, then element names). Higher parts win first.
Custom property
A name starting with two hyphens, such as --accent, that holds a value you reuse with var().
Flexbox
A one-dimensional layout model that arranges items along a row or a column and can wrap them onto new lines.

6 of the workbook's 11 terms. The complete glossary is in the workbook.

Follow the evidence

Sources and checks

Facts last checked: .

Examples in this workbook were run on: Microsoft Edge 153.0.4234.48 (system install, headless) driven by Playwright 1.59.0 for Python 3.12.10 on Windows 11 Pro, at viewport widths of 320, 360, 768 and 1280 CSS pixels (no classic scrollbar; a classic one made the page area 15 pixels narrower); CSS checked with the W3C Nu Html Checker online service (checker version 26.9.16), through its file upload form and its JSON interface; caniuse support data read through caniuse.com on 2026-09-26 (2026-09-26).

These workbooks use AI assistance. See how the workbooks are made.

  1. CSS Cascading and Inheritance Level 5W3C
  2. Selectors Level 4W3C
  3. CSS Box Sizing Module Level 3W3C
  4. CSS Flexible Box Layout Module Level 1W3C
  5. CSS Grid Layout Module Level 2W3C
  6. CSS Values and Units Module Level 4W3C
  7. Media Queries Level 4W3C
  8. CSS Containment Module Level 3W3C
  9. CSS Custom Properties for Cascading Variables Module Level 1W3C
  10. Web Content Accessibility Guidelines (WCAG) 2.2W3C
  11. Understanding Success Criterion 1.4.4: Resize TextW3C Web Accessibility Initiative
  12. Understanding Success Criterion 1.4.11: Non-text ContrastW3C Web Accessibility Initiative
  13. Understanding Success Criterion 1.4.12: Text SpacingW3C Web Accessibility Initiative
  14. Understanding Success Criterion 2.4.7: Focus VisibleW3C Web Accessibility Initiative
  15. Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum)W3C Web Accessibility Initiative
  16. Understanding Success Criterion 2.3.3: Animation from InteractionsW3C Web Accessibility Initiative
  17. F94: Failure of Success Criterion 1.4.4 due to incorrect use of viewport units to resize textW3C Web Accessibility Initiative
  18. F78: Failure of Success Criterion 1.4.11, 2.4.7 and 2.4.13 due to styling element outlines and bordersW3C Web Accessibility Initiative
  19. C39: Using the CSS prefers-reduced-motion query to prevent motionW3C Web Accessibility Initiative
  20. C43: Using CSS scroll-padding to un-obscure contentW3C Web Accessibility Initiative
  21. The box modelMDN Web Docs
  22. box-sizingMDN Web Docs
  23. Using CSS custom properties (variables)MDN Web Docs
  24. Basic concepts of flexboxMDN Web Docs
  25. Basic concepts of grid layoutMDN Web Docs
  26. repeat()MDN Web Docs
  27. clamp()MDN Web Docs
  28. Using media queriesMDN Web Docs
  29. CSS container queriesMDN Web Docs
  30. CSS logical properties and valuesMDN Web Docs
  31. prefers-reduced-motionMDN Web Docs
  32. prefers-color-schemeMDN Web Docs
  33. color-schemeMDN Web Docs
  34. :focus-visibleMDN Web Docs
  35. Element: getBoundingClientRect() methodMDN Web Docs
  36. Window: getComputedStyle() methodMDN Web Docs
  37. <length> CSS type (including the rem unit)MDN Web Docs
  38. CSS features reference (DevTools)Microsoft Learn, Microsoft Edge developer documentation
  39. Inspect CSS Grid layoutsMicrosoft Learn, Microsoft Edge developer documentation
  40. Inspect and debug CSS container queriesMicrosoft Learn, Microsoft Edge developer documentation
  41. Emulate mobile devices (Device Emulation)Microsoft Learn, Microsoft Edge developer documentation
  42. Console overviewMicrosoft Learn, Microsoft Edge developer documentation
  43. Run JavaScript in the Console (Allow pasting into the Console)Microsoft Learn, Microsoft Edge developer documentation
  44. CSS Container Queries (Size), support table read on 2026-09-26caniuse
  45. CSS3 Box-shadow, support table read on 2026-09-26caniuse
  46. CSS3 Border-radius, support table read on 2026-09-26caniuse
  47. Nu Html Checker (web service)W3C

Created by Mickarle Wagstaff-Irons - Micky Irons with the Mickai team. Published by Mickai LTD. Last updated 26 September 2026.

NextKeep going

Where to go next