Tutorials › CSS Mastery › Adding CSS

Adding CSS

4 min read Quiz at the end

Link CSS with a link tag in the head: <link rel='stylesheet' href='styles.css'>. You can also use a style tag or inline styles. External stylesheets are best — browsers cache them for reuse across multiple pages.

Three Ways to Add CSS

<!-- 1. External (best practice) -->
<link rel="stylesheet" href="style.css">

<!-- 2. Internal -->
<style>
    h1 { color: red; }
</style>

<!-- 3. Inline (avoid for reusable styles) -->
<p style="color: red; font-size: 18px;">Text</p>

← What is CSS? Next: Selectors →

Topic Quiz · 5 questions

Test your understanding before moving on

1. Which attribute links a CSS file?

💡 <link rel="stylesheet" href="style.css"> links an external stylesheet.

2. Which has the highest specificity?

💡 Inline styles have the highest specificity (except !important).

3. Why prefer external CSS over inline?

💡 External CSS separates concerns, is reusable across pages, and can be cached.

4. Can you link multiple CSS files?

💡 You can link as many CSS files as needed with multiple <link> tags.

5. Which should be added inside <head>?

💡 CSS <link> tags go in <head> to prevent unstyled content flash.

Quick Access

Adding CSS

Three Ways to Add CSS

Test your understanding before moving on