There are three ways to attach CSS to an HTML page. They all work, but one is the clear choice for real websites. Knowing all three helps you read other people's code and fix it, because you'll meet every one of them in the wild.
The method you choose affects more than tidiness. It decides whether your styles can be shared between pages, how fast later pages load, and how easy it is to override a style when the design changes.
Method 1: inline styles
Put CSS directly on one element with the style attribute:
<p style="color: red; font-weight: bold;">Sold out!</p>Good for: a quick one-off test. Downside: it only affects that single element, mixes design into the content, can't use hover effects or media queries, and is very hard to override from a stylesheet.
You'll often see inline styles in HTML emails and in code generated by JavaScript, but avoid them in your own pages.
Method 2: internal stylesheet
Put your rules inside a <style> element, usually in the <head>:
<style>
p { color: navy; }
</style>Good for: single-page demos and examples, like many on this site. Downside: the styles can't be shared, so a second page needs its own copy.
Method 3: external stylesheet (recommended)
Write your CSS in its own file, such as styles.css, and link it in the <head>:
<link rel="stylesheet" href="styles.css">Why it wins: one file styles every page of the site, the browser caches the file so other pages load faster, and HTML and CSS stay cleanly separated. This is how professional websites are built.
The href works like a link: styles.css looks in the same folder as the HTML file, and css/styles.css looks in a folder called css. If your styles don't appear, a wrong path is the first thing to check.
Using more than one stylesheet
A page can link several stylesheets. They're applied in the order they appear, so a common pattern is a general file first and more specific files after it:
<link rel="stylesheet" href="base.css">
<link rel="stylesheet" href="contact-page.css">Because the second file comes later, its rules win when the two files disagree. Keep the number of files small, though, because each one is a separate download.
Adding CSS Syntax
The three methods
<!-- external (best) -->
<link rel="stylesheet" href="css/styles.css">
<!-- internal -->
<style> h1 { color: teal; } </style>
<!-- inline -->
<h1 style="color: teal;">Hi</h1>Adding CSS Summary
- CSS can be added inline, in a
<style>element or in an external.cssfile. - External stylesheets, linked with
<link rel="stylesheet">, are best for real sites. - One external file can style every page and is cached by the browser.
- When equally specific rules conflict, the last one wins.
- Avoid inline styles; they're hard to reuse and hard to override.
Adding CSS Examples
Each example runs in the page. Edit the code and press Run to see what changes.
Internal and inline together
The internal rule makes all paragraphs blue. The inline style on the second paragraph overrides it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Two ways to add CSS</title>
<style>
p { color: royalblue; font-family: sans-serif; }
</style>
</head>
<body>
<p>I'm blue from the style tag.</p>
<p style="color: crimson;">I'm red, because my inline style wins.</p>
</body>
</html>Line-by-line explanation
- Lines 6 to 8An internal stylesheet in the head styles every paragraph.
- Line 11Uses the internal style.
- Line 12The inline
styleattribute overrides the colour for just this paragraph. The font from line 7 still applies.
What an external setup looks like
In a real project you'd have two files. Here's what each contains. (The editor runs them together, just like a browser would.)
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="brand">Maple Studio</h1>
</body>/* styles.css */
.brand {
color: #17a865;
font-family: Georgia, serif;
letter-spacing: 2px;
}Line-by-line explanation
- Line 1The CSS file holds nothing but CSS rules, with no
<style>tags. - Lines 2 to 6A rule for the
brandclass. Every page that linksstyles.cssgets it.
Common Adding CSS Mistakes
Style tags inside a .css file
<style>
body { background: beige; }
</style>body { background: beige; }A .css file contains only CSS. HTML tags in it break the first rule.
Wrong link attributes
<link href="styles.css">
<style src="styles.css"></style><link rel="stylesheet" href="styles.css">rel="stylesheet" is required, and <style> doesn't load files.
Adding CSS in Real Projects
How sites are organised
Professional sites usually load one or two external stylesheets, sometimes split into files like base.css, layout.css and components.css that a build tool combines. Inline styles are mostly added by JavaScript for things that change on the fly, like the position of a dragged element.
Adding CSS Exercises
Answer each one and check it instantly. If you get stuck, open the hint before the answer.
Link the external stylesheet.
<link ="stylesheet" ="main.css">rel="stylesheet" says what the file is; href says where it is.Which way of adding CSS is best for a website with many pages?
A paragraph has an inline style color: red and the stylesheet says p { color: blue; }. What colour is it?
The internal stylesheet isn't working because it's not valid. Fix it so the button is green with white text.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Shop</title>
<style src="">
button { background: green; color: white }
</stlye>
</head>
<body>
<button>Buy</button>
</body>
</html>- The button is green
- The button text is white
Adding CSS Quiz
3 questions to check what you learned.
Which attribute adds inline CSS?
- css
- style
- class
- design
Where should the
<link rel="stylesheet">usually go?- Inside
<head> - At the end of
<body> - Inside each element
- In the CSS file
- Inside
Why are external stylesheets faster for multi-page sites?
- They're compressed automatically
- They load before HTML
- The browser caches the file and reuses it on every page
- They skip the cascade
Adding CSS Challenge
Override with care
The page already makes all list items grey. Using only the CSS tab (no inline styles):
- Add a rule that makes the
liwith classtodaybold and#17a865
<ul>
<li>Monday: rest</li>
<li class="today">Tuesday: 5k run</li>
<li>Wednesday: yoga</li>
</ul>li { color: gray; }
- Today is green
- Today is bold
- Other items stay gray
- No inline styles were used