CSS Basics›Core· 35 min read

Three Ways to Add CSS

Inline, internal, or external — learn all three, and why professionals almost always choose external.

What you will learn

Add CSS inline, internally and externally
Link an external stylesheet with <link>
Know which method to use and why

Method 1 — Inline (quick, messy)

Put CSS right on an element with the style attribute. Good for a one-off tweak, bad for a whole site.

Inline CSS

<p style="color: red; font-size: 20px;">Inline styled text</p>

Live preview

The CSS lives right on the element, inside a style="..." attribute. Each property: value pair is separated by a semicolon. Here the paragraph becomes red and 20px. It works, but if you had 50 paragraphs you would have to repeat this on every single one — which is why it does not scale.

Method 2 — Internal (one page)

Put a <style> block inside the <head>. It styles that one page.

Internal CSS in a <style> block

<style>
  p { color: green; font-size: 20px; }
</style>
<p>Internal styled text</p>

Live preview

Now the CSS sits in one <style> block instead of on each element. The rule p { color: green; font-size: 20px; } styles every <p> on this page at once — so one rule can cover dozens of paragraphs. The catch: it only affects this page. A second HTML file would need its own copy.

Method 3 — External (the professional way)

Write all your CSS in a separate .css file and link it from the <head>. One file can style every page of your site — change it once, the whole site updates.

In your HTML <head>

<!-- index.html -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

The <link> tag is the bridge. rel="stylesheet" tells the browser “this is a CSS file”, and href="styles.css" is the path to that file (here, a file named styles.css sitting next to the HTML). When the page loads, the browser fetches that file and applies its rules.

In a separate styles.css file

/* styles.css */
p { color: purple; font-size: 20px; }

This second file holds only CSS — no <style> tags, no HTML, just rules. Notice there is no <style> wrapper here: a .css file is already “all CSS”, so you write rules directly. Every HTML page that links this file gets the purple paragraphs.

So how do the two files connect? Here is the flow, in order:

You write your rules in a separate file and save it as styles.css.
In your HTML <head> you add <link rel="stylesheet" href="styles.css"> pointing at that file.
When the browser opens the HTML page, it sees the <link> and downloads styles.css.
The browser applies those rules to the page — and to every other page that links the same file.
Later, you edit styles.css once, and every page across the whole site updates together.

Tip: Always prefer external CSS for real projects. It keeps HTML clean, lets one stylesheet control the whole site, and lets the browser cache it for speed.

Note: If two rules clash, the more specific / later one wins (the “cascade”). Inline beats internal beats external by default — you will learn the exact rules in the Specificity lesson.

Q. Which method lets one file style your whole website?

Answer: An external .css file linked on every page styles the entire site, and updating it updates every page at once.

✍️ Practice

Create a real styles.css file, link it to an HTML page, and style the body and headings.
Move an inline style into your external stylesheet.

🏠 Homework

Set up a project folder with index.html and styles.css linked together — your standard starting point from now on.