How to Add CSS to HTML

Beginner
12 min read
Updated: Nov 2026
6 examples
style / link
HTML tutorial: add CSS with the style attribute, style element, and link stylesheet
Definition

Definition and Usage

Adding CSS to HTML means connecting presentation rules to your markup. HTML builds the structure; CSS paints colors, fonts, spacing, and layout. In the HTML document you attach CSS with three hooks: the style attribute, the <style> element, and the <link> element pointing at a .css file.

What does CSS do for an HTML page?

Without CSS, the browser shows default typography and spacing. With CSS, the same <h1>, <p>, and <a> tags can match your brand, layout, and readability goals.

Where do styles live relative to HTML?

Inline styles sit on one element. Internal styles sit in a <style> block (usually in <head>). External styles sit in a separate file linked from <head>—the standard for real sites.

When should you use each HTML method?

Use style="…" for a quick one-off tweak. Use <style> while learning in a single file. Use <link rel="stylesheet"> whenever more than one page (or teammate) will share the look.

HTML holds structure; CSS holds look.

Keep content in HTML tags and attributes like class / id. Put reusable look-and-feel rules in CSS—ideally an external stylesheet.

Prefer external over inline.

Heavy use of the style attribute makes HTML noisy and hard to update. Link a stylesheet once, then change many pages from one file.

Same cascade rules apply.

Whether CSS arrives via attribute, <style>, or <link>, the browser still resolves conflicts with specificity and source order.

Syntax

HTML Syntax for Adding CSS

The three HTML patterns look like this:

inline.html
<element style=" property: value;">
internal.html
<style> selector { property: value; } </style>
external.html
<link rel="stylesheet" href=" styles.css">

Inside a stylesheet (or <style>), a rule is selector { property: value; }. On the style attribute you write only the declarations—no selector—because the host element is already chosen.

Reference

Core HTML Concepts

Markup pieces that connect HTML documents to CSS:

HTML featureRole
style attributeInline CSS on one element
<style>Internal CSS block, usually in <head>
<link rel="stylesheet">Loads an external .css file
hrefURL or path of the stylesheet
classReusable hook for CSS (.intro)
idUnique hook for CSS (#header)
Element selectorTag name as selector (p, h1)
CascadeHow the browser picks the winning rule when several match

Choose a method

MethodWhere CSS livesBest for
Inlinestyle attributeOne-off tweaks (use sparingly)
Internal<style> in <head>Single-page demos and early learning
External.css + <link>Real websites and team projects
Approach

How to Add CSS in an HTML Document

Follow this order as you grow from a scratch page to a multi-page site.

  1. Write clean HTML structure (<h1>, <p>, lists, links)—no styling yet.
  2. Add class (and rare id) attributes where you need reusable targets.
  3. While learning, put rules in <style> inside <head>.
  4. Move those rules into styles.css and replace the block with <link rel="stylesheet" href="styles.css">.
  5. Reserve the style attribute for true one-offs—not the main design system.
GoalHTML pattern
Style one element<p style="color: navy;">…</p>
Style this page only<style>p { color: navy; }</style> in <head>
Share styles across pages<link rel="stylesheet" href="styles.css">
Target many elementsclass="note" + CSS .note { … }
Try it

Live Preview

Switch how CSS is conceptually applied and see the same heading change color and alignment.

Shows a sample heading and the HTML hook used for that method.

Styled sample

Hello from HTML + CSS

<h2 style="color: #b91c1c; text-align: center;">…</h2>
Code

HTML Examples

Six patterns: the three HTML attachment methods, then class, id, and a full linked page.

Example 1 — Inline CSS (style Attribute)

Style a single HTML element with the style attribute:

HTML
<h1 style="color: crimson; text-align: center;">Hello World</h1>
<p style="font-size: 18px; color: #334155;">Styled with inline CSS.</p>
Try It Yourself

How It Works

  1. Attribute — declarations sit in style="…" on that element only.
  2. No selector — the host tag is already the target.
  3. High priority — often overrides linked rules for that element.
  4. Use sparingly — fine for demos; hard to maintain in large HTML.

Example 2 — Internal CSS (<style> in <head>)

Keep CSS inside the same HTML file with a <style> element:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Internal CSS</title>
  <style>
    h1 { color: #15803d; text-align: center; }
    p { font-size: 18px; color: #1e293b; }
  </style>
</head>
<body>
  <h1>Styled with Internal CSS</h1>
  <p>Rules are in the head.</p>
</body>
</html>
Try It Yourself

How It Works

  1. Place in head so styles load with the document metadata.
  2. Selectors target tags (or classes/ids) anywhere in this page.
  3. One file — handy for tutorials and prototypes.
  4. Not shared — other HTML pages cannot reuse this block unless you copy it.

Example 3 — External CSS (<link>)

Link a separate stylesheet from the HTML <head>. The demo files share a folder so href="styles.css" resolves:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>External CSS Demo</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Welcome to My Website</h1>
  <p>Styles come from an external file.</p>
</body>
</html>
CSS
body {
  font-family: system-ui, sans-serif;
  background-color: #f1f5f9;
  margin: 0;
  padding: 2rem;
  color: #1e293b;
}

h1 {
  color: #1e3a8a;
  margin-top: 0;
}

p {
  color: #475569;
  line-height: 1.6;
  max-width: 36rem;
}
Try It Yourself Open HTML in Tab View full styles.css

How It Works

  1. link is an empty HTML element that references the stylesheet.
  2. rel="stylesheet" tells the browser the linked resource is CSS.
  3. href is the path or URL of the .css file.
  4. Reuse — many HTML pages can share one stylesheet.

Example 4 — Target HTML with class

Add a class attribute in HTML; select it in CSS with a leading dot:

HTML
<h1 class="intro">Welcome!</h1>
<p class="note">Reusable class styles.</p>
CSS
.intro {
  font-weight: bold;
  color: #7c3aed;
}
.note {
  background: #fef9c3;
  padding: 0.75rem 1rem;
}
Try It Yourself

How It Works

  1. class is an HTML attribute that can appear on many elements.
  2. .intro in CSS matches every element with that class.
  3. Multiple classes can share one element: class="intro note".
  4. Prefer classes over ids for most styling hooks.

Example 5 — Target HTML with id

Use id for a unique landmark; select it in CSS with a hash:

HTML
<header id="header"><h1>Site Header</h1></header>
<footer id="footer">© 2026 My Site</footer>
CSS
#header {
  background-color: #fef08a;
  padding: 1rem;
  text-align: center;
}
#footer {
  font-size: 0.875rem;
  color: #64748b;
}
Try It Yourself

How It Works

  1. id must be unique in the HTML page.
  2. #header matches that one element.
  3. Also used for in-page anchors (href="#header") and JavaScript hooks.
  4. For styling, classes scale better across repeated components.

Example 6 — Complete HTML Page with Linked CSS

Structure in HTML, presentation in complete.css:

HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML CSS Example</title>
  <link rel="stylesheet" href="complete.css">
</head>
<body>
  <h1 class="intro">Welcome to My Website</h1>
  <p>This is a simple example of using CSS with HTML.</p>
  <p>Learn more on <a href="https://example.com">Example.com</a>.</p>
</body>
</html>
CSS
body {
  font-family: Georgia, serif;
  background-color: #f0f0f0;
  margin: 0;
  padding: 2rem;
  color: #333;
}

h1.intro {
  color: navy;
  margin-bottom: 0.5rem;
}

p {
  font-size: 16px;
  line-height: 1.6;
  max-width: 40rem;
}

a {
  color: #2563eb;
}

a:hover {
  text-decoration: underline;
}
Try It Yourself Open HTML in Tab View full complete.css

How It Works

  1. HTML holds content and the class="intro" hook.
  2. link pulls in presentation from complete.css.
  3. Update the look by editing CSS—not by rewriting every tag.
  4. Production pattern — this is the usual HTML + CSS split for real sites.

Edge Cases & Pitfalls

Most “CSS not working” bugs are HTML path, placement, or specificity issues.

path

Wrong href on <link>

If the browser cannot find styles.css, HTML renders unstyled. Check the path relative to the HTML file.

rel

Missing rel="stylesheet"

A bare <link href="styles.css"> is not treated as a stylesheet. Always set rel.

inline

Inline styles hard to override

Rules in a linked file often lose to a style attribute. Remove or reduce inline styles when debugging.

id

Duplicate id values

Invalid HTML and unpredictable CSS/JS behavior. One id per page; use class for repeats.

order

Multiple stylesheets

Later <link> rules can override earlier ones when specificity is equal. Load order matters.

style-tag

<style> in the body

Browsers usually still apply it, but keep stylesheets and <style> in <head> for clarity and predictability.

Compatibility

Browser Support

The style attribute, style element, and link stylesheet are supported in all modern browsers.

✓ Baseline · Widely available

CSS hooks in HTML

Inline style, embedded style, and linked stylesheets work everywhere HTML is rendered.

100% style / link support
Google Chrome All versions · Desktop & Mobile
Full support
Mozilla Firefox All versions · Desktop & Mobile
Full support
Apple Safari All versions · macOS & iOS
Full support
Microsoft Edge All versions · Chromium & Legacy
Full support
Internet Explorer IE 6+ · Legacy environments
Full support
Opera All modern versions
Full support
HTML + CSS attachment methods Universal

Bottom line: Focus on correct HTML hooks and file paths—browser support for adding CSS is not the limiting factor.

Remember

Key Takeaways

  • Three HTML hooks: style attribute, <style>, <link rel="stylesheet">.
  • External CSS via <link> is the default for real sites.
  • class and id are HTML attributes that CSS selectors target.
  • Keep HTML lean—put reusable look rules in CSS, not on every tag.

One line: Structure in HTML → attach CSS with style, <style>, or <link> → prefer external stylesheets.

Frequently Asked Questions

Inline CSS uses the style attribute on one element. Internal CSS goes in a style element in the head. External CSS lives in a .css file linked with link rel="stylesheet" href="styles.css". External stylesheets are best for most websites.
Start with a style block in head while learning—it keeps everything in one HTML file. As the project grows, move rules into an external stylesheet linked with link so HTML stays clean and CSS can be reused across pages.
The class attribute can appear on many elements; CSS targets it with .name. The id attribute should identify one unique element per page; CSS targets it with #name. Prefer classes for styling.
Yes. Add multiple link elements in head, each with rel="stylesheet" and its own href. Browsers apply them in order, so later rules can override earlier ones when selectors match.
Usually yes—inline style on an element has high specificity and often wins over rules in a style block or linked file, unless the stylesheet uses !important (avoid that as a beginner).
Put link rel="stylesheet" and style in head so the browser can start styling before body content paints. The style attribute belongs on individual body elements when you need a one-off override.

Practice in the editor

Open a Try It demo and change how CSS attaches to the HTML.

Open Try It editor →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

HTML Comments How to Use JavaScript in HTML