How to Add CSS to HTML: Inline, Internal, and External Methods Explained

Overview

CSS (Cascading Style Sheets) is used to style and layout web pages - for example, to change fonts, colors, spacing, and more.

There are three main ways to insert CSS into an HTML document:

1. Inline CSS

Applied directly inside an HTML element using the style attribute. Best used for quick styling or testing, not recommended for large projects.

Syntax:

<p style="color: blue; text-align: center;">This is styled using inline CSS</p>

Key Point

Only applies to the element where it is written.

Least maintainable and should be avoided for larger projects.

2. Internal CSS

Written inside a <style> tag within the <head> section of the HTML document. Useful when styling a single page.

Syntax:

<!DOCTYPE html>
<html>

<head>
  <style>
    p {
      color: green;
      font-size: 18px;
    }
  </style>
</head>

<body>
  <p>This is styled using internal CSS</p>
</body>

</html>

Key Point

All styles are included in the same HTML file.

Not reusable across multiple pages.

3. External CSS

Links to an external.css file using the <link> tag inside the <head> section. Best practice for large websites or projects with multiple pages.

HTML File (index.html)

<!DOCTYPE html>
<html>

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

<body>
  <p>This is styled using external CSS</p>
</body>

</html>

CSS File (style.css)

p {
  color: red;
  font-size: 20px;
}

Key Point

Allows you to manage styles separately from HTML content.

Easy to reuse across multiple pages.

Most maintainable and preferred method.