explore CSS properties by topic

Select any collection below and we’ll show you step-by-step how to use the property, with video explanation, tips on how to use each property and practical examples you can code for yourself.

Backgrounds lets you change the background

Borders lets you style borders

Flex And Grid lets you build more flexible layouts

Layout Basics basic properties for size and display

Negative Space lets you change the space in and around an element

Positioning lets you nudge and move elements

Typography lets you style text elements

see the full list of CSS properties

Backgrounds

background-attachment background-clip background-color background-image background-origin background-position background-repeat background-size background

Borders

border-collapse border-color border-radius border-style border-width border

Flex And Grid

align-content align-items align-self flex-basis flex-direction flex-grow flex-shrink flex-wrap flex grid-area grid-column grid-gap grid-row grid-template grid justify-content order

Layout Basics

box-sizing column-gap columns display float height max-height max-width min-height min-width overflow width

Positioning

position top, bottom, left & right z-index

color font-family font-size font-style font-weight font letter-spacing line-height list-style text-align text-decoration text-indent text-overflow text-shadow text-transform vertical-align word-spacing

a free video guide to learn CSS

CSS, shorthand for Cascading Style Sheets, is the coding language that makes the web beautiful. It's how we style every element on a website (including this one) and take it from a boring page of black text on a white background and turn it into a visual masterpeice.

This guide is going to help you understand every single CSS property we have at our disposal, but if you've never written a line of CSS code before then let's start at the beginning with a beginner-friendly intro to CSS.

Beginners Guide to CSS >