arrow left

CSS Basics

VIDEOS

EPISODE 1
What is CSS?
What is CSS and what do we use it for?
EPISODE 2
Three ways to write CSS
The three different ways to write and practice CSS
EPISODE 3
CSS Selectors in 1 Minute
Basic CSS selectors like ELEMENT, CLASS, and ID
EPISODE 4
Colors
How do Colors work in CSS?
EPISODE 5
Colors (DEMO)
Live Coding: CSS Colors
EPISODE 6
Absolute Sizes
What is Absolute sizing in CSS and when to use it?
EPISODE 7
Relative Sizes
What are relative sizes in CSS and when are they used?
EPISODE 8
EM & REM
The two most commonly used relative sizing metrics in CSS
EPISODE 9
Sizing (DEMO)
Live Coding: CSS Sizing
EPISODE 10
CSS Box Model
The most important foundation of every HTML element: Box Model
EPISODE 11
Box Model (DEMO)
Live Coding: Box Model
EPISODE 12
Fonts
How to use system and custom Fonts in CSS
EPISODE 13
Fonts (DEMO)
Live Coding: CSS Fonts

Last Updated: May 2, 2025

Sizing (DEMO)

Live Coding: CSS Sizing

Going back to our profile page, we just added colors to it, now we’re about to blow this up using proper sizing for our fonts and the rest of the UI elements, this page is about to get a little nicer.

Be sure to try these sizing techniques for yourself. Use px, em and rem so you really understand the differences...