Examius
🌍 Front-end Web Development · subject
Front-end Web Development CSS Syllabus
Every chapter and topic of CSS examined in Front-end Web Development — 3 chapters, 9 topics, plus 50 flashcards written against it.
CSS syllabus — full chapter and topic list
Expand any chapter to see its topics and sub-topics. This is the whole examinable outline for CSS in Front-end Web Development, not a summary of it.
-
Basics
3 topics- CSS Syntax
- Selectors
- Box Model
-
Layout
3 topics- Flexbox
- Grid
- Positioning
-
Advanced
3 topics- Animations
- Transitions
- Responsive Design
CSS flashcards for Front-end Web Development
18 of 50 cards from the CSS deck — real questions with worked answers.
What is the basic syntax structure of a CSS rule?
A CSS rule consists of a selector followed by a declaration block: `selector { property: value; }`. Each declaration pairs a property with a value, separated by a colon and terminated by a semicolon.
In CSS, what are the three ways to apply styles to an HTML document?
Inline styles (the `style` attribute on an element), internal/embedded styles (a `<style>` block in the `<head>`), and external styles (a separate `.css` file linked with `<link rel="stylesheet">`).
How do you write a comment in CSS?
With `/* comment */`. CSS has no single-line comment syntax; all comments use the `/* ... */` delimiters.
What does the universal selector `*` match, and how do you select an element by its type?
The universal selector `*` matches every element. A type (element) selector such as `p` matches all elements of that tag name.
How do you select elements by class versus by ID in CSS?
A class selector uses a dot: `.classname`. An ID selector uses a hash: `#idname`. Classes can apply to many elements; an ID should be unique per page.
What is the difference between the descendant combinator and the child combinator?
The descendant combinator (a space, e.g. `div p`) selects all `p` elements nested anywhere inside a `div`. The child combinator (`div > p`) selects only `p` elements that are direct children of a `div`.
What do the adjacent sibling (`+`) and general sibling (`~`) combinators select?
`A + B` selects the first `B` element immediately preceded by an `A` sibling. `A ~ B` selects every `B` element that is a later sibling of an `A`, sharing the same parent.
What is the difference between a pseudo-class and a pseudo-element?
A pseudo-class (single colon, e.g. `:hover`, `:nth-child()`) targets an element in a particular state or position. A pseudo-element (double colon, e.g. `::before`, `::first-line`) styles a specific part of an element or inserts generated content.
How is CSS specificity calculated, and which selector type wins?
Specificity is a tuple of (inline, IDs, classes/attributes/pseudo-classes, type/pseudo-elements). Inline styles are highest, then ID selectors, then classes/attributes/pseudo-classes, then element/pseudo-element selectors. A higher count in a more significant category wins regardless of lower categories.
What is the order of the cascade when determining which CSS declaration applies?
The cascade resolves in order: importance (including `!important`), then specificity, then source order (the last matching rule of equal specificity wins).
What are the four components of the CSS box model, from inside to outside?
Content, padding, border, and margin. The content holds text/children, padding is space inside the border, the border surrounds the padding, and the margin is transparent space outside the border.
With `box-sizing: content-box`, what is the total rendered width of an element?
The width property applies to the content only, so total width is $$\text{total width} = \text{width} + 2 \times \text{padding} + 2 \times \text{border}$$ (margins add extra space outside but are not part of the box's rendered size).
How does `box-sizing: border-box` change width calculation compared to the default?
With `border-box`, the declared `width` includes content, padding, and border, so padding and border shrink the content area rather than adding to the total size. The element's rendered width equals the declared width.
What is margin collapsing in the CSS box model?
When two vertical margins of block-level elements meet, they collapse into a single margin equal to the larger of the two (not their sum). It applies to adjacent siblings and parent/child top/bottom margins, but not to horizontal margins, floats, or flex/grid items.
What is the difference between the `padding` and `margin` shorthand value orders?
Both follow the same clockwise order starting at top: `top right bottom left`. With two values it is `vertical horizontal`; with three values it is `top horizontal bottom`; with four values it is all sides explicitly.
What property turns an element into a flex container, and what does it create?
`display: flex` (or `inline-flex`) makes an element a flex container, establishing a flex formatting context for its direct children (the flex items), which are laid out along a main axis and a cross axis.
What does `flex-direction` control, and what are its values?
It sets the direction of the main axis. Values: `row` (default, left-to-right), `row-reverse`, `column` (top-to-bottom), and `column-reverse`.
What is the difference between `justify-content` and `align-items` in flexbox?
`justify-content` aligns flex items along the main axis (e.g. `flex-start`, `center`, `space-between`, `space-around`, `space-evenly`). `align-items` aligns items along the cross axis (e.g. `stretch`, `center`, `flex-start`, `flex-end`, `baseline`).
Planning CSS for Front-end Web Development
CSS is about 13% of the Front-end Web Development syllabus by topic count — 9 of 68 topics, spread over 3 chapters. At roughly 45 minutes per topic plus 12 minutes per sub-topic, a first pass runs to about 7 hours.
The heaviest chapters are Basics (3 topics), Layout (3 topics), Advanced (3 topics) . Front-load those while your energy is high; the short chapters are better revision filler later.
Work top-down: read the chapter, then tick topics off individually rather than marking the whole chapter done. Sub-topics are where silent gaps hide.
CSS (Front-end Web Development) FAQ
What is in the Front-end Web Development CSS syllabus?
CSS is split into 3 chapters — Basics, Layout and Advanced, containing 9 topics and 0 sub-topics in total.
How is CSS structured in the Front-end Web Development syllabus?
3 chapters. CSS accounts for about 13% of the topics in the whole Front-end Web Development syllabus (9 of 68).
How long should I spend on CSS for Front-end Web Development?
Budget around 7 hours for a first pass through CSS — about 45 minutes per topic plus 12 minutes per sub-topic across its 9 topics. Add revision cycles on top.
Are there flashcards for Front-end Web Development CSS?
Yes — a 50-card CSS deck. Sample cards are printed on this page, and the full deck is free in the Examius app with spaced repetition scheduling.