CSS How To
CSS can be attached to a page in three places. They all reach the same renderer, but they trade off scope, reuse, and ease of editing.
Three places CSS can live
Pick the right one
| Method | Best for | Watch out for |
|---|---|---|
| External | Shared styles across pages and teams. | Don't ship hundreds of small files — bundle them. |
| Internal | A single page that needs unique styling, or critical above-the-fold CSS. | Doesn't get cached separately from the HTML. |
| Inline | Quick demos, dynamic values from a server template, email HTML. | High specificity makes overrides painful. Hard to maintain. |
Cascade order (simplified)
When the same property is set in more than one place, the browser walks through:
- Importance — anything tagged
!importantwins first. - Specificity — more specific selectors beat less specific ones.
- Source order — last declaration wins among ties.
Tip: In a typical site, inline a tiny bit of critical CSS in
<head> for the first paint, then load the main stylesheet externally with <link rel="stylesheet">.Example
Example
<!DOCTYPE html>
<html>
<head>
<style>
body { font-family: Verdana, sans-serif; }
.box { background: #04AA6D; color: #fff; padding: 20px; border-radius: 6px; }
</style>
</head>
<body>
<h1>CSS How To</h1>
<div class="box">Edit the CSS on the left, then click Run »</div>
</body>
</html>
Try it Yourself »
Exercise
Add the missing tag so this <style> block is recognised by the browser.
<head>
<
>
body { font-family: sans-serif; }
</style>
</head>
It is the same name as the closing tag below.
Discussion
Loading…