Frontend Web Development CSS & Styling Syllabus

CSS & Styling syllabus — full chapter and topic list

Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for CSS & Styling in Frontend Web Development, not a summary of it.

1. 1

   CSS Fundamentals

   5 topics

   • Selectors & Specificity
   • The Cascade & Inheritance
   • Colors, Units & Values
   • Typography & Web Fonts
   • Backgrounds & Borders
2. 2

   The Box Model & Layout

   4 topics

   • Box Model & box-sizing
   • Display & Positioning
   • Margins, Padding & Collapsing
   • Overflow & Z-index
3. 3

   Flexbox & Grid

   4 topics

   • Flexbox Container & Items
   • CSS Grid Tracks & Areas
   • Gap, Alignment & Ordering
   • Choosing Flexbox vs Grid
4. 4

   Responsive Design

   4 topics

   • Mobile-First Strategy
   • Media Queries & Breakpoints
   • Fluid Layouts & Relative Units
   • Container Queries
5. 5

   Transitions, Animations & Effects

   4 topics

   • Transitions & Timing Functions
   • Keyframe Animations
   • Transforms (2D & 3D)
   • Filters, Gradients & Shadows
6. 6

   Modern CSS Architecture

   5 topics

   • Custom Properties (CSS Variables)
   • Naming Conventions (BEM)
   • CSS Preprocessors (Sass)
   • Utility-First CSS (Tailwind)
   • CSS Modules & CSS-in-JS

CSS & Styling flashcards for Frontend Web Development

21 of 63 cards from the CSS & Styling deck — real questions with worked answers.

1. In CSS, what does a selector's specificity measure, and how is it commonly represented?

   Specificity is the weight a browser assigns to a selector to decide which rule wins when several target the same element. It is represented as a three-part value $(a, b, c)$: $a$ = number of ID selectors, $b$ = number of class/attribute/pseudo-class selectors, $c$ = number of type/element and pseudo-element selectors.

2. Rank these selector categories from highest to lowest specificity: element selectors, inline styles, ID selectors, class selectors.

   Inline styles (highest) > ID selectors > class selectors (including attribute selectors and pseudo-classes) > element/type selectors (lowest). The universal selector $*$ adds no specificity.

3. What is the specificity of the selector `#nav .item a:hover` expressed as $(a,b,c)$?

   $(1, 2, 1)$: one ID (`#nav`), two class/pseudo-class selectors (`.item` and `:hover`), and one type selector (`a`).

4. How does the `!important` flag interact with normal specificity in the cascade?

   `!important` overrides normal declarations regardless of specificity. Among competing `!important` declarations, normal specificity and source order break the tie. It effectively creates a higher-priority layer above regular author declarations.

5. What are the two selectors that carry zero specificity, and why are they useful?

   The universal selector `*` and the `:where()` pseudo-class both contribute zero specificity. They let you write low-priority defaults that are easy to override, unlike `:is()`, which takes the specificity of its most specific argument.

6. Define 'the cascade' in CSS and list its ordering criteria.

   The cascade is the algorithm that resolves conflicting declarations for an element. It sorts by: (1) origin and importance (user agent, user, author; and whether `!important`), (2) specificity, then (3) source order — later rules win among equal specificity.

7. Which CSS properties are inherited by default, and which are not?

   Text-related properties (e.g. `color`, `font-family`, `font-size`, `line-height`, `visibility`, `list-style`) inherit by default. Box/layout properties (e.g. `margin`, `padding`, `border`, `width`, `background`) do not inherit.

8. What do the CSS keywords `inherit`, `initial`, `unset`, and `revert` each do?

   `inherit` takes the parent's computed value; `initial` sets the property's spec-defined default; `unset` acts as `inherit` for inherited properties and `initial` otherwise; `revert` rolls back to the value from the previous cascade origin (e.g. the user-agent stylesheet).

9. How does source order act as a tiebreaker in the cascade?

   When two declarations have the same origin, importance, and specificity, the one that appears later in the source (or in a later-loaded stylesheet) wins.

10. List four common ways to specify a color in CSS and give an example of each.

    Named keyword (`red`), hexadecimal (`#ff0000` or shorthand `#f00`), RGB/RGBA (`rgb(255 0 0 / 0.5)`), and HSL/HSLA (`hsl(0 100% 50%)`). Modern CSS also adds `hwb()`, `lab()`, `lch()`, and `oklch()`.

11. Distinguish absolute length units from relative length units in CSS, with examples.

    Absolute units have fixed physical size regardless of context: `px`, `pt`, `cm`, `in`. Relative units scale to something else: `em` (relative to element's font size), `rem` (root font size), `%`, `vw`/`vh` (viewport), `ch`, `ex`.

12. What is the difference between the `em` and `rem` units?

    `em` is relative to the font size of the current element (or the parent for `font-size` itself), so it compounds through nesting. `rem` is always relative to the root (`<html>`) font size, avoiding compounding.

13. If the root font size is $16\text{px}$ and an element is set to `font-size: 1.5rem`, what is its pixel size?

    $1.5 \times 16\text{px} = 24\text{px}$.

14. What do the viewport units `vw`, `vh`, `vmin`, and `vmax` represent?

    $1\text{vw} = 1\%$ of viewport width; $1\text{vh} = 1\%$ of viewport height; `vmin` = $1\%$ of the smaller viewport dimension; `vmax` = $1\%$ of the larger dimension.

15. What is the difference between a web-safe font and a web font (e.g. via `@font-face`)?

    A web-safe font is pre-installed on most devices (e.g. Arial, Georgia), so no download is needed. A web font is downloaded from a server via `@font-face` or a service like Google Fonts, giving custom typography at the cost of extra network requests.

16. What does the `font-display` descriptor control, and what does `swap` do?

    `font-display` controls how text renders while a web font loads. `swap` shows fallback text immediately (avoiding invisible text/FOIT) and swaps to the web font once loaded, at the cost of a possible flash of unstyled text (FOUT).

17. In the `font` shorthand, which sub-properties are mandatory?

    `font-size` and `font-family` are mandatory (and must appear last, in that order). Optional leading values are `font-style`, `font-variant`, `font-weight`, and a `line-height` given as `font-size/line-height`.

18. What is the difference between `line-height` set as a unitless number versus a length like `px`?

    A unitless `line-height` (e.g. `1.5`) is inherited as a factor, so children multiply it by their own font size. A length or percentage computes a fixed value on the parent that children inherit directly, which can break spacing at different font sizes.

19. In the `background` shorthand, what does the syntax `background: url(bg.png) no-repeat center / cover` mean?

    It sets `background-image` to `bg.png`, `background-repeat` to `no-repeat`, `background-position` to `center`, and (after the slash) `background-size` to `cover`. The slash separates position from size.

20. What is the difference between `background-size: cover` and `background-size: contain`?

    `cover` scales the image to completely fill the container (cropping overflow while preserving aspect ratio). `contain` scales it so the entire image is visible inside the container (possibly leaving empty space), also preserving aspect ratio.

21. In the `border` shorthand, what three values are set and in what conceptual order?

    `border-width`, `border-style`, and `border-color` — e.g. `border: 2px solid #333`. The `border-style` is required for the border to appear; without it the border is not rendered.

See more CSS & Styling flashcards →

Planning CSS & Styling for Frontend Web Development

CSS & Styling (Frontend Web Development) FAQ