CSS tutorial for beginners, by example

Last updated: October 12, 2026By Lukas Brandt3 min read

This course teaches CSS by building two small things, a few lines at a time. Each project starts from plain HTML that looks like the browser's defaults and ends with a complete, working style you can reuse. Every lesson adds to the code from the lesson before, explains what the browser does with each new line, and finishes with something to try.

It assumes you know basic HTML: what a tag is, how attributes work, and how to save a file and open it in a browser. You do not need to know any CSS yet.

What you need

A text editor. Anything that saves plain text will do: Notepad on Windows, TextEdit on a Mac switched to plain text mode, or a code editor such as Visual Studio Code.
A current browser such as Chrome, Edge, Firefox or Safari. Its developer tools (right-click an element, then Inspect) show which CSS rules reached that element, and you will use them often.
Or skip both and use our online HTML editor. You type HTML and CSS on one side and see the result on the other, right in the browser.

How to use the lessons

Go in order. Project 1 builds one file across eleven lessons and Project 2 builds another across ten. Each lesson's code assumes the lines that came before it.
Type the code rather than pasting it when you can. Hunting down a missing semicolon teaches more than reading about one.
Change the values. The "Try it" line at the end of each lesson suggests an experiment. Break things on purpose, then put them back.
Compare with the final code. Each project closes with a lesson that shows the complete file and explains it from top to bottom, so you can find the step where your copy went its own way.

A CSS rule at a glance

.btn {
  padding: 0.75em 1.5em;
}

.btn is the selector: it picks every element whose class attribute contains btn. Inside the braces, padding is the property and 0.75em 1.5em is its value. Nearly everything in this course is a variation on that pattern.

Project 1: a set of buttons

Two links and a <button> in one HTML file, styled with a <style> tag until they look and behave like a matching set, including hover and keyboard focus.

Project 2: a website header with a menu

A page header with a logo and a navigation menu, written in its own stylesheet file. On the way it covers the layout tools a header needs.

Parts links can earn us a commission. As an Amazon Associate I earn from qualifying purchases.

After the course

With both projects done, you can read most stylesheets and know where to look when one misbehaves. The JavaScript tutorial picks up from there, starting with how a script finds and changes the HTML elements you have just learned to style.

All lessons

Adding CSS with the style tag and the class attribute
Start Project 1 by putting a style tag in the page head, giving three buttons a class and writing a first CSS rule that reaches exactly those elements.
The CSS margin property
Add margin to the Project 1 buttons, learn the one to four value shorthand, and see why links ignore top and bottom margin until their display changes.
The CSS padding property
Give the Project 1 buttons inner space with padding in em units, then compare padding and margin side by side so you know which one to reach for.
CSS border properties
Draw a solid border and round the corners of the Project 1 buttons, with a table of border styles and the reason a border without a style never appears.
CSS color and background-color
Color the Project 1 buttons with color and background-color, write one blue in hex, rgb() and hsl(), and check that the button text stays easy to read.
CSS font properties for buttons
Set font-family, font-size, font-weight and line-height on the Project 1 buttons so the links and the button element finally share one font and size.
The CSS text-decoration property
Remove the link underline from the Project 1 buttons with one line of CSS, and learn the four parts of text-decoration for the links you keep underlined.
CSS hover effects for buttons, with focus-visible for keyboards
Make the Project 1 buttons react to the mouse with hover and to the keyboard with focus-visible, add a focus ring, and avoid the usual mistakes.
CSS sizing with min-width, max-width and box-sizing
Give the Project 1 buttons a minimum width, keep them inside narrow screens with max-width, and see how box-sizing changes the arithmetic of every box.
The CSS display property for buttons and links
Switch the Project 1 links to inline-block so width, margin and padding behave, compare inline, inline-block and block, and take a first look at flex.
CSS Project 1 final code for the button set
The complete Project 1 file in one piece, every rule from lessons 1 to 10 explained top to bottom, with a map of which lesson added which line.
HTML div and span tags, and when to use header, nav, main and footer
What div and span do, why they carry no meaning, and when header, nav, main and footer are the better boxes to hang your CSS on.
External stylesheets, or moving your CSS into style.css
How to move CSS out of the style tag into a style.css file, link it with one line, get the path right, and why one shared file loads faster.
CSS selectors, from type and class to child, attribute and specificity
Type, class, id, descendant, child, grouping and attribute selectors in one table, plus specificity explained in plain terms with a worked example.
CSS float and clear: what float does, how to clear it, and where it still fits
How float wraps text around an image, how clear and flow-root contain it, why float menus needed a clearfix, and why flexbox replaced them.
CSS project 2, styling a website header band and logo
Project 2 begins: set up the header HTML and an external style.css, then give the header band a background, padding, a border and a bold logo.
CSS project 2a, turning a list of links into a horizontal menu
Turn the header's bulleted list into a horizontal menu with list-style none, display flex and gap, and see how the older inline-block menu worked.
CSS project 2b, centering the menu links and the logo
Center the Project 2 menu with justify-content and the logo with text-align, and learn which centering tool fits inline text, flex items and blocks.
CSS project 2c: remove the link underline, then add it back on hover
Take the underline off the Project 2 menu links with text-decoration none, then add hover, current page and keyboard focus styles so links stay obvious.
CSS project 2d, moving the menu to the right and stacking it on small screens
Put the logo on the left and the menu on the right with flexbox, then add a small media query that stacks the header on phones. Includes fixes.
CSS project 2 final code, the complete website header with menu
The finished Project 2 header: full index.html and style.css, a walk through how they behave on desktop, phone, mouse and keyboard, and ideas for more.