Tagg the Builder saysLink a stylesheet with <link rel="stylesheet" href="..."> in the <head> — the standard way to style a page.
Inline styles don't scale; a separate .css file does. Connect it with a <link> tag in the head: <link rel="stylesheet" href="styles.css">. Every element on the page can then be styled from that one file.
You can also write CSS inside a <style> block in the head (internal CSS) — handy for single-file pages like this sandbox. External files win for multi-page sites because the browser caches them across pages.
Power-ups you unlock
<link rel="stylesheet" href="file.css"> goes in <head>
One stylesheet styles the whole page (and site)
Internal <style> block works for single-file pages
External files get cached → faster repeat visits
The Unclosed Tag attacks — common mistakes
Forgetting rel="stylesheet" — the browser ignores the link
A wrong href path → page loads unstyled with no error popup
Putting <link> in the body instead of the head
Boss battleAdd a rule to the <style> block that turns all <p> text green, then add a class and style only that class.
Example code
<!doctype html>
<html><head><meta charset="utf-8">
<style>
/* internal stylesheet */
body { background:#06040d; color:#e6e0ff; font-family:sans-serif; padding:20px }
h1 { color:#b388ff }
.note{ color:#8aff9d }
</style>
</head>
<body>
<h1>styled from a <style> block</h1>
<p class="note">change a rule above and watch it apply.</p>
</body></html>