Add External CSS

You will be able to create a separate CSS file and link it to an HTML page so the same styles can be reused across multiple pages.

What it is

External CSS is a style sheet stored in its own file, usually with a .css extension. Instead of putting CSS rules inside an HTML document, you write them in a file such as styles.css and connect that file to HTML with a link element. The mental model is separation of concerns: HTML describes content and structure, while CSS describes presentation.

Related terms include stylesheet, link, href, cascade, and media. The link element tells the browser where to find the CSS file and how to treat it.

Why it matters

• Reuse: one CSS file can style many HTML pages.
• Maintenance: changing a color or font in one file updates every linked page.
• Caching: browsers can store the CSS file and load pages faster.
• Organization: HTML stays focused on structure, CSS stays focused on design.
• Collaboration: designers and developers can work on separate files with fewer conflicts.

Syntax or steps

1. Create a CSS file, for example styles.css.
2. Add CSS rules to that file.
3. Open the HTML file and place a link element inside the head.
4. Set rel="stylesheet" so the browser knows the linked file is a style sheet.
5. Set href to the path of the CSS file.

The smallest useful pattern is:

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

Example

Suppose your project folder contains index.html and styles.css in the same directory.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome</h1>
  <p>This page uses an external style sheet.</p>
</body>
</html>

body {
  font-family: Arial, sans-serif;
  background-color: #f7f7f7;
  color: #222;
}

h1 {
  color: #0b6;
}

Part by part: the link element is inside head, which is the normal place for metadata and resources. The rel="stylesheet" attribute identifies the linked resource as CSS. The href="styles.css" attribute points to the file in the same folder. The CSS file contains normal rules, such as body and h1, and the browser applies them when rendering the HTML.

Common mistakes

• Putting the link element in body. Fix: move it into head.
• Using the wrong path. Fix: check whether the CSS file is in the same folder, a subfolder, or a parent folder.
• Forgetting rel="stylesheet". Fix: include it so the browser treats the file as CSS.
• Expecting external CSS to override inline styles automatically. Fix: remember that inline styles usually have higher specificity; remove or adjust them if needed.

When to use it

External CSS is the default choice for real websites. Internal CSS, written inside a style element, can be useful for a single-page demo or a small experiment. Inline CSS, written in a style attribute, is best reserved for rare one-off overrides or generated styles.

Practice

Guided exercise: create index.html and styles.css in the same folder. Link the CSS file from the HTML head. In the CSS file, set the body background to #fff and the h1 color to blue. Expected result: the page heading appears blue on a white background.

Challenge: create a second page, about.html, that links to the same styles.css. Add a nav rule in the CSS file, such as nav { font-weight: bold; }. Hint: if the styles do not appear, check the file name, path, and whether the link element is inside head.

Quick check

Question: Which attribute tells the browser that a linked file is a style sheet?

Answer: The rel="stylesheet" attribute.

Summary

External CSS lets you store presentation rules in a separate file and connect them to HTML with a link element. This makes styles reusable, easier to maintain, and better suited to real websites. The key pattern is placing <link rel="stylesheet" href="styles.css"> in the HTML head.