How to Apply CSS

Learn the three ways to add CSS to an HTML page: inline styles, internal stylesheets, and external stylesheets.

Overview

There are three ways to attach CSS to an HTML document, each with a different scope and appropriate use case. **Inline styles** are written directly on the HTML element using the `style` attribute. They have the highest specificity and override everything, but they are the hardest to maintain because styles are scattered throughout the HTML. **Internal stylesheets** live inside a `<style>` tag in the `<head>`. They are useful for single-page demos and email templates, but they mix structure and presentation in one file. **External stylesheets** are separate `.css` files linked via `<link>`. This is the recommended approach for any real project. Styles are centralized, cached by the browser, and reusable across many pages.

Key Points

•Inline: style="..." on the element highest priority, hardest to maintain
•Internal: <style> tag in <head> useful for one-off pages or email
•External: separate .css file linked with <link> best practice for all projects
•External stylesheets are cached by the browser, improving load times
•Multiple pages can share one external stylesheet change once, update everywhere
•The order of stylesheets matters: later stylesheets override earlier ones for equal-specificity rules

Examples

Inline style (avoid for anything beyond quick tests)

<p style="color: red; font-weight: bold;">
  This paragraph is styled inline.
</p>

Inline styles override external and internal stylesheets.

Internal stylesheet in the <head>

<head>
  <style>
    body { font-family: Arial, sans-serif; }
    h1   { color: darkblue; }
  </style>
</head>

Good for isolated demos or pages that must be self-contained.

External stylesheet (recommended)

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

Use this for all real projects. One stylesheet can style many pages.

Common Mistakes

Using inline styles everywhere leads to duplicated, hard-to-update code
Writing the <style> tag inside <body> instead of <head>
Using a relative path that is wrong: href="style.css" when the file is at css/style.css

Note

For any project with more than one page, always use an external stylesheet.

How to Apply CSS

Overview

Key Points

Examples

Common Mistakes

Note

Exercises

Knowledge Check

Which method of applying CSS has the highest specificity priority?