How to Add CSS to HTML: Inline, Internal, and External Styles

Live editor for all the examples will be added soon.

There are three main ways to add CSS to your HTML: inline, internal, and external styles. Each method has its own use case, advantages, and limitations. In this post, we will go through each method, explain when to use it, and provide examples to help you understand how to apply them effectively.

1. Inline CSS

What is Inline CSS?

Inline CSS involves adding CSS directly to individual HTML elements using the style attribute. This is the simplest way to apply styles to a single element.

When to Use Inline CSS?

Inline CSS is useful for quick fixes, overriding other styles, or when you only need to style a specific element without creating a separate CSS file. However, inline styles can make your code messy and harder to maintain, so they should generally be avoided for larger projects.

Syntax:

<element style="property: value;">

Example:

<p style="color: red; font-size: 20px;">This is a paragraph with inline CSS.</p>

In this example, the <p> element will display with red text and a font size of 20 pixels.

Pros:

Quick and easy for small changes.
Can be used to override other styles.

Cons:

Difficult to maintain for large projects.
Can clutter HTML code.
Does not allow reusability across multiple elements.

2. Internal CSS

What is Internal CSS?

Internal CSS is a method of adding styles directly in the <head> section of an HTML document using the <style> tag. It applies styles to the entire HTML file.

When to Use Internal CSS?

Internal CSS is suitable for styling a single page or when you don’t want to use an external CSS file. It’s also useful for quickly testing styles before creating an external file. However, if you are working on multiple pages, internal CSS can make your code repetitive.

Syntax:

<head>
  <style>
    selector {
      property: value;
    }
  </style>
</head>

Example:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Internal CSS Example</title>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: navy;
      text-align: center;
    }
    p {
      font-size: 18px;
      color: darkgray;
    }
  </style>
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph with internal CSS.</p>
</body>
</html>

In this example, all paragraphs will have dark gray text with a font size of 18px, the heading will be navy, and the background will be light blue for the entire page.

Pros:

Keeps styles within the HTML document.
Useful for single-page styling.

Cons:

Cannot be reused across multiple pages.
Not as efficient for large projects with multiple pages.

3. External CSS

What is External CSS?

External CSS involves linking an external .css file to your HTML document using the <link> tag inside the <head> section. This method allows you to apply the same styles across multiple HTML pages.

When to Use External CSS?

External CSS is the preferred method for styling larger websites because it separates the styling rules from the HTML content. This makes your code cleaner, easier to maintain, and reusable across multiple pages.

Syntax (Linking the CSS file):

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

Example (HTML):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Example</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is a paragraph with external CSS.</p>
</body>
</html>

Example (styles.css):

body {
  background-color: lightgray;
}

h1 {
  color: green;
  text-align: center;
}

p {
  font-size: 16px;
  color: black;
}

In this example, the HTML file links to an external CSS file (styles.css) that defines the styles for the body, heading, and paragraph elements. Any HTML page that links to styles.css will follow these rules.

Pros:

Reusable across multiple HTML pages.
Cleaner and easier to maintain.
Keeps HTML and CSS separate, promoting modular design.

Cons:

Requires an extra HTTP request to load the CSS file (though this is usually not a problem with modern browsers).
Styles are not immediately visible in the HTML file (making debugging more difficult for beginners).

4. Which Method to Choose?

Inline CSS: Best for small, one-off changes or when you need to override other styles quickly.
Internal CSS: Suitable for single-page applications or when prototyping styles before moving them to an external file.
External CSS: Best for larger projects and when the same styles need to be applied to multiple pages.

Tips for Choosing the Best Approach:

For small projects or testing: You can use inline or internal CSS for quick changes.
For larger websites: Always use external CSS for maintainability and scalability.
Maintainability: External CSS keeps your styles organized and reusable, making it easier to maintain the code as the project grows.

Conclusion

There are three ways to add CSS to your HTML: inline, internal, and external. Each method has its own use case, but in general, external CSS is the most efficient and maintainable way to style websites. Understanding these methods will help you decide which approach to take depending on the project size and complexity.