CSS Foundations: Selectors, Colours, Text & the Box Model
Style a fictional bakery website from the first rule to a finished product card: selectors, the cascade, specificity, colours, units, typography, the box model, backgrounds, display and position, with every answer checked as you go.
- One-time payment
- Instant access right after payment
- Secure checkout with Stripe
About this course
Style a fictional bakery website from its first rule to a finished product card. In 21 interactive labs you read real CSS and work out what the browser does: which elements a selector hits, which declaration wins the cascade, how specificity is scored, how hex colours and contrast ratios are calculated, how px, em, rem, vw and clamp() turn into pixels, and how wide a box really is with content-box or border-box. You also handle margin collapsing, background cover and contain, display and position. Every answer is checked instantly, and a final exam earns your certificate.
Lessons
- How CSS Works: Rules, Selectors and DeclarationsFree
- Type, Class, ID and Universal Selectors Locked
- Combinators: Descendant, Child and Sibling Selectors Locked
- Pseudo-classes: :hover, :first-child and :nth-child Locked
- The Cascade: Source Order and !important Locked
- Specificity: Which Selector Wins? Locked
- Inheritance and Computed Values Locked
- Colours: Hex, rgb() and Transparency Locked
- Colour Contrast: Readable Text Locked
- Units: px, em, rem and % Locked
- Viewport Units, Percentages and clamp() Locked
- Typography: Type Scale, Line Height and Line Length Locked
- The Box Model: Content, Padding, Border, Margin Locked
- Margin and Padding Shorthand: 1 to 4 Values Locked
- box-sizing: border-box and Why Everyone Uses It Locked
- Margin Collapsing Between Blocks Locked
- Backgrounds: Images, cover, contain and Position Locked
- display: block, inline, inline-block and none Locked
- Position: relative, absolute, fixed and z-index Locked
- min-width, max-width and overflow Locked
- Project: The Maple & Moss Product Card Locked