Course Index

CSS · Module 13 · Lesson 3 of 48

Attaching CSS (Inline & Style Tags)

What are Styling Methods?

Imagine you are decorating a house. You can paint each brick individually as you place it (Inline CSS), paint an entire wall from the inside using a spray gun (Internal CSS), or hire a design agency that sends over a pre-made design manual containing rules for the whole house (External CSS).

In web design, there are three distinct ways to attach CSS rules to your HTML: 1. Inline CSS: Written directly inside the HTML tag using the style attribute. E.g., <p style="color: blue;">. 2. Internal CSS: Written inside a <style> tag located inside the <head> section of the webpage. 3. External CSS: Written in a separate .css file and connected to the HTML document using a <link> tag in the <head>. E.g., <link rel="stylesheet" href="styles.css">.

Why does it matter?

For real websites, External CSS is the gold standard because it separates your design rules from your structure. This means you can change the look of 1,000 pages by editing just a single CSS file! Inline CSS should be avoided because it makes your HTML messy and hard to maintain, though it is sometimes useful for quick testing or dynamic JavaScript overrides.

Syntax Breakdown

  • Inline: <element style="property: value;">
  • Internal: <style> selector { property: value; } </style>
  • External: <link rel="stylesheet" href="filename.css">

    • <link rel="stylesheet" href="style.css">
    <style> h1 { color: red; } </style>
    <h1 style="color: red;">

    Common Mistakes

  • Forgetting rel="stylesheet": When loading an external CSS file, if you forget the rel="stylesheet" attribute in your <link> tag, the browser will download the file but won't apply any of the styles!
  • Writing selector rules in inline style: Writing things like <p style="p { color: red; }"> is incorrect. Inline style attributes only take properties and values, not selectors.

    • Quick Reference

  • style="..." — Inline attribute for styling a single element.
  • <style> — Tag in <head> for writing internal page CSS rules.
  • <link rel="stylesheet" href="..."> — Tag to connect a separate CSS file.
    • Your Task
    Add an inline `style` attribute to the paragraph (`<p>`) element and set its `font-size` to `24px`.
    index.html
    Type code above to start the lesson.
    Live Preview