Using CSS, you can transform a plain HTML page into something visually engaging. While it’s possible to include CSS directly within your HTML files, linking to an external stylesheet keeps your code organized. With external stylesheets, you can control the look and feel of multiple pages from a single file, making updates faster and more efficient.
How to Link an External Stylesheet
To link an external stylesheet to your HTML, use the <link> tag in the <head> section of your document. The <link> tag should include two main attributes:
rel– specifies the relationship between the current document and the linked file.href– points to the URL or file path of the stylesheet.
HTML Linking External Stylesheets Syntax
<link rel="stylesheet" href="styles.css">
HTML Linking External Stylesheets Example Code
Explanation of Code:
- The
<link>tag in the<head>section ofindex.htmltells the browser to use the styles defined instyles.css. - The CSS file then controls the appearance of the
<body>,<h1>, and<p>elements.
Let’s say you have an HTML file (index.html) and a CSS file (styles.css). Here’s how to link them:
<html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Styled Webpage</title> <link rel="stylesheet" href="styles.css"> <!-- Linking the CSS file --></head><body> <h1>Welcome to My Webpage</h1> <p>This is a paragraph with custom styling.</p></body></html>Here’s the CSS Sample File:
/* styles.css */body { font-family: Arial, sans-serif; background-color: #f0f0f0; margin: 0; padding: 0;}h1 { color: #333; text-align: center; margin-top: 50px;}p { color: #666; text-align: center; font-size: 18px;}HTML Linking External Stylesheets File Organization Tips
When you start working on larger projects, keeping files organized is essential. Typically, you’ll store all your CSS files in a folder like this:
my-project/├── index.html└── css/ └── styles.cssTo link styles.css in this structure, update the href path:
<link rel="stylesheet" href="css/styles.css">HTML Linking MULTIPLE External Stylesheets
It’s possible to link more than one stylesheet. Just add another <link> tag for each additional file:
<link rel="stylesheet" href="base.css"><link rel="stylesheet" href="layout.css"><link rel="stylesheet" href="theme.css">Styles are applied in the order they are linked. If two stylesheets contain conflicting rules, the styles in the last linked file will override earlier ones.
HTML Labs
