Command Palette

Search for a command to run...

Hectal
Phase 0Beginner1 of 12 in CSS

Start Here: What CSS Is

What CSS is, how the browser turns rules into pixels, the three ways to add styles, how to read CSS syntax, and how to inspect it in DevTools.

This phase assumes you know a little HTML (the /html course, Phase 0 and 1, is enough) and nothing about CSS. You'll learn what CSS is, what a rule looks like, and what the browser really does with your styles between downloading them and painting pixels on the screen.

Then you'll add CSS to a page in all three possible ways, learn exactly which one wins when they disagree, read CSS syntax the way the browser does (including how it quietly ignores mistakes), and use the browser's DevTools to see every rule that touches an element.

Every example is live: edit the HTML or CSS tab and the preview updates. By the end you'll be able to style a small card from scratch and find out why any style is or isn't applying, which is the skill you'll use in every later phase.

0/4 · 0%
4 topics ~2 h 13 code blocks & diagrams
Start with the first topic
1
0.1

What CSS Is and How the Browser Uses It

CSS is a list of rules that say which elements to style and how; the browser matches every rule to the page, settles conflicts with the cascade, then lays out and paints the result.

26 min 1 diagram 3 code practice

2
0.2

Three Ways to Add CSS

CSS can go in a style attribute on one element, in a <style> element in the page, or in a separate .css file linked with <link rel="stylesheet">; external files are the normal choice, and when they conflict, inline styles beat rules, and between rules the more specific, then the later, wins.

26 min 3 code practice

3
0.3

CSS Syntax

A CSS rule is a selector followed by a block of property: value; declarations in curly braces; comments use /* */, and anything the browser can't understand is skipped silently instead of stopping the stylesheet.

26 min 3 code practice

4
0.4

Inspecting CSS in DevTools

DevTools shows every rule that matches an element, which declarations won and which were crossed out, the final computed values and the box model, and lets you edit and toggle styles live to find out why something looks the way it does.

20 min 3 code practice

Practise this phase

Hands-on exercises: write the code, see your page live, and press Check to have it tested automatically.

1

Your first two rules

Using only the CSS tab, make the heading's text colour firebrick and the paragraph's text 18px in size.

Beginner
2

Fix the broken stylesheet

This stylesheet has four mistakes, so almost nothing applies. Fix them so the title is darkgreen and 28px, and the note is gray and italic.

Beginner
3

Move inline styles into a class

Both warnings are styled with repeated style attributes. Remove the style attributes, give both paragraphs the class warning, and write one .warning rule in the CSS tab that makes them darkred and bold.

Beginner
4

Make the theme win by order

This page has a reset in a <style> element and a theme in a linked stylesheet. Right now the reset is later, so it undoes the theme's purple heading.

Beginner
5

Style a profile card

Style this profile card using only the CSS tab:

Beginner