Quartz 4

How to add CSS

4 min read

Metadata

  • Date :: 13-04-2025
  • Tags :: web-dev

Notes

🎨 Three Ways to Add CSS to HTML

📌 Introduction

Once you’re comfortable with HTML, the next step in web development is to learn how to style your web pages using CSS (Cascading Style Sheets).

There are three different methods of adding CSS to your HTML documents:

  1. Inline CSS

  2. Internal CSS

  3. External CSS

Each has its own use case, advantages, and limitations. Let’s dive into each method in detail.

🔹 1. Inline CSS

📍 What is Inline CSS?

Inline CSS is written directly inside the HTML element’s opening tag using the style attribute.

📐 Syntax

<tagname style="property: value;">
  Content goes here
</tagname>

✅ Example:

<h1 style="color: blue;">This is a blue heading</h1>

This applies the style only to this specific h1 element. No other h1 will be affected.

💡 When to Use Inline CSS?

  • For quick testing or debugging

  • When applying style to a single unique element

  • When JavaScript dynamically injects style

  • In emails where external CSS is often not supported

❌ Why It’s Not Ideal for Large Projects

  • Not scalable: Repeating styles across many elements becomes tedious.

  • Clutters HTML: Makes code messy and harder to read.

  • Hard to maintain: Difficult to update styles later.

🔸 2. Internal CSS

📍 What is Internal CSS?

Internal CSS is written within the <style> tag inside the <head> section of the HTML document.

📐 Syntax

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

✅ Example:

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: red;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <h1>This heading is red</h1>
</body>
</html>

🧠 Breakdown

  • Selector: Targets elements (e.g., h1, p, .class, #id)

  • Curly Braces {}: Enclose the CSS rules

  • Property: What you want to change (e.g., color)

  • Value: What you want to set it to (e.g., red)

💡 When to Use Internal CSS?

  • For single-page websites

  • When experimenting with styling during development

  • When styles are not reused across pages

❌ Limitations

  • Styles only apply to the current HTML document

  • Not reusable across multiple web pages

  • Can still clutter the head section with large amounts of CSS

🔹 3. External CSS

📍 What is External CSS?

External CSS is written in a separate .css file and linked to the HTML file using a <link> tag in the <head> section.

📐 Linking Syntax

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

This tells the browser:
“Hey, get the styling from this separate CSS file!”

✅ Example of styles.css

h1 {
  color: green;
  font-family: Arial, sans-serif;
}

✅ Example HTML

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>This heading is green</h1>
</body>
</html>

🧠 How It Works

  • The CSS rules live in a .css file

  • You link that file to your HTML

  • The browser applies the styles to your HTML content

💡 When to Use External CSS?

✅ Ideal for multi-page websites
✅ Allows for modular code and clean HTML
✅ Makes it easier to maintain consistency across all pages
✅ Best for real-world, production-grade projects

🧾 Typical File Structure:

project-folder/
│
├── index.html
├── about.html
├── contact.html
└── styles.css

All HTML files link to the same styles.css for consistency.

📂 Practice Challenge Overview

In the practice exercise, you’ll work with a small website project that contains:

  • A home page with links to 3 subpages:

    • inline.html

    • internal.html

    • external.html

Each subpage uses one of the 3 styling methods:

PageStyling MethodExpected Color
inline.htmlInline CSSBlue
internal.htmlInternal CSSRed
external.htmlExternal CSSGreen

🛠 Steps Recap:

  1. Home Page (index.html):

    • Add 3 anchor (<a>) links to each of the subpages.

    <a href="./inline.html">Inline</a>
<a href="./internal.html">Internal</a>
<a href="./external.html">External</a>

  2. Inline Styling Page:

    • Add style directly to the h1 tag:

    <h1 style="color: blue;">Style me in blue</h1>

  3. Internal Styling Page:

    • Use <style> in the <head>:

    <style>
  h1 {
    color: red;
  }
</style>

  4. External Styling Page:

    • Create styles.css and link it:

    /* styles.css */
h1 {
  color: green;
}
    <!-- external.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

🔄 Summary Table

MethodWhere CSS LivesScopeBest ForExample Use
InlineInside element tagOne specific elementTesting, emails, one-off tweaks<h1 style="color:blue;">
InternalInside <style> in HTMLOne HTML documentSmall sites or specific page style<style> h1 { color: red; } </style>
ExternalIn a .css fileWhole websiteScalable, multi-page websitesstyles.css + <link> tag

🧠 Final Thoughts

  • You’ll encounter all three methods in real-world scenarios.

  • The best practice for professional projects is to use external CSS for clean, maintainable, and scalable code.

  • Mastering the three ways prepares you for:

    • Reading legacy code

    • Testing effectively

    • Organizing your own projects

References

Graph View

Backlinks