How to Add CSS to HTML

There are three ways to apply CSS to HTML:

✅ 1. Inline CSS (Quick but not recommended)

You apply CSS directly inside an HTML tag using the style attribute.

<h1 style="color: blue; font-size: 24px;">Hello World</h1>

📌 Use only for quick testing or one-off tweaks.
❌ Not scalable, clutters HTML.

✅ 2. Internal CSS (Within the HTML file)

Add a <style> tag inside the <head> section of your HTML file.

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: green;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <p>This is a paragraph.</p>
</body>
</html>

✅ Good for small projects or single-page styling.
❌ Not reusable across pages.

✅ 3. External CSS (Best practice)

Link an external .css file using the <link> tag.

<!-- Inside the <head> tag -->
<link rel="stylesheet" href="styles.css">

/* styles.css */
body {
  font-family: Arial, sans-serif;
  margin: 0;
}

✅ Most organized, reusable, and scalable approach.
📁 Keep all your styles in one or more .css files.

📌 Where to Place the Link?

Always include the <link> to your external CSS inside the <head> of your HTML document — so styles load before the page renders.

📝 Recap Table

Method	Location	Use Case
Inline CSS	Inside tag	Testing only
Internal CSS	In `<style>` tag	One-page websites
External CSS	In `.css` file	Best for all projects