How to Add CSS in HTML

CSS Tutorial

CSS Introduction
CSS Syntax
CSS Selectors
CSS How to Add
CSS Comments

….

🎨 How to Add CSS in HTML

🧠 Learn to Style Your Web Pages with Ease – Powered by GoNimbus

When a web browser loads your HTML page, it looks for associated CSS rules to style the content. CSS (Cascading Style Sheets) allows you to control the layout, color, fonts, spacing, and design of your webpage efficiently.

Let’s explore the three primary methods of adding CSS to your HTML documents.

✅ 1. External CSS

Best Practice: Ideal for styling multiple web pages consistently

With External CSS, all your styles are stored in a separate .css file, making it easy to apply a consistent design across your entire website. This also improves maintainability by allowing updates from a single location.

🔧 How to Link External CSS:

Include a <link> tag inside the <head> section of your HTML page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>

📄 `styles.css` Example:

body {
  background-color: lightblue;
}

h1 {
  color: navy;
  margin-left: 20px;
}

✅ Note: Never add a space between the value and the unit.

❌ Incorrect: margin-left: 20 px;

✅ Correct: margin-left: 20px;

✅ 2. Internal CSS

Use When: You want styles to apply only to a single HTML page

Internal CSS is written directly within the <style> tag, inside the <head> section of your HTML document. It’s useful for quick demos or page-specific styles.

🔧 Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: linen;
    }

    h1 {
      color: maroon;
      margin-left: 40px;
    }
  </style>
</head>
<body>

  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>

</body>
</html>

✅ 3. Inline CSS

Use When: You want to style a single HTML element uniquely

Inline CSS is applied directly within the HTML element using the style attribute. It is helpful for minor, one-off style changes—but it’s not ideal for large-scale styling as it mixes content and presentation.

🔧 Example:

<!DOCTYPE html>
<html>
<body>

  <h1 style="color: blue; text-align: center;">This is a heading</h1>
  <p style="color: red;">This is a paragraph.</p>

</body>
</html>

⚠️ Tip: Avoid using inline styles excessively as they can make your code difficult to maintain.

🌀 Multiple CSS Sources: Which One Wins?

Sometimes, styles may be defined from multiple sources (external, internal, inline). So which one takes priority?

Let’s break down what happens when styles overlap:

👇 Scenario:

/* External file */
h1 {
  color: navy;
}

/* Internal in <head> */
<style>
  h1 {
    color: orange;
  }
</style>

/* Inline in HTML */
<h1 style="color: green;">This is a heading</h1>

🔁 Cascading Order (from highest to lowest priority):

Inline Style – Highest priority
Internal CSS – Medium priority
External CSS – Lowest priority
Browser default styles – Least priority

✅ So in the example above, the <h1> will appear green due to the inline style.

⚙️ CSS Placement Example: Order Matters!

Example 1: Internal after external (internal wins)

<head>
  <link rel="stylesheet" href="styles.css">
  <style>
    h1 { color: orange; }
  </style>
</head>

✅ The h1 will be orange.

Example 2: Internal before external (external wins)

<head>
  <style>
    h1 { color: orange; }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>

✅ The h1 will be navy (assuming that’s what the external CSS sets).

🎯 Best Practices

✅ Prefer external stylesheets for scalability.
✅ Use internal CSS for prototypes or standalone pages.
✅ Limit inline CSS to very specific, one-time tweaks.
✅ Maintain a clear structure and avoid duplication of styles.

CSS Tutorial