CSS tutorial
Style your pages with colour, spacing and layout
About this tutorial
CSS controls how HTML looks: colours, fonts, spacing and layout. In this beginner class you learn selectors, colours, text, the box model, Flexbox, Grid and responsive design, then style the profile page you built in the HTML class.
Every lesson has live examples, an exercise and a short quiz. Finish with the final quiz.
Lessons
CSS basics
- Adding style to a pageWhat CSS is, how a rule is written, and the three ways to add CSS to a page.
- Selectors in depthTarget exactly the elements you want with type, class, id, group, descendant and pseudo-class selectors.
- Colours and backgroundsWrite colours as names, hex, rgb and hsl, and use background colours, images and gradients.
Text and boxes
- Fonts and textChoose fonts, sizes, weights, line spacing and alignment for readable text.
- The box modelContent, padding, border and margin: how every element takes up space.
- Borders, shadows and rounded cornersFinish boxes with borders, border-radius, box-shadow and outlines.
- Units and sizingChoose between px, %, em, rem, vw and vh, and control size with min and max.
Layout
- Display and positioningUnderstand block, inline and inline-block, and move elements with relative, absolute, fixed and sticky positioning.
- FlexboxLine items up in a row or column, space them out and centre them with Flexbox.
- CSS GridBuild two-dimensional layouts and card grids with rows and columns.
- Responsive design and media queriesMake pages work on phones, tablets and laptops with fluid layouts and media queries.
Polish and project
- Transitions, transforms and hover effectsAdd smooth, subtle movement with transition, transform and simple animations.
- Project: style your profile pageUse everything from the class to turn the HTML profile page into a polished, responsive site.
- CSS final quizTwelve questions covering the whole CSS beginner class. Score yourself before moving on to JavaScript.