Adding CSS to HTML

Table of Contents +

In the last lesson you learned about Introduction to CSS. You know what CSS is and what it does. Now there is one question left. How do you actually connect your CSS to your HTML page? That is what we will learn here.

See, HTML and CSS live in two different worlds. HTML is your content, like the text and the buttons. CSS is the styling, like the colors and the spacing. The browser will not join them on its own. You have to tell the browser to use this CSS for this page. There are three ways to do that. Let’s look at each one.

🔗 The Three Ways to Add CSS

Think of your HTML page like a plain wall in a new house. The wall is built, but it has no paint yet. CSS is the paint. Now there are three ways you can bring that paint to the wall.

Here are the three methods you will meet:

Inline CSS means you put the style right on one HTML element. It is like painting one single brick by hand.
Internal CSS means you put all your styles in one block at the top of the HTML file. It is like keeping one paint tin inside the same room.
External CSS means you keep your styles in a separate .css file. It is like one big paint store that every room in the house can use.

We will go through them one by one. Then I will tell you which one to use most of the time.

🖌️ Inline CSS

Inline CSS is when you add the style directly on the HTML tag itself. You use a special attribute called style. An attribute is just extra info you add inside the opening tag.

Here is a paragraph that we color red and make bigger using inline CSS.

<p style="color: red; font-size: 20px;">Hello, I am styled inline.</p>

Let me walk you through that line:

The style="..." part is the attribute that holds your CSS. An attribute is the extra setting you write inside the opening tag.
Inside the quotes you write normal CSS, like color: red;.
Each rule ends with a semicolon ; so the browser knows where one rule stops and the next one starts.

What you see

The text “Hello, I am styled inline.” shows up in red color and a bit larger than normal text.

Inline CSS works, but it gets messy fast. Say you have fifty paragraphs and you want them all red. You would have to write that same style on every single one. So we mostly avoid inline CSS for real work.

🧱 Internal CSS

Internal CSS keeps all your styles in one place inside the same HTML file. You put them inside a <style> block. That block goes in the <head> section of your page. The <head> is the top part of the page that holds setup info the user does not see directly.

Here is a small page that turns every paragraph blue using internal CSS.

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <p>This paragraph is blue.</p>
  <p>So is this one.</p>
</body>

Now look at what is happening here:

The <style> block sits inside the <head>. This block is where your CSS rules go.
Inside it, p { ... } means find every <p> tag and apply these rules to it.
Both paragraphs turn blue without you touching each one.

What you see

Both lines of text appear in blue color, a little larger than normal. You only wrote the rule once, but it changed both paragraphs.

Internal CSS is better than inline because you write the rule one time. But there is still a catch. It only works for this one HTML file. If you have ten pages, you would copy this same block into all ten. That is a lot of repeating.

📂 External CSS

External CSS is the real way we do things. You write all your CSS in a separate file that ends with .css. Then you link that one file to as many HTML pages as you want. Change the file once, and every page updates.

First, you make a file called styles.css and put your CSS in it. Notice there is no <style> tag here, just plain CSS.

p {
  color: green;
  font-size: 18px;
}

Now in your HTML, you connect that file using a <link> tag inside the <head>. This <link> tag tells the browser where to find your CSS.

<head>
  <link rel="stylesheet" href="styles.css" />
</head>
<body>
  <p>This text comes from an external file.</p>
</body>

Let me explain that <link> tag:

rel="stylesheet" tells the browser this linked file is a stylesheet, which means a CSS file.
href="styles.css" is the path, so it points to where your CSS file lives.
Both files must usually sit in the same folder for href="styles.css" to find the file.

What you see

The paragraph text shows in green. The styling lives in styles.css, but the HTML page picks it up through the <link> tag.

The big win is sharing. One styles.css file can serve your whole website. Want to change every page from green to purple? You edit one line in one file. That is why external CSS is the method real websites use.

⚖️ Which One Should You Use?

Here is a quick way to remember when each one fits.

Rule of thumb

Use external CSS almost always. Use internal CSS for a quick test or a tiny one-page demo. Use inline CSS only for a rare single style you cannot do another way.

This table sums it up so you can glance at it later.

Method	Where the CSS lives	Best for
Inline	On the HTML tag, in a `style` attribute	One quick, single fix
Internal	In a `<style>` block in the head	A small one-page site or a test
External	In a separate `.css` file	Almost every real project

⚠️ Common Mistakes

These are the small slips that catch out beginners. Watch out for them.

Forgetting the semicolon between rules. The semicolon is the ; that ends each rule. So color: red font-size: 20px will break, but color: red; font-size: 20px; works.
Putting the <style> block in the <body> by accident. It belongs in the <head>.
Getting the file path wrong in href. If the CSS file is in another folder, href="styles.css" will not find it and nothing gets styled.
Mixing up rel and href. The rel="stylesheet" part is what tells the browser it is CSS. Leave it out and the styling may not load.

✅ Best Practices

A few simple habits will keep your styling clean from day one.

Reach for external CSS first. It keeps your HTML and CSS separate and tidy.
Keep one styles.css for a small site, so all your styling sits in one known place.
Name your CSS file something clear like styles.css or main.css.
Avoid inline CSS unless you really have no other choice. It makes pages hard to update later.

🧩 What You’ve Learned

Let’s quickly go back over the main points from this lesson.

✅ CSS does not join HTML on its own. You have to connect it.
✅ Inline CSS goes right on the tag using a style attribute. It is good only for a rare single style.
✅ Internal CSS sits in a <style> block in the <head>. It is fine for one small page.
✅ External CSS lives in its own .css file and links with a <link> tag. This is the method real sites use.
✅ External CSS lets one file style your whole website, so you change things in one place.

Check Your Knowledge

Test what you learned. Pick an answer for each question, then click Check.

🚀 What’s Next?

Now you can connect CSS to your page. Next you will learn how a CSS rule is actually built, piece by piece.

CSS Syntax

Previous Introduction to CSS Next CSS Syntax

Share & Connect

Share on LinkedIn