Home/CSS/Adding CSS to HTML

Adding CSS to HTML

CSS Basics•Reading time: 6 min

Now that you understand what CSS is, it's time to learn how to add it to your HTML documents. There are three different methods to include CSS in your web pages, each with its own advantages and use cases.

In this tutorial, you'll learn the different ways to add CSS to HTML, understand when to use each method, and see practical examples of each approach.

1Inline CSS

Inline CSS is applied directly to individual HTML elements using the style attribute. The CSS declarations are written as the attribute's value.

Syntax

html

<element style="property: value; property: value;">Content</element>

Example

html

<h1 style="color: blue; text-align: center;">This is a Blue Centered Heading</h1>

<p style="font-size: 18px; color: #333; line-height: 1.5;">
  This paragraph has custom font size, color, and line height.
</p>

<div style="background-color: #f0f0f0; padding: 20px; border: 1px solid #ddd; border-radius: 5px;">
  This div has a light gray background, padding, and a border.
</div>

Visual Example:

This is a Blue Centered Heading

This paragraph has custom font size, color, and line height.

This div has a light gray background, padding, and a border.

Advantages:

Quickly apply styles to a single element
Useful for testing or small, one-time style changes
No need for separate CSS files
Styles are directly tied to the element

Disadvantages:

Mixes content with presentation
Cannot be reused for other elements
Increases HTML file size
Difficult to maintain on large websites
Highest specificity, can be hard to override

2Internal CSS

Internal CSS (also called embedded CSS) is placed within a <style> tag in the <head> section of an HTML document. This method allows you to define styles for multiple elements on a single page.

Syntax

html

<!DOCTYPE html>
<html>
<head>
  <title>Page Title</title>
  <style>
    selector {
      property: value;
      property: value;
    }
    
    selector {
      property: value;
    }
  </style>
</head>
<body>
  <!-- HTML content -->
</body>
</html>

Example

html

<!DOCTYPE html>
<html>
<head>
  <title>Internal CSS Example</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 20px;
      background-color: #f5f5f5;
    }
    
    h1 {
      color: #0066cc;
      text-align: center;
      border-bottom: 2px solid #eee;
      padding-bottom: 10px;
    }
    
    p {
      font-size: 16px;
      line-height: 1.6;
      color: #333;
      margin-bottom: 15px;
    }
    
    .highlight {
      background-color: #fffde7;
      padding: 15px;
      border-left: 4px solid #ffd600;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Website</h1>
  
  <p>This is a paragraph with styles defined in the internal stylesheet.</p>
  
  <p class="highlight">This paragraph has a special highlight class applied to it.</p>
</body>
</html>

Visual Result:

Welcome to My Website

This is a paragraph with styles defined in the internal stylesheet.

This paragraph has a special highlight class applied to it.

Advantages:

No need for external files
Styles apply to multiple elements on the page
Can use classes and IDs for reusability
Good for single-page websites
Changes only affect the current page

Disadvantages:

Increases page size and loading time
Styles cannot be reused on other pages
Mixing HTML structure with CSS presentation
Less maintainable for multi-page websites
No caching benefits for repeat visitors

3External CSS

External CSS involves creating a separate CSS file with all your styles and linking it to your HTML documents. This is the most common and recommended approach for most websites.

Linking to External CSS

To link an external CSS file to your HTML document, use the <link> element in the <head> section:

html

<head>
  <title>My Page</title>
  <link rel="stylesheet" href="styles.css">
</head>

The href attribute specifies the path to the CSS file, which can be a relative or absolute URL.

Example

HTML File (index.html):

html

<!DOCTYPE html>
<html>
<head>
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header>
    <h1>My Website</h1>
    <nav>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </nav>
  </header>
  
  <main>
    <h2>Welcome to my site</h2>
    <p>This is a paragraph styled with an external CSS file.</p>
    <p class="highlight">This paragraph has a special highlight class.</p>
  </main>
  
  <footer>
    <p>&copy; 2025 My Website</p>
  </footer>
</body>
</html>

CSS File (styles.css):

html

/* Global Styles */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  color: #333;
  background-color: #f9f9f9;
}

/* Header Styles */
header {
  background-color: #2c3e50;
  color: white;
  padding: 1rem;
}

header h1 {
  margin: 0;
}

nav ul {
  list-style: none;
  padding: 0;
  display: flex;
}

nav li {
  margin-right: 1rem;
}

nav a {
  color: white;
  text-decoration: none;
}

nav a:hover {
  text-decoration: underline;
}

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

h2 {
  color: #2c3e50;
  border-bottom: 2px solid #ecf0f1;
  padding-bottom: 0.5rem;
}

.highlight {
  background-color: #fffde7;
  padding: 1rem;
  border-left: 4px solid #ffd600;
}

/* Footer */
footer {
  background-color: #34495e;
  color: white;
  text-align: center;
  padding: 1rem;
  margin-top: 2rem;
}

Advantages:

Complete separation of content and presentation
Styles can be used across multiple pages
Reduces file size of individual HTML pages
Browsers can cache the CSS file
Easier to maintain and update styles
Better for teams (developers can work separately on HTML and CSS)

Disadvantages:

Requires an additional HTTP request
Page may display without styles until CSS loads
More files to manage
Not suitable for email templates (where external files aren't supported)

Multiple Stylesheets

You can link multiple CSS files to a single HTML document. This is useful for organizing styles into logical groups (e.g., layout.css, typography.css, colors.css) or when using CSS frameworks alongside custom styles.

html

<head>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="framework.css">
  <link rel="stylesheet" href="main.css">
</head>

The order matters: styles in later files can override earlier ones.

4Method Comparison

Each method has its place in web development. Here's a comparison to help you choose the right approach for different situations:

Feature	Inline CSS	Internal CSS	External CSS
Best for	Single element styling, overrides, testing	Single-page websites, prototypes	Multi-page websites, production sites
Reusability	None	Within the same page	Across multiple pages
Maintenance	Difficult	Moderate	Easy
Page Load Impact	Increases HTML size	Increases initial page size	Additional HTTP request but can be cached
Caching	No benefits	No benefits	Can be cached by browser
Specificity	Highest (hardest to override)	Normal CSS specificity rules	Normal CSS specificity rules

Best Practice

For most websites, external CSS is the recommended approach. It provides the best separation of concerns, maintainability, and performance benefits. However, you may occasionally use inline CSS for quick fixes or testing, and internal CSS for single-page applications or demos.

5Try It Yourself

Practice adding CSS to HTML using all three methods. Create a simple HTML document and style it three different ways:

index.html

Example Code

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>CSS Methods Practice</title>
  
  <!-- Internal CSS -->
  <style>
    /* Internal CSS styles */
    body {
      font-family: Arial, sans-serif;
      line-height: 1.6;
      margin: 0;
      padding: 20px;
    }
    
    h1 {
      color: #2c3e50;
      text-align: center;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      padding: 20px;
      background-color: #f5f5f5;
      border-radius: 5px;
    }
    
    .info-box {
      background-color: #e8f4fd;
      border-left: 4px solid #2196f3;
      padding: 15px;
      margin: 20px 0;
    }
  </style>
  
  <!-- External CSS (uncomment to use) -->
  <!-- <link rel="stylesheet" href="styles.css"> -->
</head>
<body>
  <div class="container">
    <h1>CSS Methods Practice</h1>
    
    <!-- Using Internal CSS -->
    <h2>Internal CSS Example</h2>
    <p>This paragraph is styled using the internal CSS defined in the head section.</p>
    <div class="info-box">
      <p>This is an info box styled with a class from the internal stylesheet.</p>
    </div>
    
    <!-- Using Inline CSS -->
    <h2 style="color: #e91e63; border-bottom: 2px solid #e91e63; padding-bottom: 5px;">
      Inline CSS Example
    </h2>
    <p style="font-size: 18px; color: #555; font-style: italic;">
      This paragraph is styled using inline CSS with the style attribute.
    </p>
    
    <!-- Area for External CSS (would be styled if the external stylesheet was linked) -->
    <h2>External CSS Example</h2>
    <p>If the external stylesheet was linked, this section would be styled according to those rules.</p>
    <div class="external-box">
      <p>This box has a class that would be styled by the external CSS file.</p>
    </div>
  </div>
</body>
</html>

styles.css

External CSS File

html

/* External CSS styles */
h2 {
  color: #8e44ad;
  margin-top: 30px;
}

.external-box {
  background-color: #f9edf9;
  border: 2px dashed #8e44ad;
  border-radius: 5px;
  padding: 15px;
  margin: 20px 0;
}

/* These styles would override the internal ones if linked */
.info-box {
  background-color: #edf9ed;
  border-left: 4px solid #27ae60;
}

Pro Tip

In real-world projects, you'll often use a combination of these methods. External CSS is your main approach, internal CSS might be used for page-specific styles, and inline CSS for dynamic styles applied through JavaScript or for quick overrides.

Summary

✓
Inline CSS is applied directly to HTML elements using the style attribute
✓
Internal CSS is placed within a style tag in the head section of an HTML document
✓
External CSS is stored in separate .css files and linked to HTML documents
✓
External CSS is generally the best approach for multi-page websites and production environments
✓
Each method has advantages and appropriate use cases

Previous: Introduction to CSS Next: CSS Selectors