HTML Course 13.1 Linking style sheets (link rel=’stylesheet’)

13.1 Linking Style Sheets (link rel='stylesheet')

The <link> element connects an external CSS file to an HTML document.
It must appear within the <head> section. By keeping style rules in separate
files, you improve maintainability, caching efficiency and separation of concerns.

Core Attributes

• rel – relationship of the linked file. For CSS use stylesheet.
• href – URL or path to the CSS file.
• type – MIME type, typically text/css. HTML5 infers this by default.
• media – media query or device target (e.g., screen, print,
  (max-width: 600px)).
• title – used when defining alternate style sheets.
• disabled – boolean to disable the linked CSS.
• integrity – Subresource Integrity hash for CDN-hosted files.
• crossorigin – if required by SRI or CORS policies.

1. Basic Linking Example

This example demonstrates including a simple external stylesheet:

<link rel='stylesheet' href='styles/main.css' type='text/css'>
  

Comments in the CSS file (styles/main.css):

/* styles/main.css */
body {
  font-family: Arial, sans-serif; /* base font */
  margin: 0;
  padding: 0;
}

h1, h2, h3 {
  color: #333; /* heading color */
}
  

2. Linking Multiple Style Sheets & Media Queries

You can include several stylesheets for different devices or contexts:

<!-- main screen CSS for desktop & mobile -->
<link rel='stylesheet' href='styles/screen.css' media='screen'>

<!-- print-specific CSS -->
<link rel='stylesheet' href='styles/print.css' media='print'>

<!-- responsive CSS for small viewports -->
<link rel='stylesheet' href='styles/mobile.css' media='(max-width: 600px)'>
  

The browser will apply only the stylesheet whose media attribute matches the device environment.
This approach prevents unnecessary CSS from loading on devices where it isn’t needed.

3. Alternate Style Sheets

Provide users with multiple themes or designs:

<!-- default (preferred) style -->
<link rel='stylesheet' href='styles/light.css' title='light'>

<!-- alternate dark theme -->
<link rel='alternate stylesheet' href='styles/dark.css' title='dark'>
  

Users or scripts can switch between these by matching the title attribute
and enabling/disabling the corresponding <link> elements.

4. Disabling a Stylesheet Dynamically

Use the disabled attribute to turn off a linked stylesheet without removing the tag:

<link id='secondary-style' rel='stylesheet' href='styles/secondary.css'>

<!-- Later in script or via developer console -->
<script>
  document.getElementById('secondary-style').disabled = true;
</script>
  

5. Using Subresource Integrity (SRI) with CDNs

For security, verify CDN-hosted CSS has not been tampered with:

<link rel='stylesheet'
      href='https://cdn.example.com/css/framework.min.css'
      integrity='sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/uxJvBgtlJx0xv+jYmJmAxmJ7ohvLb6A'
      crossorigin='anonymous'>
  

The integrity attribute holds the base64-encoded cryptographic hash. The browser
blocks loading if the hash does not match.

6. Preloading Stylesheets for Performance

To prioritize critical CSS, use rel='preload' with an as='style' hint:

<link rel='preload' href='styles/critical.css' as='style'>
<link rel='stylesheet' href='styles/critical.css'>
  

This tells the browser to fetch the CSS early while still applying it as a standard stylesheet.

Best Practices

• Place <link> tags near the top of <head> for faster rendering.
• Avoid @import inside CSS—link tags load faster and can be parallelized by browsers.
• Use media queries in media attribute to limit unnecessary CSS downloads.
• Leverage caching headers on your server for linked CSS files.
• Group related CSS into logical files (e.g., layout.css, theme.css, print.css).