Learn how the web works and build, style and publish your own responsive website with semantic HTML and modern CSS.

HTML & CSS Foundations

## Why this matters

"My CSS isn't working" usually means "another rule is winning". Several rules often target the same element, and the browser needs a way to choose. That system is the **cascade**, the C in CSS. Once you can predict the winner, you stop adding random `!important` flags and start writing CSS that stays easy to change.

## A CSS rule, briefly

```css
.card h2 {
  color: #1d4ed8;
  margin-bottom: 0.5rem;
}
```

- `.card h2` is the **selector**: which elements the rule applies to.
- `color: #1d4ed8;` is a **declaration**: a property and a value.

CSS can live in a `<style>` element in the head (as in this course's exercises), in an external file linked with `<link rel="stylesheet" href="styles.css">` (best for real sites), or in a `style` attribute on an element (best avoided).

## How the browser picks a winner

When two declarations set the same property on the same element, the browser compares them in this order and stops at the first difference:

1. **Origin and importance.** Your styles beat the browser's default styles. A declaration marked `!important` beats normal declarations.
2. **Cascade layers** (`@layer`), an advanced feature you can ignore for now.
3. **Specificity.** The more specific selector wins.
4. **Source order.** If everything else ties, the rule that comes **last** wins.

## Calculating specificity

Count three kinds of things in the selector and write them as (A, B, C):

| Column | Counts | Examples |
|---|---|---|
| A | id selectors | `#content` |
| B | classes, attributes, pseudo-classes | `.warning`, `[type="email"]`, `:hover` |
| C | element types and pseudo-elements | `p`, `h2`, `::before` |

Compare column A first; only if it ties, compare B; then C. A higher number in an earlier column always wins, no matter how big the later columns are.

| Selector | Specificity |
|---|---|
| `p` | (0, 0, 1) |
| `.warning` | (0, 1, 0) |
| `p.warning` | (0, 1, 1) |
| `nav a:hover` | (0, 1, 2) |
| `#content p` | (1, 0, 1) |
| `#content .warning` | (1, 1, 0) |

The universal selector `*` and combinators (space, `>`, `+`, `~`) add nothing. Inline `style="..."` attributes beat any selector, which is one reason to avoid them.

## Worked example: why is my warning grey?

```html
<main id="content">
  <p class="warning">Save your work!</p>
</main>
```

```css
#content p { color: #333333; }   /* (1, 0, 1) */
.warning   { color: #b41e1e; }   /* (0, 1, 0) */
```

The warning is grey. `.warning` comes later, but source order only matters when specificity ties, and `#content p` has an id. Column A: 1 beats 0, game over.

Three ways to fix it, from best to worst:

1. **Match or beat the specificity deliberately:** `#content .warning { color: #b41e1e; }` is (1, 1, 0), which beats (1, 0, 1).
2. **Lower the specificity of the original rule:** if you control it, write `main p` or a class instead of an id, so simple classes can override it. Teams often avoid ids in CSS for exactly this reason.
3. **`!important`:** it works, but the next person who needs to override it must use `!important` too. Keep it for rare cases such as utility classes.

## Inheritance

Some properties, mostly text-related ones such as `color`, `font-family`, `font-size` and `line-height`, are **inherited**: children take the parent's value unless something targets the child directly. Layout properties like `margin`, `padding`, `border` and `width` are not inherited.

```css
body { color: #222; font-family: system-ui, sans-serif; }
```

Every paragraph, list and heading now uses that colour and font. But a direct rule always beats an inherited value, even a weak one: `p { color: gray }` beats `#content { color: red }` for a paragraph inside `#content`, because the id rule targets the parent, not the paragraph.

## Use your developer tools

Right-click an element, choose **Inspect**, and look at the **Styles** pane. Rules are listed from most to least specific, and losing declarations are shown ~~crossed out~~. The **Computed** tab shows the final value of every property and lets you jump to the rule that set it. This is the fastest way to answer "which rule is winning?".

## Common mistakes

- **Expecting the later rule to win** when the earlier one is more specific.
- **Reaching for `!important`** instead of understanding the conflict.
- **Styling with ids**, which makes overrides painful.
- **Over-long selectors** like `body main section div p.note`, which are fragile and hard to override.
- **Confusing inherited values with direct rules.**

## Quick recap

- Conflicts are decided by importance, then specificity, then source order.
- Specificity is (ids, classes/attributes/pseudo-classes, elements), compared column by column.
- Text properties inherit; box properties do not; a direct rule beats inheritance.
- The Styles pane shows the winner and crosses out the losers.

## Try it

Open the **Do** tab and solve a specificity puzzle without changing the HTML or using `!important`.


Predict which CSS rule wins using the cascade, specificity, source order and inheritance.

The cascade and specificity

CSS Specificity explained

Learn CSS Specificity In 11 Minutes

## Why this matters

Before Flexbox, putting three boxes side by side and centring them vertically took floats, clearfix hacks and guesswork. Flexbox makes one-dimensional layout (a row or a column of items) simple and predictable. Navigation bars, toolbars, card rows, button groups and "centre this thing" are all Flexbox jobs you will meet every week.

## The core idea: a container and its items

You turn an element into a **flex container** with one declaration. Its **direct children** become **flex items**:

```css
.nav-list {
  display: flex;
}
```

```html
<ul class="nav-list">
  <li><a href="#routes">Routes</a></li>
  <li><a href="#events">Events</a></li>
  <li><a href="#join">Join</a></li>
</ul>
```

The three list items now sit in a row. Only the direct children are affected; the links inside the items are laid out normally.

## Two axes

A flex container has a **main axis** and a **cross axis**.

- `flex-direction: row` (the default) makes the main axis horizontal.
- `flex-direction: column` makes the main axis vertical.

Alignment properties are named after the axes, not after left/right or top/bottom, which is why they swap meaning when you change direction:

| Property | Set on | Works along | Common values |
|---|---|---|---|
| `justify-content` | container | main axis | `flex-start`, `center`, `space-between`, `flex-end` |
| `align-items` | container | cross axis | `stretch` (default), `center`, `flex-start`, `flex-end` |
| `gap` | container | between items | `1rem`, `0.5rem 1rem` |
| `flex-wrap` | container | lines | `nowrap` (default), `wrap` |

## Worked example 1: a header bar

Logo on the left, navigation on the right, both centred vertically:

```css
.site-header {
  display: flex;
  justify-content: space-between;  /* push the two children apart */
  align-items: center;             /* centre them vertically */
}

.nav-list {
  display: flex;
  gap: 1rem;            /* space between links, none at the ends */
  list-style: none;     /* remove the bullets */
  margin: 0;
  padding: 0;
}
```

Flexbox containers can be nested: the header is a flex container whose second child (the nav's list) is a flex container itself.

`gap` is the modern way to space items. It puts space only *between* items, so you no longer need margins that leave an awkward extra gap at the end.

## Worked example 2: cards that wrap

```css
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.card {
  flex: 1 1 200px;
}
```

`flex: 1 1 200px` is shorthand for three item properties:

- `flex-grow: 1`: if there is spare space, take a share of it.
- `flex-shrink: 1`: if space is tight, you may shrink.
- `flex-basis: 200px`: start from a width of about 200px before growing or shrinking.

With `flex-wrap: wrap`, cards that do not fit move to the next line, and each line's cards grow to fill it. On a wide screen you get three cards in a row; on a phone, one per row. No media query needed.

## Centring anything

The classic "centre a box both ways" problem becomes:

```css
.hero {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
}
```

## Ordering, and why to be careful

`order` and `flex-direction: row-reverse` change the visual order without changing the HTML. Keyboard focus and screen readers still follow the HTML order, so a visual order that differs from the source confuses keyboard users. Change the HTML order instead whenever you can.

## Common mistakes

- **Putting `display: flex` on the item instead of the parent.**
- **Expecting grandchildren to be flex items.** Only direct children are.
- **Mixing up the axes** after switching to `flex-direction: column` (now `justify-content` is vertical).
- **Forgetting `flex-wrap: wrap`**, so items squash or overflow instead of wrapping.
- **Using margins for spacing** where `gap` would be simpler.

## Quick recap

- `display: flex` on the parent; direct children become flex items.
- `justify-content` aligns along the main axis, `align-items` across it; `gap` spaces items.
- `flex-wrap: wrap` plus `flex: 1 1 <basis>` gives responsive card rows.
- Keep the HTML order and the visual order the same.

## Try it

Open the **Do** tab and use Flexbox to turn a stacked header and cards into a proper nav bar and a wrapping card row.


Lay out a navigation bar and a row of cards with Flexbox: direction, alignment, gap and wrapping.

Flexbox tour

Learn flexbox the easy way

Learn CSS Flexbox in 20 Minutes (Course)

## Why this matters

Most of what makes a page feel professional is not fancy layout: it is readable text, consistent sizes and a small, deliberate set of colours. Designers call these a **type scale** and a **colour palette**. In this lesson you turn your unstyled homepage into something you would be happy to show an employer, using CSS custom properties so the whole design can be adjusted in one place.

## Custom properties (CSS variables)

A custom property is a named value you define once and reuse:

```css
:root {
  --color-text: #1f2937;
  --color-bg: #fdfcf9;
  --color-accent: #1d4ed8;
}

body {
  color: var(--color-text);
  background-color: var(--color-bg);
}

a {
  color: var(--color-accent);
}
```

- Names start with two dashes; `:root` is the `<html>` element, so properties defined there are available everywhere (they inherit).
- `var(--color-accent)` reads the value. Change the accent once, and every link, button and border that uses it follows.
- This is exactly how design systems keep large sites consistent.

## Choosing a palette

Keep it small:

- **Text**: a very dark grey or near-black (pure `#000` on pure white can feel harsh).
- **Background**: white or a very light tint.
- **Accent**: one brand colour for links, buttons and highlights.
- **Muted**: a mid grey for secondary text such as dates and footers.

Then check **contrast**. WCAG asks for a contrast ratio of at least **4.5:1** for normal text and 3:1 for large text (about 24px, or about 19px bold). Developer tools show the ratio when you inspect a colour, and free tools such as the WebAIM Contrast Checker do the same. Mid greys on white often fail, so test your muted colour carefully. Dark grey `#4b5563` on white passes; light grey `#9ca3af` does not.

## Fonts

`font-family` takes a list, the **font stack**. The browser uses the first one available and falls back along the list:

```css
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
```

`system-ui` uses the operating system's own interface font, which is fast (nothing to download) and very readable. Always end the stack with a generic family such as `sans-serif` or `serif`. Web fonts from services such as Google Fonts are an option later, but every font file is another download, so use one or two at most.

## A type scale

A type scale is a set of sizes that grow by a fixed ratio, so headings look related rather than random. With a base of `1rem` (16px by default) and a ratio of 1.25:

```css
:root {
  --step-0: 1rem;      /* body */
  --step-1: 1.25rem;   /* h3 */
  --step-2: 1.563rem;
  --step-3: 1.953rem;  /* h2 */
  --step-4: 2.441rem;  /* h1 */
}

h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
```

Use **`rem`** for font sizes. One `rem` is the root font size, which respects the size the user has chosen in their browser settings. Fixed `px` sizes for text can override that choice.

## Readable text

```css
body {
  font-size: var(--step-0);
  line-height: 1.6;          /* unitless: 1.6 times the font size */
}

main {
  max-width: 65ch;           /* roughly 65 characters per line */
  margin: 0 auto;            /* centre the column */
  padding: 0 1rem;
}

h1, h2, h3 {
  line-height: 1.2;          /* headings need tighter lines */
}
```

- **Line height** of about 1.5 to 1.7 for body text helps the eye find the next line. Write it without a unit so it scales with each element's font size.
- **Line length** of about 45 to 75 characters is comfortable to read. The `ch` unit is the width of the "0" character, which makes this easy.

## Links and focus

Links should look like links. Keep the underline in body text (colour alone is not enough for people who cannot distinguish it), and make sure keyboard users can see focus:

```css
a { color: var(--color-accent); }
a:hover,
a:focus-visible { text-decoration-thickness: 2px; }
```

Never remove the focus outline without providing a clear replacement.

## Common mistakes

- **Too many colours and fonts.** Three or four colours and one or two fonts are plenty.
- **Low-contrast grey text**, the most common accessibility failure on the web.
- **Text sizes in `px`**, which ignore the user's preferred size.
- **Full-width paragraphs** on large screens, with 150 characters per line.
- **Hard-coding the same hex value in twenty places** instead of a custom property.

## Quick recap

- Define colours and sizes once as custom properties on `:root`, then use `var()`.
- A small palette with 4.5:1 contrast for body text.
- A font stack ending in a generic family; `rem` sizes from a ratio-based type scale.
- Line height about 1.6 and line length about 65ch; visible links and focus.

## Try it

Open the **Do** tab and style the homepage: palette variables, a font stack, a type scale and comfortable line length.


Give your homepage a readable type scale and an accessible colour palette using CSS custom properties.

Style your homepage

Beginner’s guide to styling text with CSS

CSS Variables - An introduction to CSS custom properties

## Why this matters

Every element on a web page is a rectangle, a **box**. Spacing, sizing and most "why is this 20 pixels too wide?" bugs come down to how those boxes are measured. Once the box model clicks, you can space anything precisely and debug layouts in seconds with developer tools.

## The four layers

From the inside out, every box has:

1. **Content**: the text or image itself, sized by `width` and `height`.
2. **Padding**: space *inside* the box, between the content and the border. It shows the element's background colour.
3. **Border**: a line around the padding (it can be zero width).
4. **Margin**: space *outside* the box, pushing other boxes away. It is always transparent.

```css
.plan {
  padding: 1.5rem;              /* inside space */
  border: 2px solid #cbd5e1;    /* width, style, colour */
  margin-bottom: 1.5rem;        /* outside space */
}
```

A simple test for which one you need: **if the background should extend into the space, use padding; if the space should separate this box from others, use margin.**

## Shorthand values

Padding and margin accept one to four values, going clockwise from the top:

```css
padding: 1rem;                 /* all four sides */
padding: 0.75rem 1.25rem;      /* top & bottom, left & right */
padding: 1rem 2rem 0.5rem;     /* top, left & right, bottom */
padding: 1rem 2rem 0.5rem 0;   /* top, right, bottom, left */
```

You can also set one side: `margin-top`, `padding-left` and so on. `margin: 0 auto` on a block with a `width` or `max-width` centres it horizontally.

## The sizing surprise, and the fix

By default (`box-sizing: content-box`), `width` sets only the **content** width. Padding and border are added on top:

```text
width: 280px + padding 24px left + 24px right + border 2px + 2px
= 332px on screen
```

That is why adding padding makes boxes overflow their columns. The fix almost every modern stylesheet starts with:

```css
*, *::before, *::after {
  box-sizing: border-box;
}
```

With `border-box`, `width: 280px` means the whole box, including padding and border, is 280px; the content area shrinks to fit. Sizes now mean what you expect.

## Block and inline boxes

- **Block** elements (`div`, `p`, `h1`, `section`, `article`, `ul`) start on a new line and stretch to the full available width. Width, height, padding and margin all work.
- **Inline** elements (`a`, `span`, `strong`, `em`) sit within a line of text. Width and height are ignored, and vertical margin does not push other lines away.
- **`display: inline-block`** sits in a line like inline, but respects width, height and padding like block. It is handy for button-style links.

## Margin collapsing

When two vertical margins meet, for example the bottom margin of one paragraph and the top margin of the next, they **collapse** into one margin the size of the larger, instead of adding up. A `margin-bottom: 24px` followed by `margin-top: 16px` gives a 24px gap, not 40px. This only happens with vertical margins of block boxes in normal flow; it does not happen inside flex or grid containers, which is one more reason to use `gap` there.

## Worked example: inspecting a box

1. Right-click a card and choose **Inspect**.
2. In the **Computed** tab (or **Layout** in Firefox), find the box-model diagram: content in the middle, then padding, border and margin, each with its values.
3. Hover over the element in the Elements panel: the page highlights content in blue, padding in green and margin in orange.
4. Change a value such as `padding: 1.5rem` directly in the Styles pane and watch the diagram update.

This diagram is the fastest way to answer "where is this extra space coming from?". Very often it is a default margin from the browser on a heading, paragraph or list.

## Browser defaults

Browsers give `body` an 8px margin, headings and paragraphs top and bottom margins, and lists left padding. Many developers start with `body { margin: 0; }` and set heading and paragraph margins deliberately rather than relying on the defaults.

## Common mistakes

- **Using margin when you want the background to grow** (you need padding).
- **Forgetting `box-sizing: border-box`**, then fighting overflowing widths.
- **Giving an inline `<a>` a width or vertical padding** and wondering why the layout does not change; use `inline-block` or `block`.
- **Being surprised by collapsed margins** between stacked paragraphs.
- **Fixed heights on boxes with text**, which overflow when the text wraps or the user zooms. Let content set the height.

## Quick recap

- Content, padding (inside), border, margin (outside).
- Shorthands go clockwise from the top.
- `box-sizing: border-box` makes `width` include padding and border.
- Block, inline and inline-block behave differently; vertical margins between blocks collapse.
- The box-model diagram in developer tools shows every layer.

## Try it

Open the **Do** tab and give a pair of pricing cards proper padding, borders and spacing with border-box sizing.


Control spacing and size with content, padding, border and margin, and switch to border-box sizing.

The box model

Learn CSS Box Model In 8 Minutes

CSS box model explained (padding, border, margin)

The cascade and specificity, the box model, Flexbox, and a type scale and colour palette for your homepage.