Skip to content

What is CSS?

Your pages work. They have content, structure, links, forms. But they look plain — black text on white, default browser fonts, no personality.

CSS is what changes that.

What CSS does

CSS stands for Cascading Style Sheets. It controls how your HTML looks — colours, fonts, sizes, spacing, layout.

You write your styles in a separate file (usually called style.css) and link it to your HTML. The browser reads both and combines them.

Step 1 — Create your stylesheet

In VSCode, in the same folder as your HTML file, create a new file called:

style.css

Plain text file — no HTML tags, no Python. Just style rules.

In the <head> of your HTML file, add this line:

<link rel="stylesheet" href="style.css">
  • rel="stylesheet" — tells the browser what type of file this is
  • href="style.css" — the path to your CSS file

Your <head> now looks like this:

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Page</title>
  <link rel="stylesheet" href="style.css">
</head>

Step 3 — Write your first rule

Open style.css and add this:

body {
  background-color: #f0f0f0;
}

Save both files and refresh your browser. The background should now be light grey instead of white.

That is CSS working. One rule. Instant change.

How a CSS rule is structured

selector {
  property: value;
}
  • selector — which HTML element to style (body, h1, p, etc.)
  • property — what to change (background-color, color, font-size, etc.)
  • value — what to set it to

One selector can have as many property-value lines as you need.

Challenge

Link style.css to your portfolio.html. Then write two rules:

  • Change the body background to any colour you like
  • Change the h1 colour to something other than the default black

Save both files and refresh. Do you see your changes? If nothing changed, double-check that the <link> tag is in the <head> and that style.css is in the same folder as the HTML file.

← A Complete Form    Next: Selectors →