Unit 6 · Cascading Style Sheets (CSS)

6.7Review Questions

  1. Name the three ways to add CSS. Which is best for a large site, and why?
  2. Rank these by specificity: p, .note, #title, inline style.
  3. What is the difference between :hover and ::before?
  4. What does box-sizing: border-box do?
  5. Write a media query that turns the background grey on screens narrower than 600px.
  6. Which Flexbox property centres items along the main axis? Along the cross axis?
  7. What does col-12 col-md-4 mean in Bootstrap?
Show answers

  1. Inline (style attribute), internal (<style> in the head) and external (a .css file linked with <link rel='stylesheet'>). External is best for a large site: one file styles every page, so a change is made once; the browser caches it so pages load faster; and content (HTML) stays separate from presentation (CSS).

  2. From highest to lowest: inline style (1,0,0,0) → **#title (ID, 0,1,0,0) → .note (class, 0,0,1,0) → p** (element, 0,0,0,1). !important overrides all of these, but avoid it.

  3. :hover is a pseudo-class: it selects an existing element when it is in a certain *state* (the mouse is over it). ::before is a pseudo-element: it creates a virtual *part* (generated content) as the first child of the element, and it needs a content property to appear.

  4. It makes width and height include the padding and border. With the default content-box, a width: 300px box with 20px padding and a 2px border is actually 344px wide; with border-box it stays 300px, which makes layouts much easier to calculate.

  5. CSS
    @media (max-width: 599.98px) {
  body { background: grey; }
}

    max-width: 600px is also accepted in exams; it includes exactly 600px as well.

  6. justify-content: center centres items along the main axis (horizontal for flex-direction: row). align-items: center centres them along the cross axis (vertical for a row). Both are set on the flex container.

  7. The element takes all 12 columns (full width) on extra-small and small screens, and 4 of 12 columns (one third of the row) from the md breakpoint (768px) and wider. Three such columns sit side by side on a tablet or desktop and stack on a phone.