Linking CSS to HTML

Learn the differences between <link>, <style> and inline styles.

Three methods

There are three ways to attach CSS to an HTML page. The external method links a separate .css file with <link>. The internal method writes a <style> tag inside the HTML. The inline method puts styles directly on a tag's style attribute.

The most common is the external method; one file styles many pages.

External stylesheet

In the external method, CSS lives in a separate styles.css file. You put a <link> tag inside the HTML <head>: <link rel='stylesheet' href='styles.css'>.

The benefit is large. The browser caches the CSS once, and every page loads fast. To try a new theme, you change a single file and the change ripples across the whole site at once.

Style tag and inline

In the internal method you put a <style> tag inside the HTML <head>; the CSS declarations live inside the HTML file. It is handy for styles that apply to a single page; other pages do not see them.

The inline method writes declarations on a style attribute: <p style='color: navy'>. It works for a quick fix but is best avoided in daily use, since even a single element needs a file change.

Exercise Add a body block for the external file

Add a body block that would go inside an external stylesheet. It must contain a font-family: sans-serif declaration.

Show example solution

/* add the body block */
body {
  font-family: sans-serif;
}

Test yourself

What does rel='stylesheet' in the link tag indicate?
```
<link rel="stylesheet" href="styles.css">
```
- That this link points to a stylesheet
- The page title bar text
- The HTML document character encoding
- The page language (e.g. English)
Show answer

That this link points to a stylesheet — Correct. rel='stylesheet' says this link points to a stylesheet.

Open the heading block in the external file

/* styles.css — external file */
____ {
  color: darkblue;
}

Show answer

/* styles.css — external file */
h1 {
  color: darkblue;
}

Match each method to where it lives

External CSS

linked via a link tag
Style tag

lives in the head section
Inline style

on the tag's style attribute

Next lesson: CSS rule structure

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies