LESSON 3.03

Three Ways to Add CSS to Your HTML

Inline, internal, or external: which should you use?

Explore the three methods for adding CSS to your HTML and learn when each approach makes sense for your project.

💡 The Concept

There are three ways to add CSS to an HTML page: inline, embedded, and external stylesheets. Each method has its own strengths and ideal use cases. Knowing when to use each one keeps your code clean and organized.

Method 1: Inline CSS

Inline CSS is the most direct way to style an HTML element. You add a style attribute directly inside the opening HTML tag and write your CSS property-value pairs right there. You practiced this in the previous lesson, so the syntax should look familiar.

How It Works

To make an <h1> heading blue, write it like this:

<h1 style="color: blue;">Hello CSS!</h1>

To add a background color as well, separate multiple properties with a semicolon:

<h1 style="color: blue; background-color: red;">Hello CSS!</h1>
JSFiddle demonstrating how to add an inline style.
Demonstrating in JSFiddle how to add an inline style.

When to Use Inline CSS

Inline CSS is great for quick tests and one-off styles, but it has significant drawbacks:

  • It mixes content (HTML) with presentation (CSS), making your code harder to maintain.
  • You can’t reuse styles. If you want the same look on ten elements, you’d have to repeat the style attribute ten times.
  • It’s difficult to override because inline styles have very high specificity.

Bottom line: Use inline CSS for quick experiments, but avoid it for real projects.

Method 2: Embedded (Internal) CSS

Embedded CSS, sometimes called internal CSS, moves your styles out of individual HTML tags and into a <style> block inside the <head> section of your HTML document.

How It Works

Instead of attaching styles to each element, you write CSS rules using selectors that target elements across the entire page:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My Styled Page</title>
  <style>
    h1 {
      color: navy;
      background-color: lightyellow;
    }
    p {
      color: #333;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>Welcome to My Page</h1>
  <p>This page uses embedded CSS.</p>
</body>
</html>

Notice how the CSS lives inside <style> tags within the <head>. Every <h1> and <p> on the page will pick up these styles automatically — no need to repeat yourself on each element.

When to Use Embedded CSS

Embedded CSS is a step up from inline because it separates your styles from individual elements and allows you to style multiple elements at once. It’s useful for:

  • Single-page projects or prototypes.
  • Quick demos and tutorials.
  • Situations where you genuinely only have one HTML page to style.

However, it still has a limitation: the styles only apply to that one HTML file. If your website has multiple pages, you’d have to copy the entire <style> block into every page. Updating styles later becomes a maintenance headache.

Method 3: External CSS (The Best Practice)

External CSS is the gold standard for web development. You write all your CSS in a separate .css file, usually named style.css, and link it to your HTML files inside of the website <head>.

This is how professional websites are built. In the next lesson, we’ll walk through exactly how to create and attach an external stylesheet to your project.

🎬 Video Demonstration

In this video I demonstrate all three methods for adding CSS to an HTML page:

Exercise: Try It Yourself

Open JSFiddle.net and practice the first two methods:

Step 1. Add a heading and paragraph to the HTML panel, like these:

<h1>Adding CSS</h1>
<p>This is a styled paragraph.</p>

Step 2. Add some styles into JSFiddle’s CSS panel:

h1 {
  color: navy;
}
p {
  color: gray;
  font-size: 18px;
}

Click Run. Your JSFiddle should look like this:

Example of HTML and CSS working together in JSFiddle.

You have now separated your CSS from the HTML. The next lesson covers how to set this up in an actual website.

❓ Frequently Asked Questions

Which method should I use for a real project?

External CSS is the standard for any real website. Writing your CSS in a separate file and linking it to your HTML pages means one change updates every page at once. Inline and embedded CSS are useful for quick experiments, but they do not scale. Most professional web projects use an external stylesheet to keep everything maintainable.

Can I use more than one method on the same page?

Yes, and browsers handle it without errors. A page can have an external stylesheet, an embedded style block in the head, and inline styles on individual elements all at the same time. The cascade determines which rule wins when they conflict. That said, mixing methods makes code harder to maintain, so professional projects stick to external CSS and use inline styles only in rare situations.

What is the difference between “embedded” and “internal” CSS?

Nothing. They are two names for the same thing. Some tutorials say “internal,” others say “embedded.” Both mean CSS written inside a <style> block in the <head> of an HTML file. Either term is correct, and you will see both used interchangeably in documentation and online resources.

Can I link more than one external stylesheet?

Yes. You can add as many <link> elements in your HTML head as you need, each pointing to a different .css file. Large projects sometimes split CSS into multiple files — one for layout, one for typography, one for colors. Each one loads in order, so later stylesheets can override earlier ones if there are conflicts.

What should I name my CSS file?

style.css is the most common convention and a safe default. Some projects use main.css or styles.css. The name does not matter to the browser as long as the <link> element in your HTML points to the correct filename. What matters is that the name is lowercase, has no spaces, and ends with .css. Spaces in filenames can cause linking errors.

★ Key Takeaways

There are three places you can write CSS: inline on an element, in the head of an HTML file, or in a separate stylesheet. This lesson covered all three and explained when each one makes sense. Next, you will focus on external stylesheets, which keep your CSS in its own separate file. That is the standard approach for any real project.

Next Lesson: Attaching an External Stylesheet

← Back to CSS Fundamentals Lessons

← Back to All Lessons

Google Ads

The costs of this website are partially offset by revenue from Google Ads.

Tools of the Trade

HTML/CSS Lessons