CSS is the language that makes the web look like anything at all. HTML gives a page structure; CSS makes that structure beautiful, responsive, on-brand, and good at its job. Five years in, I still think CSS is the most underrated language we have.
This is the introduction I wish I had been handed in 2020. We will cover what CSS is, the four ideas you actually need to memorize, and the kinds of problems each one solves. By the end you will have enough to start styling real pages.
01What is CSS?
CSS stands for Cascading Style Sheets. It is a language for telling the browser how HTML elements should look — colors, fonts, sizes, spacing, layout, animation. CSS is a set of rules; each rule says “for elements that match this selector, apply these properties.”
h1 {
color: #2a4dff;
font-size: 48px;
}That rule says “every h1 should be cobalt blue and 48 pixels tall”. The thing before the curly braces is the selector; what is inside is a list of declarations.
02Three ways to add CSS to a page
- External stylesheet — write CSS in its own
.cssfile and link to it. This is the right answer 95% of the time. - Internal <style> block — write CSS inside a
<style>tag in the document<head>. Fine for single-file demos. - Inline styles — write CSS directly on an element via the
styleattribute. Use sparingly; it makes maintenance hard.
03Selectors that pay rent
There are dozens of CSS selectors. You need about six of them every day:
tag— every element of that type.p,h1,a..class— every element with that class..btn,.card.#id— the one element with that id. Rare in practice.parent child— descendant.nav amatches every link inside anav.:hover,:focus,:active— state selectors.[attr="value"]— attribute selectors.input[type="email"].
04The box model
Every element on a page is a rectangle. Each rectangle has four layers, outer to inner: margin (space outside), border (visible edge), padding (space inside), content (the actual stuff).
One quality-of-life setting will save you headaches forever:
*, *::before, *::after {
box-sizing: border-box;
}This makes width and height include padding and border — the way you would intuit they would. Put it at the top of every stylesheet you ever write.
05The cascade & specificity
When two rules target the same element, which one wins? CSS answers this with two concepts:
- Specificity — more-specific selectors beat less-specific ones.
#idbeats.classbeatstag. - Source order — if specificity ties, the last rule in the file wins.
That is it. The whole cascade in two lines.
06Layout: flex & grid
For years, CSS layout meant floats and clearfixes. Today there are two tools you will reach for constantly.
Flexbox — one-dimensional
.nav {
display: flex;
gap: 16px;
align-items: center;
}Grid — two-dimensional
.cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}07Units & the rule of thumb
px— pixels. Fine for borders, shadows, fine details.rem— relative to the root font size. Use for font sizes and most spacing.%— relative to the parent. Useful for widths.vw/vh— % of viewport. Useful for hero sections.
rem for anything text-related, % or fr for layout, px for hairlines. You will be right 90% of the time.08What to learn next
- Responsive design — making layouts adapt to screen size. Read my breakpoints guide →
- CSS variables & custom properties — the foundation of design tokens.
- A real methodology — once your stylesheets get big, you will want one. Why I use CUBE CSS →
Open up a project. Style something. Get stuck. Go to MDN. Repeat. That is the whole loop.