Linking and skeleton

CSS course · Beginner · Lesson 16/82

Link the CSS file to HTML and set up the basic skeleton.

Linking and skeleton

To link your stylesheet to HTML, place <link rel="stylesheet" href="style.css"> inside the HTML <head>. This is the external CSS method; HTML structure and styling stay separate.

In this lesson you'll also write the first CSS rule: a body type selector. A type selector matches an element by its tag name; body matches the whole page body. Setting margin: 0 is a common way to reset the browser's default page margin.

Type selector and declaration block

A CSS rule has two parts: a selector and a declaration block. body is a type selector; it matches the HTML tag by its name. The declaration block sits inside curly braces { } and each line is a property: value; pair.

Example: body { margin: 0; }. Here margin is the property and 0 is the value. A semicolon closes each declaration; don't forget it.

Why margin: 0?

Browsers add a small default margin to the body element; that's why content doesn't touch the browser edge. But in modern design you usually want to reset this default; managing spacing with your own rules gives you more control.

Writing body { margin: 0; } clears that default. From here you can add your own padding and margin values to space content as you like.

Exercise Add the body rule

Take the file with the header comment from the previous lesson. Below it, add a body type selector rule with a margin: 0 declaration. End the declaration with a semicolon.

Show example solution

/* Personal Site stylesheet */

body {
  margin: 0;
}

Test yourself

Where do you place the <link> element that links an external stylesheet?
```
<link rel="stylesheet" href="style.css">
```
- At the end of <body>, just before closing
- Inside the <head> section
- Before the <html> tag, at the very top
- Inside every <p> paragraph
Show answer

Inside the <head> section — Correct. The <link> element goes inside <head>; styles are ready as the page loads.

Complete the body type selector

____ {
  margin: 0;
}

Show answer

body {
  margin: 0;
}

Match each CSS term to its meaning

selector

element to style
declaration

property: value pair
property

setting name (margin)
value

setting content (0)

Linking and skeleton