CSS Complete Course
Style and lay out modern websites, from your first rule to cascade layers, Grid and scroll-driven animation.
- Beginner
- 34 lessons
- 16 hours
Style and lay out modern websites, from your first rule to cascade layers, Grid and scroll-driven animation.
How display changes layout behaviour, and a first look at flex and grid values.
Move, scale and rotate elements with transforms, the individual transform properties, and transform-origin.
Font families and fallbacks, size, weight, line height, letter spacing and text alignment for readable text.
Handle content that does not fit, truncate text, build scroll-snapping carousels, and control scroll behaviour.
Background colours and images, gradients, borders, radius and box shadows.
Organise CSS into layers so resets, frameworks and components stop fighting over specificity.
Lay out items in a row or column with display: flex, direction, gap and basic alignment.
The parent selector :has(), and :is() and :where() for shorter selectors with controlled specificity.
Descendant, child and sibling combinators, and selecting by attribute value.
Style states like :hover, :focus-visible and :checked, positions like :nth-child, and generated content with ::before and ::after.
justify-content, align-items, wrapping, and how flex-grow, flex-shrink and flex-basis share space.
Two-dimensional layout with grid-template-columns, rows, the fr unit, gap and placing items.
What CSS does and the three ways to add it to a page: inline, internal and external stylesheets.
Describe page layouts visually with grid-template-areas, and rearrange them at different widths.