CSS

What is CSS?

Meet CSS, the language that makes HTML look good, and write your first style rule.

6 minFree preview

Selectors

Target elements by tag, class and id, and style groups of elements at once.

7 minFree preview

Colours and fonts

Set text colour, backgrounds, font family, size and weight.

7 min Account

The box model

Understand content, padding, border and margin, the four layers around every element.

8 min Account

Flexbox

Line up and space out elements in a row or column with display flex.

9 min Account

Grid

Two-dimensional layouts with rows and columns using display grid.

9 min Account

Responsive design

Make layouts adapt to phones, tablets and desktops using media queries and flexible units.

9 min Account

Transitions

Smooth changes between states, such as hover and focus, with the transition property.

7 min Account

Positioning

relative, absolute, fixed and sticky explained, with the offset properties top, right, bottom and left.

9 min Account

Custom properties

Reusable values with CSS variables, and how they make themes easy.

8 min Account

Animations

Keyframe animations that run on their own: @keyframes, duration, iteration and fill mode.

8 min Account

Modern layout patterns

Cards, sidebars and the holy-grail page layout using flexbox and grid together.

9 min Account