Tool
CSS
Style, layout, and visual design for the web
Learn CSS from the ground up — colors, text, selectors and specificity, the box model, positioning, units, Flexbox, Grid, responsive design, effects, animations, and variables — then build fast with the W3.CSS framework.
19
Chapters
49
Hours (estimated)
1
Self-paced
Part-time
About 17 weeks
1 hour a day, 3 days a week
Full-time
About 6 weeks
3 hours a day, 3 days a week
Estimated from 19 chapters (notes, practice, labs, quiz, exercise, and challenge) plus the final exam. Go at your own pace.
Curriculum
19 chapters, each with a tutorial, a live example, a quiz, an exercise, a challenge, and class practice.
- 1
Introduction to CSS
Selectors, properties, and how styles apply.
- 2
Colors & Backgrounds
Color names, HEX, RGB, HSL, transparency, background images, and gradients.
- 3
Text & Fonts
Font families, sizes, weights, web fonts, alignment, spacing, and text decoration.
- 4
Selectors & Specificity
Combinators, attribute selectors, pseudo-classes, pseudo-elements, specificity, and inheritance.
- 5
The Box Model
Content, padding, border, margin, width and height, box-sizing, and outlines.
- 6
Display & Positioning
Block, inline, and inline-block, hiding elements, position, z-index, overflow, and float.
- 7
Units & CSS Functions
Absolute and relative units, rem vs em, viewport units, calc(), min(), max(), and clamp().
- 8
Flexbox
One-dimensional layout: flex containers, direction, wrapping, alignment, gap, and growing and shrinking items.
- 9
CSS Grid
Two-dimensional layout: grid tracks, fr units, repeat(), placing items, named areas, and auto-fit.
- 10
Responsive Design
The viewport meta tag, media queries, mobile-first CSS, breakpoints, responsive images, and container queries.
- 11
Links, Lists, Tables & Forms
Styling link states, lists, navigation bars, tables, form controls, and buttons.
- 12
Effects & Transforms
Rounded corners, shadows, filters, object-fit, 2D and 3D transforms.
- 13
Transitions & Animations
Smooth state changes with transition, keyframe animations, timing functions, and reduced motion.
- 14
CSS Variables & Best Practices
Custom properties, theming and dark mode, @property, organization, accessibility, and performance.
- 15
W3.CSS: Getting Started
What a CSS framework is, adding W3.CSS, containers, panels, cards, borders, padding, margins, and rounding.
- 16
W3.CSS: Colors, Text & Themes
Color and hover classes, text and font-size classes, notes, quotes, alerts, color themes, and dark mode.
- 17
W3.CSS: Responsive Layout
The 12-column grid, rows and columns, halves, thirds, and quarters, cells, flex and grid classes, and hiding by screen size.
- 18
W3.CSS: Buttons, Bars & Forms
Buttons, navigation bars, dropdowns, sidebars, tabs, accordions, tables, lists, inputs, badges, and tags.
- 19
W3.CSS: Images, Effects & Widgets
Images, display containers, animations, effects, modals, progress bars, tooltips, slideshows, and building a full page.
CSS is free to study, self-paced. Pass the final exam to earn an optional Certificate of Completion for $40.