How To Add CSS To HTML - Inline, Internal And External

Now that you know what CSS is, it’s time to learn how to actually use it in your web pages.

There are three main ways to add CSS to your HTML:

Inline CSS – directly inside HTML tags
Internal CSS – using a <style> block inside the HTML file
External CSS – writing CSS in a separate file and linking it

Each method has its use. Let’s explore them all with easy examples.

Table of Contents

Inline CSS

This is the quickest way to apply CSS to a single HTML element.

Syntax:

<tag style="property: value;">

<tag style="property: value;">

Example:

<p style="color: red;">This is a red paragraph.</p>

<p style="color: red;">This is a red paragraph.</p>

✅ This method is good for quick tests or small edits.
❌ It is not recommended for larger projects (gets messy fast)

Internal CSS

Here, CSS is written in a <style> tag inside the <head> of your HTML document.

Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a styled paragraph using internal CSS.</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This is a styled paragraph using internal CSS.</p>
</body>
</html>

✅ This method is good for small single-page projects.
❌ Styling added in this way cannot be reused across multiple pages.

External CSS (Best Practice)

This is the most efficient and professional method. You write CSS in a separate file (e.g., style.css) and link it to your HTML file.

Example of style.css file

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

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

Example of linking your style.css file to your HTML file

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

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

✅ This method is best for websites with multiple pages
🎯 In this method code is kept clean and manageable

When to Use Each Method

Method	Use When…	Avoid When…
Inline	Making quick changes or email templates	Managing entire site styles
Internal	Testing or single-page demos	Building multi-page websites
External	You want clean, organized, reusable code	You only need one quick style change

Summary

You have now learned the three ways to add CSS to HTML:

Inline CSS for quick edits
Internal CSS for small pages
External CSS for clean, scalable websites

Note that, as you grow as a developer, you will rely mostly on external stylesheets.