The Link Element

Without the <link> element connecting your HTML structure to your CSS design, your webpage is just a skeleton waiting for its style.

• External Stylesheets: Separate CSS files style multiple pages simultaneously.

• The <link> Element: Connects HTML to CSS within the <head> tag.

• Key Attributes: rel="stylesheet" defines relation; href sets file path.

• Flexible Styling: Supports device-specific styles and multiple linked CSS files.

RECOMMENDED ARTICLES

In the previous module, you learned that CSS and HTML must be connected before styles can affect a webpage.

The most common and professional way to do this is by using an external stylesheet linked through the <link> element.

This is the method used by almost all modern websites.

What Is an External Stylesheet?

An external stylesheet is a separate file that contains CSS code.

Instead of writing CSS inside an HTML file, you place all the CSS rules in their own file.

For example:

index.html

styles.css

Here:

index.html contains the webpage structure.

styles.css contains the design rules.

The HTML file then connects to the CSS file.

Why Use an External Stylesheet?

Imagine you own a website with 100 pages.

If every page contains its own CSS, updating the design becomes difficult.

For example, suppose you want all headings to become blue.

Without an external stylesheet, you might need to edit 100 files.

With an external stylesheet, you edit one CSS file and every page updates automatically.

Simple Analogy

Think of a school.

Instead of giving every student their own rulebook, the school keeps one master rulebook.

Whenever a rule changes, everyone follows the updated version.

An external stylesheet works the same way.

One CSS file can control many webpages.

The <link> Element

HTML uses the <link> element to connect a webpage to a stylesheet.

Example:

This tells the browser:

“Load the CSS rules from styles.css and apply them to this webpage.”

Understanding the Parts of the Link Element

Example:

Let’s break it down.

The rel attribute

The word rel stands for relationship.

The rel attribute describes the relationship between the HTML document and the linked file.

Here it means: This file is a stylesheet.

Memory Aid

Imagine a delivery box. The rel attribute is the label stuck on the box. Without the label, nobody knows what is inside.

The href attribute

The word href stands for Hypertext Reference. The href attribute tells the browser where the stylesheet is located.

Example:

or

Memory Aid

Think of href as a home address.

The browser asks:

“Where does this stylesheet live?”

The href attribute provides the answer.

Relative Paths

Most projects use relative paths.

Example:

This means:

Look in the current folder.

Example Folder Structure

project/

│

├── index.html

│

└── styles.css

The browser finds the CSS file in the same folder as the HTML file.

Relative Path Example with Folders

Folder structure:

project/

│

├── index.html

│

└── css/

    └── styles.css

The browser enters the css folder to find the stylesheet.

Then it is linked inside the HTML document.

Absolute URLs

A stylesheet can also be loaded from a complete web address.
Example:

This is called an absolute URL.

Relative vs Absolute Paths

The type attribute

This tells the browser the type of file being loaded.

Modern browsers usually assume CSS automatically, so this attribute is often omitted.

Today, the following is common:

Note

You may still see type=”text/css” in older books, tutorials, and legacy projects.

Understanding it is useful even though it is often unnecessary today.

The media attribute

This specifies which devices should use the stylesheet.

Examples:

Example:

This stylesheet is used only when printing.

Why Media Attributes Are Useful

Suppose a webpage looks beautiful on a monitor.

When printed, however, you may want:

larger text

black-and-white colors

hidden advertisements

A print stylesheet can provide those adjustments.

Using Multiple Media Types

You can target more than one media type.

Example:

The stylesheet will apply to:

• Screens
• Projectors

Using Multiple Stylesheets

A webpage can use several CSS files at the same time.

The browser loads all of them.

Why Use Multiple Stylesheets?

Large projects often separate CSS into categories.

Example:

layout.css : controls page structure.

colors.css : controls colors and themes.

typography.css : controls fonts and text appearance.

This makes projects easier to manage.

How Browsers Handle Multiple Stylesheets

Suppose we have:

The browser:

Loads the first stylesheet.

Loads the second stylesheet.

Combines the rules.

Applies them to the webpage.

Example:

HTML

Both styles are combined.

The title Attribute

Another attribute that may appear is:

Example:

This attribute gives the stylesheet a name.

Some browsers can allow users to switch between titled stylesheets.

Although it is not commonly used today, it remains part of HTML.

Note

You may rarely encounter the title attribute in modern web development, but understanding it helps when working with older websites.

Where Should the Link Element Be Placed?

The <link> element belongs inside the <head> section.

Correct:

Incorrect Placement

Wrong:

Browsers may still try to load it, but this is not the proper location.

Always place stylesheet links inside the head element.

What Happens When the Browser Finds a Link Element?

it performs these steps:

Step 1

Load the HTML page.

Step 2

Find the stylesheet reference.

Step 3

Request the CSS file from the server.

Step 4

Read the CSS rules.

Step 5

Apply the styles to the webpage.

Example Project Structure

project/

│

├── index.html

│

└── styles.css

HTML File

project/

│

├── index.html

│

└── styles.css

CSS File

The browser combines both files to create the final webpage.

What Does a CSS File Contain?

A CSS file contains only CSS rules.

Example:

That’s it. No HTML is required.

Important Rule

A CSS file should not contain HTML tags.

Wrong:

This is invalid.

Correct CSS File

Only CSS rules and comments should appear in a stylesheet.

Understanding CSS Comments

Comments are notes for developers.

Example:

The browser ignores comments. They help explain your code.

The .css Extension

Most stylesheet files use the .css extension.

Examples:

• styles.css
• main.css
• layout.css
• theme.css

Why the Extension Matters

The .css extension helps browsers and servers identify the file as a stylesheet.

Although some systems can work without it, using .css avoids compatibility issues.

The @import Rule

Another way to load a stylesheet is using @import.

Example:

This tells one stylesheet to load another stylesheet.

Example

The browser loads colors.css, and then the remaining CSS rules.

Important Note About @import

If you use @import, it must appear before other CSS rules.

Correct:

This tells one stylesheet to load another stylesheet.

Example

This may not work properly.

Which Is Better: link or @import?

Most developers prefer:

because it is faster, simpler, more widely used, and easier to maintain.

Memory Aid

Think of a movie.

HTML

The actors.

CSS

The costumes.

Link Element

The costume designer bringing costumes to the set.

Without the link element, the actors never receive their costumes.

because it is faster, simpler, more widely used, and easier to maintain.

Practice Exercise

Create the following files:

• index.html
• styles.css

style.css

index.html

Open the page in a browser and confirm that the styles from styles.css are applied successfully.