External Stylesheets

An external stylesheet stores CSS rules in a separate file that can be linked to one or more HTML documents. External stylesheets make it easier to organize, reuse, and maintain CSS across a website.

External stylesheet files normally use the .css filename extension and contain CSS rules without HTML elements such as <style>.

Creating an External Stylesheet

To create an external stylesheet, create a text file and save it with a .css filename extension. For example, a stylesheet could be named styles.css.

The file contains CSS rules just as they would appear inside a <style> element, but the <style> tags are not included.

body {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  color: blue;
}
p {
  color: #333333;
  font-size: 18px;
}

This CSS can be saved in a file named styles.css and linked to an HTML document.

Linking a Stylesheet to HTML

An external stylesheet is connected to an HTML document with the <link> element. The <link> element is placed inside the document's <head> element.

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

The rel="stylesheet" attribute identifies the linked resource as a stylesheet. The href attribute specifies the location of the CSS file.

When the browser loads the HTML document, it retrieves the stylesheet and applies its CSS rules to matching elements on the page.

External Stylesheet Paths

The value of the href attribute must point to the location of the stylesheet. The path depends on where the CSS file is stored in relation to the HTML document.

If the stylesheet is in the same directory as the HTML document:

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

If the stylesheet is inside a css directory:

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

A root-relative path can also be used when the stylesheet is stored in a known location from the website root:

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

Using the correct path is important. If the browser cannot locate the CSS file, the stylesheet will not be applied to the page.

Using a Stylesheet on Multiple Pages

One of the main advantages of an external stylesheet is that the same CSS file can be linked to multiple HTML documents.

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

If several webpages link to the same stylesheet, changing a CSS rule in that file can update the appearance of all those pages without editing the CSS separately in each HTML document.

This makes external stylesheets especially useful for maintaining consistent colors, typography, spacing, navigation, layouts, and other design features throughout a website.

External Stylesheet Example

The following HTML document links to an external stylesheet named external-stylesheets-01.css.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>External Stylesheet Example</title>
    <link rel="stylesheet" href="external-stylesheets-01.css">
  </head>
  <body>

    <h1>External Stylesheets</h1>
    <p>This page is styled with an external CSS file.</p>

  </body>
</html>

The external CSS file contains the styles applied to the page:

body {
  font-family: Arial, Helvetica, sans-serif;
  padding: 12px;
}
h1 {
  color: blue;
}
p {
  color: #333333;
  font-size: 18px;
}

Play in Editor

The browser loads the HTML document, follows the stylesheet link, and applies the rules from the external CSS file to the matching HTML elements.