External CSS

External CSS

External CSS stores CSS rules in a separate stylesheet and connects that stylesheet to an HTML document. A single external stylesheet can be used by multiple web pages, making repeated styles easier to organize and maintain.

Using External CSS

External CSS separates the CSS rules from the HTML document. The HTML page contains a reference to the stylesheet, while the CSS rules are stored in a separate file.

The stylesheet is connected to the HTML document with a <link> element inside the <head>:

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

The separate styles.css file can contain CSS such as:

p {
  color: blue;
}

The HTML document can then contain a normal paragraph without any CSS added directly to the element:

<p>This paragraph is blue.</p>

The <link> Element

The <link> element connects the external stylesheet to the HTML document. It is placed inside the document's <head>.

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

The rel="stylesheet" attribute tells the browser that the linked resource is a stylesheet. The href attribute provides the location of the CSS file.

The <link> element does not have a closing tag.

The CSS File

An external stylesheet is a plain text file saved with the .css file extension. It contains CSS rules but does not contain HTML elements such as <style>.

For example, a file named styles.css could contain:

body {
  font-family: Arial, Helvetica, sans-serif;
}
h1 {
  color: #0088cc;
}
p {
  color: #333333;
}

Do not place <style> and </style> around CSS stored in an external stylesheet. Those tags are HTML and belong only in an HTML document when internal CSS is being used.

The Stylesheet Path

The value of the href attribute tells the browser where to find the stylesheet.

If the HTML document and stylesheet are in the same directory, the filename can be used:

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

If the stylesheet is stored in a css directory, the path might look like this:

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

The path must point to the actual location of the CSS file. If the path is incorrect, the browser cannot load the stylesheet and its styles will not be applied.

Using One Stylesheet on Multiple Pages

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

For example, several pages can contain the same stylesheet link:

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

If the text color, font, or another shared style is changed in styles.css, every page linked to that stylesheet can use the updated style without editing the CSS on each individual HTML page.

Why Use External CSS?

External CSS is commonly used for websites because it keeps presentation rules separate from the HTML and allows the same styles to be reused.

It also makes a website easier to maintain. Instead of changing the same CSS on many HTML pages, a shared style can often be changed once in the external stylesheet.

Inline and internal CSS are still useful in certain situations, but external stylesheets are generally the most practical approach when multiple pages share the same design.

Summary

External CSS stores CSS rules in a separate .css file. The stylesheet is connected to an HTML document with a <link> element placed inside the <head>.

Because one stylesheet can be shared by multiple pages, external CSS helps keep HTML cleaner and makes repeated styles easier to maintain. The final page in this section explains how comments can be added to CSS.