CSS from zero: colours, fonts and the box
Lesson 3 of 8
3CSS from zero: colours, fonts and the box
The big pictureHTML built the structure, and CSS decides how it looks: colour, font, spacing and borders. The same HTML file can look like a serious bank site or a colourful game app, and the whole difference is CSS.
What the picture shows: Every CSS rule takes the same trip: you pick elements with a selector, say which property to change and to what value, and the browser applies it to every matching element.
Map of this part
The concepts in order, click any one to jump to it:
Two ways into the same idea
If HTML is the house frame, CSS is the paint, furniture and lighting. You tell the painter: "all the doors (selector) should be (property) brown (value)", and "the bedroom in particular (class) gets blue walls". When two orders clash, he follows the more precise one: "the bedroom door" is more precise than "all the doors".
CSS is a declarative language of rulesets: a selector, then a block of property: value; declarations. The browser builds the CSSOM and matches it against the DOM to compute each property's "computed value" on each element. Clashes are settled by the cascade: origin and importance, then @layer layers, then specificity as a triple (id, class/attribute/pseudo-class, element), then source order. Some properties inherit to children (colour, font) and some do not (borders, margins). The box model: content-box by default adds padding and border on top of width; border-box keeps them inside. Units: absolute (px) and relative (rem for the root font size, em for the parent's, %, vw/vh).
Before You Start
📄Your first web page
You write a page with headings, paragraphs and lists.
🧱Semantic HTML
You know header, nav and main.
The Core Idea
1Where does CSS go? Three places, and one is right
(1) On the tag with the style attribute: quick for a test, but it mixes looks with content. (2) In a <style> tag inside head: fine for a single page. (3) In a separate file styles.css linked with <link>: the right way for any site, because one file dresses every page and the browser caches it so it never downloads it twice.
<!-- 1. on the tag (avoid) -->
<p style="color: brown;">نص بني</p>
<!-- 2. in the page's head -->
<style>
p { color: brown; }
</style>
<!-- 3. a separate file (the right way) -->
<link rel="stylesheet" href="styles.css">The shape of a rule: a selector that picks elements, then curly braces { }, and inside them one line per property: the property name, a colon, the value, a semicolon.
h1 { /* selector: every h1 */
color: #b4532a; /* property: value; */
font-size: 32px;
}2Selectors: how you pick what to style
Element p picks every paragraph. Class .price (with a dot) picks every element with class="price", and is meant for many elements. Id #total (with a hash) picks the single element with id="total". Descendant nav a picks only links inside nav. State a:hover while the mouse is over it, and :focus while the element has focus. Group several selectors with a comma: h1, h2.
Six selectors on one page
Change the colour of .price and notice both prices change together. Then hover over the links to see :hover.
3Colours and backgrounds
You write a colour four ways: a name like tomato and navy, hex #b4532a (red, green, blue in hexadecimal), rgb(180 83 42) with numbers from 0 to 255, or hsl(20 62% 44%) as hue, then saturation, then lightness, the easiest to adjust: change the last number to lighten or darken. color is the text colour and background the background colour, image or gradient.
Colours and a gradient
Change the first hsl number of the background (30) to 200 and it turns blue, then change 92% to 80% to darken it a little.
4Fonts, text and units
font-family is the font with fallbacks in case it is missing, font-size its size, font-weight its thickness (400 normal, 700 bold), line-height the space between lines (1.6 reads comfortably), and text-align the alignment. For good-looking Arabic fonts, use Google Fonts such as "IBM Plex Sans Arabic" or "Tajawal".
Units: px is a fixed pixel. rem is a multiple of the browser's base font size (usually 16 pixels), so 1.5rem = 24 pixels, and it grows if the user enlarges text in their settings, which makes it best for text. % is a share of the parent. vw is a share of the screen width: 50vw is half of it.
Font, size and line spacing
Change line-height in .lead to 1, then to 2.4, and compare how easy it is to read.
5The box model: every element is a box
The most important idea in all of CSS: every element is a rectangular box of four layers, from inside out: the content (text or image), then padding (space between content and border, painted with the background), then the border, then the margin (transparent space between the box and its neighbours).
┌──────────────── margin (شفاف) ────────────────┐ │ ┌──────────── border (الإطار) ────────────┐ │ │ │ ┌──────── padding (الحشوة) ─────────┐ │ │ │ │ │ │ │ │ │ │ │ content (المحتوى) │ │ │ │ │ │ │ │ │ │ │ └───────────────────────────────────┘ │ │ │ └─────────────────────────────────────────┘ │ └───────────────────────────────────────────────┘
Play with padding, border and margin
Delete the first box-sizing line and notice the box grows wider than 220. Then change border-radius to 50px.
box-sizing: border-box makes width include padding and border, so 220 really means 220. Without it, 220 + 40 padding + 8 border = 268! Put it on every element at the top of every CSS file you write. The shorthand margin: 10px 20px means 10 top and bottom, 20 left and right.
6Who wins? The cascade, specificity and inheritance
When two rules give the same element different colours, the browser decides in order: (1) the more specific wins: an id # beats a class ., and a class beats an element name. (2) If they tie on specificity, the later one in the file wins. And inheritance: some properties pass from parent to children, like color and font-family, so putting them on body is enough.
Test specificity yourself
Predict before you change it: if you delete the #main-note line, what colour is the last paragraph? Delete it and check.
!important. A week later you need a stronger !important and the file becomes a war. Lower specificity and rely on classes, and open developer tools to see which rule was crossed out and why.Worked example
Problem: a card with width: 300px, padding: 24px and border: 3px still overflows its 300-wide container. And its heading .card h2 { color: brown } will not change colour because the file also has #offers h2 { color: black }. Analysis: without border-box, the real width is 300 + 48 + 6 = 354. The id #offers is more specific than the class .card, so it wins even though the card rule comes later. Fix: border-box for the width, and lower specificity to classes only:
The card after the fix
Myth vs Reality
| Myth | Reality |
|---|---|
| CSS is just colours, not real programming. | It has no complex logic, but the cascade, layout and responsiveness are a skill people are hired for. |
| px is more precise, so use it for everything. | rem for text respects the user's font size setting, which matters for people with low vision. |
| Named colours are easier, so you need nothing else. | Names are limited; hsl gives you any shade and makes it easy to build tints from one colour. |
Where you meet it at work
🎨Brand identity
A company's colours and fonts are written once in CSS and show on every page.
🌙Dark mode
The same HTML with different colours by user preference.
🧑🎨Front-end developer job
Turning a Figma design into a matching page is mostly CSS.
Test your understanding
Which selector picks every element with class="price"?
A dot is for a class, a hash for an id, and a bare name for an element.
A box with width: 200px, padding: 10px and border: 5px, no border-box. How wide is it really?
200 + 10 padding on each side (20) + 5 border on each side (10) = 230.
.note { color: blue } then #tip { color: red } on the same element. What colour?
The id is more specific than the class, so it wins regardless of order.
Which unit grows if the user enlarges text in their browser settings?
rem is a multiple of the base font size the user sets.
Which layer of the box takes the background colour?
The background extends under the content and padding up to the border; the margin is always transparent.
Quick review cards
Check Your Understanding
Why put CSS in a separate file?
One file dresses every page, the browser caches it so it never downloads twice, and content stays separate from looks.
What is the difference between padding and margin?
Padding is space inside the border with the background colour; margin is transparent space outside the border separating the box from its neighbours.
Your rule is not applied. How do you find out why?
Inspect the element in developer tools: in Styles you see your rule crossed out and the rule that beat it above.
Why is putting font-family on body enough?
Because font is an inherited property, passed from parent to all its children.
Resources for this lesson
Grouped by type. Start with the official docs for precision, or an article or video for the explanation.
Tools2
Done with this lesson?
Sign in to save your progress.