Lesson 16 of 55 · HTML
Using CSS with HTML – `<link>` and `<style>`
Duration: 8 min
Connecting Stylesheets
Two main ways to apply CSS:
- External –
<link rel='stylesheet' href='styles.css'>placed inside<head>. - Internal –
<style>block within<head>for page‑specific rules.
<head>
<link rel='stylesheet' href='styles.css' />
<style>
.highlight { background: yellow; }
</style>
</head>
Loading order
- External stylesheet – fetched first, can be cached.
- Internal
<style>– parsed after external CSS, can override it. - Inline
style=– highest specificity, used sparingly.
Media queries in <link>
You can conditionally load a stylesheet based on media features:
<link rel='stylesheet' href='print.css' media='print' />
The browser loads print.css only when printing or previewing.
Quick checklist for CSS inclusion
- External stylesheet linked with
rel='stylesheet'? ✅ mediaattribute used where appropriate? ✅- Internal
<style>only for critical CSS? ✅ - No inline
style=unless absolutely necessary? ✅
If any answer is “no”, refactor your code.