CSS & Styling
Checking access...
CSS (Cascading Style Sheets) transforms raw HTML into visually engaging web pages. This module covers everything from basic selectors to modern layout systems and animations.
Module Pages
| Page | What You’ll Learn |
|---|---|
| CSS Fundamentals & Selectors | How CSS works, selectors (class, ID, attribute, combinators), specificity, the cascade |
| Colors, Typography & Units | Color systems (hex, rgb, hsl), fonts, Google Fonts, text styling, CSS units (px, em, rem, %) |
| The Box Model | Content, padding, border, margin, box-sizing, display types (block, inline, inline-block) |
| Flexbox Layout | Flex direction, alignment, wrapping, ordering, building navigation bars and card layouts |
| CSS Grid Layout | Grid containers, explicit/implicit grids, grid areas, responsive grid patterns |
| Responsive Design | Media queries, mobile-first approach, responsive images, viewport meta tag |
| Positioning & Stacking | Static, relative, absolute, fixed, sticky positioning, z-index context |
| Animations & Transitions | CSS transitions, keyframe animations, transform, easing functions, performance considerations |
| Modern CSS Features | Custom properties (variables), container queries, nesting, layers, :has() selector |
| Project: Responsive Landing Page | Build a complete responsive landing page with all CSS techniques |
Key Takeaways
By the end of this module, you’ll be able to create responsive, visually polished web layouts using Flexbox and Grid, style text and colors professionally, add motion with animations, and use modern CSS features for cleaner stylesheets.