Three Ways to Add CSS

There are three methods to apply CSS styles to your HTML documents. Each method has its own use cases, advantages, and disadvantages. Understanding when to use each approach is important for writing clean, maintainable code.

The three methods are:

Inline CSS using the style attribute directly on elements
Internal CSS using a `<style>` tag in the document head
External CSS using a separate .css file linked to the document

Inline CSS

Inline CSS applies styles directly to individual HTML elements using the `style` attribute. The styles only affect that specific element.

HTML

<h1 style="color: blue; font-size: 36px;">Welcome to My Site</h1>
<p style="color: gray; line-height: 1.6;">This is a paragraph with inline styles.</p>
<div style="background-color: #f0f0f0; padding: 20px; border-radius: 8px;">
  This div has a light gray background.
</div>

When to Use Inline CSS

Quick testing or debugging
Email templates where external stylesheets may not be supported
Dynamic styles set by JavaScript
Overriding other styles in very specific cases

Why Inline CSS Is Not Recommended for Most Cases

No reusability: You cannot reuse the same style on multiple elements
Hard to maintain: Changes require editing every element individually
Mixes content with presentation: Goes against the principle of separation of concerns
High specificity: Inline styles override most other CSS rules, making debugging difficult

Internal CSS

Internal CSS is defined within a `<style>` element inside the `<head>` section of the HTML document. The styles apply to all matching elements on that page.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      background-color: #fafafa;
    }

    h1 {
      color: #2c3e50;
      text-align: center;
      padding: 20px 0;
    }

    p {
      color: #555;
      line-height: 1.8;
      max-width: 700px;
      margin: 0 auto;
      padding: 0 20px;
    }

    .highlight {
      background-color: #fff3cd;
      padding: 4px 8px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>This paragraph is styled using <span class="highlight">internal CSS</span>.</p>
</body>
</html>

When to Use Internal CSS

Single-page websites or landing pages
Page-specific styles that are not shared across other pages
Prototyping and quick mockups
When you need styles to load without an additional HTTP request

Limitations of Internal CSS

Not reusable across pages: Each page needs its own copy of the styles
Increases page size: The CSS is downloaded with every page load
Harder to maintain: Style changes need to be made in each HTML file

External CSS

External CSS is the most common and recommended method. You create a separate `.css` file and link it to your HTML document using the `<link>` element.

The CSS File (styles.css)

CSS

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Base Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}

/* Header */
header {
  background-color: #2c3e50;
  color: white;
  padding: 20px;
  text-align: center;
}

/* Navigation */
nav {
  background-color: #34495e;
  padding: 10px;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 8px 16px;
  margin-right: 5px;
}

nav a:hover {
  background-color: #4a6fa5;
  border-radius: 4px;
}

/* Main Content */
main {
  max-width: 800px;
  margin: 20px auto;
  padding: 0 20px;
}

/* Footer */
footer {
  background-color: #2c3e50;
  color: #ccc;
  text-align: center;
  padding: 15px;
  margin-top: 40px;
}

The HTML File (index.html)

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Website</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My Website</h1>
  </header>
  <nav>
    <a href="/">Home</a>
    <a href="/about">About</a>
    <a href="/contact">Contact</a>
  </nav>
  <main>
    <h2>Welcome</h2>
    <p>This page is styled using an external CSS file.</p>
  </main>
  <footer>
    <p>2025 My Website. All rights reserved.</p>
  </footer>
</body>
</html>

Why External CSS Is Recommended

Reusability: One CSS file can style multiple HTML pages
Separation of concerns: HTML handles structure, CSS handles presentation
Browser caching: The CSS file is cached after the first load, making subsequent pages faster
Easy maintenance: Change styles in one place and it updates across all pages
Smaller HTML files: Keeps your HTML clean and focused on content

Linking Multiple Stylesheets

You can link multiple CSS files to a single HTML document. This is useful for organizing your styles.

HTML

<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="layout.css">
  <link rel="stylesheet" href="components.css">
  <link rel="stylesheet" href="utilities.css">
</head>

The order matters. Stylesheets loaded later can override styles from earlier ones if they have the same specificity.

CSS Comments

Comments help you document your CSS code. They are ignored by the browser and are useful for explaining sections of your stylesheet.

CSS

/* This is a single-line comment */

/*
  This is a multi-line comment.
  It can span several lines.
  Use it to describe sections of your stylesheet.
*/

/* ===========================
   Header Styles
   =========================== */
header {
  background-color: #2c3e50;
  padding: 20px;
}

/* Navigation links - horizontal layout */
nav a {
  display: inline-block;
  padding: 8px 16px;
}

The @import Rule

Another way to include CSS is using the `@import` rule inside a CSS file or a `<style>` tag. However, this method is generally not recommended for production websites because it blocks parallel downloading of stylesheets.

CSS

/* Inside a CSS file */
@import url('reset.css');
@import url('typography.css');

body {
  font-family: Arial, sans-serif;
}

Use `<link>` tags instead of `@import` for better performance, since `<link>` allows the browser to download multiple stylesheets at the same time.

Comparison of Methods

Here is a quick comparison to help you decide which method to use:

Inline CSS: Use for quick fixes, email templates, or JavaScript-driven styles. Not recommended for general styling.
Internal CSS: Use for single-page sites or page-specific styles. Good for prototyping.
External CSS: Use for all production websites. Best for maintainability, performance, and reusability.

Summary

For most web development projects, external CSS is the standard approach. It keeps your code organized, makes maintenance easier, and takes advantage of browser caching for better performance. Internal CSS is useful for single pages, and inline CSS should be reserved for special cases only.

In the next article, you will learn about CSS colors and backgrounds to bring visual life to your pages.