CSS Basics

CSS controls how a page looks: color, spacing, layout, fonts. It’s kept separate from HTML on purpose, so the structure and the styling can each change without touching the other.

Linking a stylesheet

CSS usually lives in its own file, linked from the HTML’s <head>:

<link rel="stylesheet" href="style.css">

Everything written in that file now applies to the page.

Selectors

A selector decides which elements a rule applies to. The three you’ll use most: an element selector (every tag of that type), a class selector (anything with that class attribute, written with a dot), and an id selector (the one element with that id, written with a hash):

p { color: white; }
.highlight { color: yellow; }
#main-title { font-size: 2rem; }

Colors and fonts

Two of the most common properties:

p {
  color: #333333;
  font-family: Arial, sans-serif;
  font-size: 16px;
}

Spacing: margin and padding

Every element is a box. padding is space inside the box, between its content and its edge. margin is space outside the box, between it and its neighbors:

.card {
  padding: 16px;
  margin: 24px 0;
  border: 1px solid #ccc;
}

Layout basics

By default, elements stack top to bottom. Setting display: flex on a container lines its children up in a row instead, which is the easiest way to arrange things side by side:

.row {
  display: flex;
  gap: 12px;
}

Try it: style the page you built

Picking up the profile page from the HTML basics guide, here’s how to style it, one rule at a time.

1. Set a base font and color on the whole page:

body {
  font-family: sans-serif;
  color: #222222;
  background: #fafafa;
}

2. Style the photo, shrinking it and rounding it into a circle:

img {
  width: 150px;
  border-radius: 50%;
}

3. Lay out the hobbies list as a row of little badges instead of a bulleted column:

ul {
  display: flex;
  gap: 8px;
  list-style: none;
  padding: 0;
}

li {
  background: #eeeeee;
  padding: 4px 10px;
  border-radius: 12px;
}

4. Add a hover state to the link, so it visibly reacts when a visitor points at it:

a:hover {
  color: darkorange;
}

Save all four rules in style.css, linked from the page as covered above, and the plain page from the HTML guide turns into a small styled profile card. The JavaScript basics guide picks it up again and adds a bit of interactivity.

← back to guides