Loading...

CSS How To

You can write perfect CSS rules and still see no change if the browser never loads them. This session shows the three everyday ways to attach CSS to HTML — and which one to prefer as your default.

How do you add CSS to an HTML page?

You can add CSS three ways: an external stylesheet linked from the head, an internal <style> block in the head, or an inline style attribute on one element. For real sites and multi-page work, start with an external .css file.

Three methods at a glance

Use this table to pick a method before you type. Later sections show a short example of each.

📊 Ways to add CSS

Method Where it lives Reuse across pages Best everyday use
External stylesheet Separate .css file + <link> in head Excellent Default for projects and courses
Internal CSS <style> … </style> in the HTML head One page only Quick demos and single-file practice
Inline CSS style="…" on one HTML element No Tiny one-off overrides (use sparingly)

External stylesheet (recommended default)

Keep HTML and CSS in separate files. In the HTML head, point to your stylesheet with a link element. The browser fetches the CSS file and applies its rules.

Link an external stylesheet

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — External CSS</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="hero">Styled from styles.css</h1>
</body>
</html>

Put your rules in styles.css next to the HTML file (or adjust href if the file lives in a subfolder):

External styles.css

css
CSS Code 
.hero {
color: #0f766e;
font-family: Georgia, serif;
}

Why external wins for real work

  • One stylesheet can style many HTML pages
  • Designers and learners edit look-and-feel without hunting through markup
  • Browsers can cache the .css file between pages
  • Keep rel="stylesheet" and a correct href — a typo in the path silently means unstyled pages

Internal CSS (<style> in the head)

For a single practice page, you can put rules inside a <style> element in the head. Introduction and Syntax used this pattern so HTML and CSS stayed in one file.

Internal style block

html
HTML Code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>How To — Internal CSS</title>
<style>
.hero {
color: #1d4ed8;
}
</style>
</head>
<body>
<h1 class="hero">Styled from a style block</h1>
</body>
</html>

When internal is fine

Internal CSS is honest for demos and homework that must be one file. It does not scale well: copy-pasting the same <style> block into every page creates drift and hard updates. Prefer external as soon as you have more than one page — or when you want a cleaner split.

Inline CSS (style attribute)

Inline CSS puts declarations directly on an element with the style attribute. There is no selector and no separate file — only that one element is styled.

Inline style attribute

html
HTML Code 
<h1 style="color: #b45309; font-size: 1.75rem;">Styled inline</h1>

Use sparingly

Inline styles are quick for a temporary check, but they mix presentation into markup, are hard to reuse, and are harder to override later when cascade and specificity matter. Prefer classes in a stylesheet. You will meet cascade conflict rules in later sessions; for now, treat inline as the exception, not the habit.

Which method should you choose?

  • Building a site or following this course’s projects: external stylesheet
  • One short demo file in class: internal <style> is acceptable
  • Changing a single element for five seconds while debugging: inline can help — then move the rule into a stylesheet
    Mixing methods is allowed. When the same property is set in more than one place, the browser follows cascade rules (covered later). A practical habit: put lasting styles in the external file and avoid scattering the same property across all three methods.

Try it yourself

  1. Create howto.html and styles.css in the same folder.
  2. In howto.html, add a head with <link rel="stylesheet" href="styles.css"> and a body heading: <h1 class="hero">How-to practice</h1>.
  3. In styles.css, add: .hero { color: #0f766e; }. Open the HTML file in a browser.
  4. Change the color to #1d4ed8, save the CSS file, and refresh — the heading should update.
  5. Temporarily add style="color: #b45309;" on the h1, refresh, then remove the attribute and rely on the stylesheet again.

Common mistakes

  • Putting <link rel="stylesheet" …> in the body by habit — place it in the head with your other document metadata
  • Typo in href (style.css vs styles.css) so the file never loads and the page looks unstyled
  • Forgetting rel="stylesheet" on the link element
  • Pasting a full <style> block into every page instead of sharing one external file
  • Relying on inline style for every color and font — markup becomes noisy and hard to maintain

Summary

  • Three ways: external stylesheet, internal <style>, inline style attribute
  • External + <link rel="stylesheet" href="…"> in the head is the default for real pages
  • Internal CSS suits single-file practice; inline suits rare one-off overrides
  • Path typos and missing rel are common reasons styles “do nothing”
  • Practice by linking a real .css file, editing a value, and refreshing

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
8
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial