How to Add CSS

There are three ways to add CSS to your HTML. Each has its place, and knowing which one to use makes your life a lot easier.

1. Inline Styles

You add CSS directly inside an HTML tag using the style attribute.

<p style="color: red; font-weight: bold;">This is red and bold.</p>

Inline styles affect only that single element. They are useful for quick testing but messy for real projects. Avoid them unless you are debugging.

2. Internal Stylesheet

You put CSS inside a <style> tag in the <head> section of your HTML file.

<head>
  <style>
    p {
      color: blue;
      font-size: 18px;
    }
  </style>
</head>

Internal stylesheets work for single-page sites or when you are learning. But if you have multiple pages, you will be copying the same styles over and over.

3. External Stylesheet

You write all your CSS in a separate .css file and link it from your HTML.

<head>
  <link rel="stylesheet" href="styles.css">
</head>

This is the professional way. One CSS file can style an entire website. Change one value in the CSS file, and every page that links to it updates automatically.

Try it Yourself →

Which One Should You Use?

Method	Use When
Inline	Testing a single element, quick fixes
Internal	Single-page sites, learning, small projects
External	Multi-page sites, real projects, production

🧪 Quick Quiz

Which method adds CSS directly inside an HTML tag?

← CSS Syntax

Element Selector →