The three ways to add a style sheet to a page — external, internal, and inline CSS — how each is written, and which one this course uses.
Why: the CSS lives in its own .css file, loaded with a <link> tag in <head>. This is how real projects do it — one stylesheet styles every page that links it, and the browser caches the file. The .css file contains pure CSS: no <style> tags.
<!-- index.html -->
<!DOCTYPE html>
<html><head>
<link rel="stylesheet" href="styles.css">
</head><body>
<p>This paragraph is styled by styles.css</p>
</body></html>
<!-- styles.css — a separate file next to index.html -->
p {
color: steelblue;
font-size: 18px;
}Why: the CSS lives in a <style> block inside <head>, so the whole page — markup and styles — is one .html file. No extra files to create or wire up, which makes it perfect for learning and quick experiments.
<!DOCTYPE html>
<html><head>
<style>
p {
color: steelblue;
font-size: 18px;
}
</style>
</head><body>
<p>Styled by the style block above — all in one file.</p>
</body></html>Why: a style attribute written directly on one element. It affects only that element, cannot be reused, and overrides external and internal rules — use it sparingly, for one-off tweaks.
<!DOCTYPE html>
<html><head></head><body style="font-family:sans-serif;padding:16px">
<p style="color: steelblue; font-size: 18px;">Styled by its own style attribute.</p>
<p>This paragraph is not affected.</p>
</body></html>Note: every example in this course uses Internal CSS, so each lesson is a single, complete file — copy any example into your index.html and open it in your browser. In your own projects, prefer External CSS.
<!DOCTYPE html>
<html><head>
<style>
/* The lesson's CSS goes here */
body { font-family: sans-serif; padding: 16px; }
</style>
</head><body>
<!-- The lesson's HTML goes here -->
<p>One file, ready to open in your browser.</p>
</body></html>