Alternate Stylesheets in CSS

• Persistent Stylesheets: Have no title and are always active.

• Preferred Stylesheets: Have a title and set the initial default theme.

• Alternate Stylesheets: Use rel="alternate stylesheet" with a title to offer optional themes.

• Modern Usage: Today, theme switching is usually built with CSS variables and JavaScript.

RECOMMENDED ARTICLES

In the previous modules, you learned how to connect one or more stylesheets to a webpage.

But what if you want users to choose between different visual designs?

For example:

• Normal text size
• Large text size
• Dark theme
• Light theme
• High-contrast mode

This is where alternate stylesheets come in.

What Is an Alternate Stylesheet?

An alternate stylesheet is a stylesheet that is available for use but is not applied automatically when the page first loads.

Instead, the user can choose to activate it.

Think of alternate stylesheets as optional themes for a website.

Simple Analogy

Imagine buying a smartphone. It comes with several wallpapers:

• Nature wallpaper
• Dark wallpaper
• Sports wallpaper

Only one wallpaper is active at a time.

The others remain available until you choose them. Alternate stylesheets work in a similar way.

Creating an Alternate Stylesheet

To create one, use:

Example:

This tells the browser:

“This stylesheet exists, but don’t use it unless the user selects it.”

A Complete Example:

Possible choices:

1. Style OptionStylesheet
2. Defaultdefault.css
3. Large Textlarge-text.css
4. Dark Modedark-mode.css

Why Is the title Attribute Important?

The browser uses the title attribute to identify stylesheet choices.

Example:

This is the name shown to users.

Without a title, the browser cannot properly identify alternate stylesheets.

How Browsers Use Titles

Example:

The browser may display:

Available Styles

✓ Default

○ Dark Theme

The user selects the desired option.

Real-World Example

Imagine an educational website.

Some users may have difficulty reading small text.

You could offer:

Users can switch to larger text without affecting the website’s content.

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.

Grouping Alternate Stylesheets

Sometimes you need different stylesheets for different devices or media.

For example:

• One stylesheet for screens
• Another for printing

Yet both belong to the same theme.

Example

How This Works

Suppose the user chooses:

• Large Text

The browser automatically uses:

• large-screen.css

for screens and, 

• large-print.css

for printing.

Because both stylesheets share the same title:

the browser treats them as part of one theme.

Preferred Stylesheets

Now let’s discuss a concept that confuses many beginners.

What Is a Preferred Stylesheet?

A preferred stylesheet is a stylesheet that has:

It also has a:

Example:

This stylesheet becomes the default choice when the page first loads.

Preferred Stylesheet Analogy

Imagine entering a restaurant. The restaurant automatically serves its signature meal. You can request another meal later, but the signature meal is served first. That signature meal is like a preferred stylesheet.

What Happens When an Alternate Style Is Selected?

Suppose the page starts with:

The browser loads:

• Default

Now the user chooses:

• Large Text

The browser stops using the preferred stylesheet and switches to the alternate stylesheet.

Only the selected theme remains active.

Important Rule

Once an alternate stylesheet is selected:

Default stylesheet → disabled

Selected alternate stylesheet → active

This prevents conflicting themes.

Common Beginner Mistake: Multiple Preferred Stylesheets

Consider this:

At first glance, this seems reasonable. However, all three stylesheets now have titles. This makes all three preferred stylesheets.

Why Is This a Problem?

The browser expects only one preferred stylesheet group. 

When multiple unrelated preferred stylesheets exist:

• Browser behavior becomes unpredictable.
• Some stylesheets may be ignored.
• Different browsers may behave differently.

Better Approach

Use titles only when creating alternate stylesheet groups.

For ordinary stylesheets:

This is much safer.

Persistent Stylesheets

A stylesheet without a title is called a persistent stylesheet.

Example:

Persistent stylesheets are always applied.

They cannot be turned off through stylesheet selection.

Why Persistent Stylesheets Are Useful

Many websites need some styles to remain active regardless of the selected theme.

For example:

• Layout styles
• Navigation styles
• Responsive design styles

These should remain active whether the user chooses:

• Dark Mode
• Light Mode
• Large Text

Persistent stylesheets are perfect for this.

Example Setup

• Always Active

Result:

Layout styles always remain. User chooses Light or Dark theme.

Note

Modern websites rarely rely on browser-provided alternate stylesheet menus.

Today, developers usually build their own theme-switching systems using:

• CSS variables
• JavaScript
• Theme toggles

However, understanding alternate stylesheets helps you understand how stylesheet management evolved.

Memory Aid

Think of clothing.

Persistent Stylesheet.

• Your body.

Always present.

• Preferred Stylesheet

Your default outfit.

• Worn automatically.

Alternate Stylesheet

• Other outfits in your wardrobe.

Available when you choose them.

Common Mistakes Beginners Make

1. Forgetting the title Attribute

Wrong:

Without a title, the browser cannot identify the alternate style properly.

2. Giving Every Stylesheet a Title

Wrong:

2. Giving Every Stylesheet a Title

Wrong:

This may create preferred stylesheet conflicts.

3. Confusing Preferred and Persistent Stylesheets

Remember:

4. Expecting Modern Browsers to Show Theme Menus

Most modern browsers do not expose alternate stylesheet selection prominently.

Many developers implement theme switching themselves.

Quick Summary

Alternate stylesheets provide optional visual themes.

They use:

The title attribute identifies each theme.

A stylesheet with:

and a title becomes a preferred stylesheet.

A stylesheet without a title becomes a persistent stylesheet.

Persistent stylesheets are always applied.

Alternate stylesheets replace preferred stylesheets when selected. 

Modern websites usually implement theme switching using CSS and JavaScript instead.