How do I attach a CSS file to HTML?

To attach a CSS file to your HTML document, you use the <link> tag within the <head> section of your HTML. This tells the browser where to find the CSS rules that style your page.

Attaching a CSS File: The `<link>` Tag

The <link> tag is an HTML element that specifies the relationship between the current document and an external resource. In the context of CSS, it defines the link between your HTML file and your CSS stylesheet.

Here's the basic syntax:

<!DOCTYPE html>
<html>
<head>
  <title>My Webpage</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- Your content goes here -->
</body>
</html>

Let's break down the attributes of the <link> tag:

rel="stylesheet": This attribute specifies the relationship between the linked document and the current document. In this case, it indicates that the linked document is a stylesheet. It's essential to set rel to stylesheet so the browser knows to treat the linked file as CSS.
href="style.css": This attribute specifies the URL (path) to the CSS file. style.css is just an example; replace it with the actual name and path to your CSS file. The path can be:
- Relative: (e.g., "style.css", "css/style.css", "../css/style.css") – relative to the location of the HTML file.
- Absolute: (e.g., "/css/style.css", "http://www.example.com/css/style.css") – a full URL. Using absolute URLs is generally discouraged for local development and internal projects because they can break if the domain changes.

Example: Linking an External CSS File

Imagine you have an HTML file named index.html and a CSS file named style.css, both in the same directory. Here's how you would link them:

Create index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This is a paragraph of text.</p>
</body>
</html>

Create style.css:

body {
  font-family: sans-serif;
  background-color: #f0f0f0;
}

h1 {
  color: blue;
}

Now, when you open index.html in your browser, the styles defined in style.css will be applied to the HTML elements. The <h1> tag will appear in blue and the background of the entire page will be light grey.

Important Considerations:

Placement: The <link> tag should always be placed within the <head> section of your HTML document. This ensures that the CSS is loaded before the content of the page, preventing any "flash of unstyled content" (FOUC).
File Path: Double-check that the href attribute points to the correct location of your CSS file. Typos or incorrect paths are common causes of CSS not being applied.
Multiple Stylesheets: You can link multiple CSS files to a single HTML document. The order in which they are linked matters, as styles defined in later stylesheets can override styles defined in earlier ones.
Browser Caching: Browsers cache CSS files to improve performance. If you make changes to your CSS and don't see them reflected in the browser, try clearing your browser's cache or using a cache-busting technique (e.g., appending a version number to the CSS file URL like style.css?v=1).

How do I attach a CSS file to HTML?

Attaching a CSS File: The <link> Tag

Example: Linking an External CSS File

Important Considerations:

Attaching a CSS File: The `<link>` Tag