CSS Notes
14 chapters · Beginner to Advanced · Always free
Course Outline
14 chapters planned. Full lesson notes being written now.
Introduction to CSS
What CSS is, how the cascade works, and three ways to apply styles.
CSS Selectors
Element, class, ID, attribute, pseudo-class, pseudo-element and combinator selectors.
Colors & Backgrounds
Named colours, hex, RGB, HSL, gradients, background images and blur.
Typography
Font families, sizes, weights, line height, letter spacing and Google Fonts.
The Box Model
Content, padding, border, margin and the critical box-sizing property.
Display & Positioning
Block, inline, inline-block, and position relative, absolute, fixed, sticky.
CSS Flexbox
One-dimensional layouts with Flexbox: container and item properties.
CSS Grid
Two-dimensional layouts with Grid: template areas, tracks, gaps and named lines.
CSS Transitions
Animating property changes with transition-property, duration, timing and delay.
CSS Animations
Keyframe animations with @keyframes, animation shorthand and infinite loops.
Responsive Design
Media queries, viewport units, fluid typography and the mobile-first approach.
CSS Variables (Custom Properties)
Declaring and using CSS custom properties for consistent theming.
Modern CSS Features
CSS nesting, :is()/:where()/:has(), logical properties and cascade layers.
Mini Project: Card Component
Style a complete responsive card component using modern CSS techniques.