📄️ Introduction
What CSS is, how it works with HTML, the three ways to add styles, the anatomy of a CSS rule, writing your first stylesheet, and a quick look at browser DevTools.
📄️ Selectors
How CSS targets HTML elements -- element, class, ID, universal, grouping, descendant, child, sibling, and attribute selectors.
📄️ Box Model
How browsers calculate element sizes using the CSS box model -- content, padding, border, margin, box-sizing, and debugging with DevTools.
📄️ Colors & Typography
CSS colour formats (named, hex, rgb, hsl), opacity, font properties, text styling, web-safe fonts, and loading Google Fonts.
📄️ Units & Sizing
CSS length units -- px, em, rem, percentages, viewport units, and when to use each one for font sizes, spacing, and layout.
📄️ Display & Positioning
How CSS display modes (block, inline, inline-block) and positioning (static, relative, absolute, fixed, sticky) control element flow and placement.
📄️ Flexbox
CSS Flexbox layout -- flex containers and items, direction, wrapping, alignment, sizing with flex-grow/shrink/basis, gap, and common patterns.
📄️ CSS Grid
CSS Grid layout -- defining rows and columns, the fr unit, grid areas, gap, auto-fit/auto-fill, minmax(), and implicit vs explicit grids.
📄️ Responsive Design
Building layouts that work on every screen size -- the viewport meta tag, media queries, mobile-first development, breakpoints, responsive images, and fluid typography.
📄️ Backgrounds & Shadows
CSS background images, gradients, background shorthand, border-radius for rounded corners, box-shadow, text-shadow, and multiple backgrounds.
📄️ Transitions & Animations
CSS transitions for smooth state changes, transform functions (translate, rotate, scale, skew), keyframe animations, timing functions, and performance tips.
📄️ Pseudo-classes & Elements
CSS pseudo-classes for targeting element states (:hover, :focus, :nth-child) and pseudo-elements for creating virtual content (::before, ::after).
📄️ Custom Properties
CSS custom properties (variables) -- defining, using, scoping, fallback values, theming, building a dark mode toggle, and dynamic updates with JavaScript.
📄️ Specificity & Cascade
How CSS decides which rule wins -- the cascade algorithm, specificity calculation, inheritance, the !important keyword, and cascade layers.
📄️ Modern CSS
Recent CSS additions -- native nesting, the :has() selector, container queries, @layer, logical properties, color-mix(), accent-color, and subgrid.
📄️ Architecture
Organising CSS for maintainability -- BEM naming, file structure, CSS resets vs normalisers, utility classes, component-scoped styles, and preprocessor overview.
📄️ Debugging
Using browser DevTools to debug CSS, understanding margin collapse, overflow issues, centring gotchas, z-index problems, and cross-browser testing.
📄️ Practice Projects
Six hands-on CSS projects from beginner to advanced -- personal profile card, navigation bar, photo gallery, landing page, dashboard layout, and CSS art.