The Page Skeleton, and Three Places CSS Can Go

Every web page shares the same skeleton, a head for information about the page and a body for what people see, and CSS can go in three places in it, of which a linked stylesheet is the one real sites use.

Novice · HTML · CSS · Updated

After this lesson you can

  • Write a page skeleton with the doctype, html with lang, a head with charset and title, and a body
  • Add CSS to a page with a style attribute, a style element or a linked stylesheet, and choose the linked stylesheet for a real site

Key takeaways

  • Every page starts with <!DOCTYPE html>, then <html lang="en"> holding a <head> and a <body>.
  • The head holds information about the page, such as <meta charset="utf-8"> and the <title> shown on the browser tab. The body holds what people see.
  • CSS can go in a style attribute (one element), a <style> element (one page), or a separate file linked with <link rel="stylesheet">.
  • Real sites use a linked stylesheet, so one file styles every page and one change restyles them all.

You've written a stylesheet, saved it, refreshed the page, and nothing changed. One of the most common reasons is that the page never loaded the stylesheet at all: the line that connects them is missing, misspelled, or in the wrong place. That line lives in the page skeleton, the same few lines at the top of every web page. This lesson builds the skeleton for the "Meet Biscuit" page, then shows the three places CSS can go and which one to use.

One big box with a packing slip

On moving day, all the small boxes go into one big shipping box, and a packing slip is taped to the outside: who it's for, what's inside. Nobody unpacks the slip. It's information about the box.

A web page is packed the same way:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Meet Biscuit | Paws & Whiskers</title>
  </head>
  <body>
    <h1>Meet Biscuit</h1>
    <p>Biscuit is a three-year-old beagle who loves long walks and longer naps.</p>
  </body>
</html>

The <html> element is the big box that holds everything. Inside it, the <head> is the packing slip: information about the page, which the browser reads but doesn't show on the page. The <body> holds the contents: everything people see.

The skeleton, line by line

  • <!DOCTYPE html>, read "doctype HTML", is the first line of every page. It tells the browser "this is a modern HTML page". Without it, browsers fall back to an old way of drawing pages, and some CSS behaves strangely.
  • <html lang="en"> holds the whole page. The lang attribute says the page's language (en is English), so a screen reader pronounces the words correctly and a browser knows when to offer a translation.
  • <head> holds information about the page.
  • <meta charset="utf-8"> says which set of characters the file uses. UTF-8 covers every alphabet and the emoji, so an é or a 🐾 shows as itself instead of as scrambled symbols. <meta> is a void element: no content, no closing tag.
  • <title> is the text on the browser tab, in bookmarks, and as the blue link in search results.
  • <body> holds everything that shows on the page.

Try it. Replace the two lines in your meet-biscuit.html with the whole skeleton above, and save. Look at the browser tab: it now says Meet Biscuit | Paws & Whiskers instead of the file's name. In VS Code, typing ! on the first line of an empty .html file and pressing Tab writes a skeleton for you; compare it with this one.

The viewport line, for phones

You'll often see one more line in the head:

<meta name="viewport" content="width=device-width, initial-scale=1">

It tells a phone to show the page at the phone's real width, instead of pretending to be a wide desktop screen and shrinking everything to fit. Put it in every page you make from here on. Module 4's lesson Responsive Design and the Viewport explains it word by word, when you make pages that fit any screen.

Place 1: the style attribute

Now the CSS. The quickest place to put it is on one element, in its style attribute:

<h1 style="color: darkorange;">Meet Biscuit</h1>

The attribute's value is the same property: value; you write in a rule, without a selector or curly braces: the element it sits on is the one it styles. CSS written this way is called an inline style. It's handy for a quick test, but it styles one element only, and it mixes the look into the HTML, where it's hard to find and change later.

Place 2: a style element

The second place is a <style> element in the head, which holds whole rules:

<head>
  <meta charset="utf-8">
  <title>Meet Biscuit | Paws & Whiskers</title>
  <style>
    h1 {
      color: darkorange;
    }
  </style>
</head>

Every <h1> on this page is now dark orange, with no style attribute on any of them. A <style> element styles the one page it's in, which suits a single page, such as a quick experiment.

Place 3: a linked stylesheet

Paws & Whiskers won't stay one page. Biscuit, Pepper the cat and Clover the rabbit each get a page, and so do the home page and the adoption form. They should all look alike. So the CSS goes in a file of its own, an external stylesheet, and every page links to it with a <link> element in its head:

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

rel (short for relationship) says what the file is to this page: its stylesheet. href says where the file is: here, styles.css in the same folder as the page. <link> is a void element too. The file holds plain CSS rules:

h1 {
  color: darkorange;
}

This is how real sites are built, for two reasons. One file styles every page, so changing a color in one place changes it everywhere. And the browser downloads the file once and keeps a copy, so every page after the first loads faster.

Try it. Next to meet-biscuit.html, make a file named styles.css with the rule above. Add the <link> line to the page's head, under the <title>, and save both files: the heading turns orange. Now misspell the file name in href and save. The page goes back to black, with no message on the page itself: that silence is the "nothing changed" mystery from the start of this lesson. (The developer tools' Console does name the file it couldn't find.)

Check yourself

2 questions to try on the lesson page.

So what

Every page you style from now on starts with this skeleton and a <link> to its stylesheet. When a style doesn't show up at all, check that line first.

Key terms

Cheat sheets

Related