HTML & CSS flashcards: layout, cascade and accessibility

All 50 cards

1. 1
   Why use semantic elements like <nav>, <main> and <article>?
   They tell browsers, screen readers and search engines what each part of the page is, for free
2. 2
   <article> vs <section>
   <article> is self-contained and could stand alone; <section> groups related content, usually with a heading
3. 3
   How many visible <main> elements can a page have?
   One, and it must not sit inside <article>, <aside>, <header>, <footer> or <nav>
4. 4
   <button> vs <a>
   A button performs an action; a link navigates. A clickable <div> is neither focusable nor announced correctly
5. 5
   What is the default type of a <button> inside a form?
   submit; use type="button" for buttons that shouldn’t submit
6. 6
   Connect a label to an input
   html

   <label for="email">Email</label>
   <input id="email" type="email" />

   Wrapping the input inside the <label> works too.
7. 7
   What should alt contain?
   A description of what the image conveys; use alt="" for purely decorative images
8. 8
   The first rule of ARIA
   Use a native HTML element with the behavior you need before adding ARIA roles or attributes
9. 9
   aria-label vs aria-labelledby
   aria-label gives a text label directly; aria-labelledby points to the ID of visible text that labels the element
10. 10
    What does aria-live="polite" do?
    Screen readers announce changes inside the element when the user is idle
11. 11
    tabindex="0" vs tabindex="-1"
    0 adds the element to the Tab order; -1 makes it focusable only from script. Avoid positive values
12. 12
    The CSS box model, inside out
    Content, padding, border, margin
13. 13
    What does box-sizing: border-box change?
    width and height include padding and border, so adding padding doesn’t grow the box
14. 14
    What is margin collapsing?
    Adjacent vertical margins of block elements merge into the larger one; it doesn’t happen between flex or grid items
15. 15
    Specificity order, highest first
    Inline styles › IDs › classes, attributes and pseudo-classes › elements and pseudo-elements
16. 16
    Specificity of #nav .item a
    (1, 1, 1): one ID, one class, one element
17. 17
    How do cascade layers decide which rule wins?
    Later layers beat earlier ones regardless of specificity, and unlayered styles beat all layers

    css

    @layer reset, base, components;
    @layer base { a { color: blue } }

18. 18
    :is() vs :where()
    Both match any selector in their list; :where() has zero specificity, :is() takes its most specific argument
19. 19
    What does :has() select?
    An element that contains (or is followed by) a match, e.g. .card:has(img) is a card with an image
20. 20
    :focus vs :focus-visible
    :focus-visible only matches when the browser would show a focus ring, typically for keyboard users, not mouse clicks
21. 21
    Flexbox vs grid
    Flexbox lays out items along one axis; grid lays out rows and columns at the same time
22. 22
    Center a child horizontally and vertically
    css

    .parent {
      display: grid;
      place-items: center;
    }

    With flexbox: justify-content: center; align-items: center;.
23. 23
    What is flex: 1 short for?
    flex-grow: 1; flex-shrink: 1; flex-basis: 0
24. 24
    In a flex row, what do justify-content and align-items control?
    justify-content the main (horizontal) axis; align-items the cross (vertical) axis
25. 25
    What does gap do?
    Adds space between flex or grid items without margins on the outer edges
26. 26
    What is the fr unit?
    A share of the free space in a grid container

    css

    grid-template-columns: 200px 1fr 2fr;

27. 27
    A responsive card grid without media queries
    css

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

28. 28
    auto-fill vs auto-fit
    auto-fill keeps empty tracks; auto-fit collapses them so the items stretch to fill the row
29. 29
    What is an absolutely positioned element positioned against?
    Its nearest ancestor with a position other than static (or the initial containing block)
30. 30
    Why might position: sticky do nothing?
    It sticks within its nearest scrolling ancestor; an ancestor with overflow: hidden or auto becomes that scroller
31. 31
    When is a position: fixed element not fixed to the viewport?
    When an ancestor has transform, filter, backdrop-filter or perspective; that ancestor becomes its containing block
32. 32
    Why doesn’t z-index: 9999 bring my element to the front?
    z-index only competes inside one stacking context; if an ancestor forms a context, the element can’t rise above that ancestor’s siblings
33. 33
    What creates a stacking context?
    For example: a positioned element with a z-index, position: fixed or sticky, opacity below 1, transform, filter, isolation: isolate
34. 34
    What does isolation: isolate do?
    Creates a new stacking context and nothing else, to contain z-indexes inside a component
35. 35
    Does z-index work on a position: static element?
    No, except on flex and grid items
36. 36
    What is the top layer?
    Where modal <dialog>s (showModal()) and popovers render: above everything, whatever the z-index
37. 37
    rem vs em
    rem is relative to the root font size; em to the element’s own font size (the parent’s, for font-size itself)
38. 38
    100vh vs 100dvh on phones
    vh uses the largest viewport and ignores the browser’s toolbars; dvh follows the visible area as toolbars appear and hide

    svh and lvh are the smallest and largest viewport sizes.
39. 39
    Media query with range syntax
    css

    @media (width >= 768px) {
      .sidebar { display: block; }
    }

40. 40
    Container query
    Style an element by the size of its container instead of the viewport

    css

    .list { container-type: inline-size; }
    
    @container (min-width: 400px) {
      .card { display: grid; }
    }

41. 41
    Custom property with a fallback
    css

    :root { --accent: #c6f432; }
    .btn { background: var(--accent, gold); }

    Custom properties inherit and can change at runtime.
42. 42
    What are logical properties?
    Direction-aware properties like margin-inline-start and padding-block that follow the writing direction (left-to-right or right-to-left)
43. 43
    transition vs animation
    A transition animates between two states when a property changes; an animation runs @keyframes and can start on its own and loop
44. 44
    Respect users who prefer less motion
    css

    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after {
        animation: none !important;
        transition: none !important;
      }
    }

45. 45
    Which properties animate most smoothly?
    transform and opacity; they can run on the compositor without recalculating layout
46. 46
    What does color-scheme: light dark do?
    Declares that the page supports both themes, so form controls, scrollbars and light-dark() follow the user’s setting
47. 47
    What does light-dark() do?
    Picks the first color in a light color scheme and the second in a dark one

    css

    :root { color-scheme: light dark; }
    body { color: light-dark(#111, #eee); }

48. 48
    What does aspect-ratio do?
    Keeps a box’s width-to-height ratio

    css

    .thumb { aspect-ratio: 16 / 9; width: 100%; }

49. 49
    Clamp a font size between a minimum and maximum
    css

    h1 { font-size: clamp(1.75rem, 4vw, 3rem); }

50. 50
    Visually hide text but keep it for screen readers
    Clip it to 1 px and position it absolutely (an “sr-only” class); display: none would hide it from screen readers too