Three Ways to Add CSS: Inline, Internal, and External

If you’re just starting with web design, you’ve probably heard of HTML and CSS. HTML is the structure (what’s on the page), and CSS is the style (how it looks). To make your page colorful, readable, and attractive, you need CSS.

In this article, you’ll learn three beginner-friendly ways to add CSS to a web page:

Inline CSS – style a single element directly
Internal CSS – style many elements in one HTML file
External CSS – keep your styles in a separate .css file

We’ll walk through examples step by step so you can follow along, even if you’ve never coded before.

Before You Start: Your First HTML Page

You only need two things:

A text editor (like Notepad on Windows, TextEdit on Mac, or VS Code)
A web browser (like Chrome, Firefox, or Edge)

Create a new file on your computer called index.html, and paste in this basic HTML:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Styled Page</title>
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Save the file, then double-click it to open it in your browser. You should see a simple page with a big heading and a paragraph.

We’ll use this page as our starting point to explore the three ways to add CSS.

1. Inline CSS – Styling One Element at a Time

Inline CSS means adding styles directly to an HTML tag using the style attribute. This is like putting a mini style note right on the element you want to change.

Example: Inline CSS on a Heading

Update your <h1> line inside index.html to this:

<h1 style="color: blue; text-align: center;">Welcome to My Page</h1>

What’s happening here?

style="..." – tells the browser “here are some CSS rules for this element”
color: blue; – makes the text blue
text-align: center; – centers the heading text on the page

Now save the file and refresh the browser. You should see your heading centered in blue.

When to Use Inline CSS

Inline CSS is useful when:

You need a quick, one-off change
You’re just experimenting or learning

However, it becomes messy if you use it everywhere. If you have 20 headings and want them all blue, updating each one by hand would be painful. For that, internal or external CSS is better.

Try it yourself: Change the paragraph to be red and larger using inline CSS:

<p style="color: red; font-size: 20px;">This is a simple paragraph.</p>

Play with different values like green, purple, or font-size: 30px; and see what happens.

2. Internal CSS – Styling in the `<head>` Section

Internal CSS means putting your CSS rules inside a <style> tag in the <head> of your HTML file. This lets you style many elements at once, all in the same file.

Step 1: Add a `<style>` Block

Modify your index.html like this (focus on the new <style> part):

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Styled Page</title>

    <!-- Internal CSS starts here -->
    <style>
        /* Style all h1 elements */
        h1 {
            color: darkgreen;      /* heading text will be dark green */
            text-align: center;    /* center the heading */
        }

        /* Style all p elements */
        p {
            color: #555555;        /* a gray color for text */
            font-size: 18px;       /* slightly larger text */
            line-height: 1.5;      /* more space between lines */
        }
    </style>
    <!-- Internal CSS ends here -->

</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple paragraph.</p>
</body>
</html>

Understanding the Internal CSS

Inside the <style> tag:

h1 { ... } means: “These rules apply to all <h1> elements on the page.”
p { ... } means: “These rules apply to all <p> elements on the page.”
The lines inside the curly braces { } are properties and values, like color: darkgreen;.

Save and refresh. Now your heading should be dark green and centered, and your paragraph should be gray and easier to read.

Combine Internal CSS with HTML

Let’s add another paragraph and see how the same CSS rules apply automatically:

<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple paragraph.</p>
    <p>This is another paragraph, but it uses the same styles.</p>
</body>

Refresh your browser. Both paragraphs should look the same, thanks to your internal CSS. You didn’t have to repeat any style attributes.

Try it yourself:

Inside the <style> tag, add this rule:

body {
    background-color: #f0f0f0;  /* light gray background for the whole page */
}

Refresh the page and notice how the entire background changes.

Internal CSS is great for small websites or single pages where you want all your styling in one file.

3. External CSS – The Best Way for Real Projects

External CSS stores your styles in a separate file with a .css extension. Your HTML file then links to that CSS file.

This is the most common way to use CSS in real-world websites, because:

It keeps HTML and CSS separate and organized
You can reuse the same CSS file on many pages
It’s easier to maintain and update

Step 1: Create a CSS File

In the same folder as index.html, create a new file called styles.css.
Open styles.css in your text editor and add this CSS:

/* External CSS file: styles.css */

body {
    background-color: #ffffff;   /* white background */
    font-family: Arial, sans-serif;  /* clean, simple font */
}

h1 {
    color: #2c3e50;              /* dark blue-gray heading */
    text-align: center;          /* center the heading */
}

p {
    color: #444444;              /* dark gray text */
    font-size: 18px;             /* comfortable reading size */
    line-height: 1.6;            /* more space between lines */
    max-width: 600px;            /* limit width for easier reading */
    margin: 10px auto;           /* center paragraphs on the page */
}

Save styles.css.

Step 2: Link the CSS File in Your HTML

Now update the <head> of index.html to link to your new CSS file. Remove the old <style> block if it’s still there, and add this line:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>My First Styled Page</title>

    <!-- Link to external CSS file -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Welcome to My Page</h1>
    <p>This is a simple paragraph.</p>
    <p>This is another paragraph, using the same external CSS.</p>
</body>
</html>

How the Link Works

<link rel="stylesheet" href="styles.css"> tells the browser:
- rel="stylesheet" – this link is a CSS stylesheet
- href="styles.css" – the file is named styles.css and is in the same folder as index.html

Save and refresh your browser. Your page should now use the styles from styles.css. If you change something in styles.css and refresh, the page will update instantly.

Try it yourself:

In styles.css, add this rule at the bottom:

h1:hover {
    color: darkred;  /* heading turns dark red when the mouse hovers over it */
}

Refresh your page and move your mouse over the heading. It should change color when you hover. Nice work—you just added an interactive effect!

Comparing the Three Ways

Here’s a quick summary of when each method is useful:

Inline CSS
- Added directly to HTML tags with style="..."
- Good for quick tests or changing one specific element
- Becomes hard to manage on larger pages
Internal CSS
- Written inside a <style> tag in the <head> section
- Good for small sites or single pages
- Keeps styles in one place, but only for that page
External CSS
- Written in a separate .css file
- Best for larger sites and real projects
- One CSS file can style many pages

As you grow as a developer, you’ll mostly use external CSS, but it’s helpful to understand all three.

What’s Next? Keep Practicing

Learning CSS can feel like a lot at first, but you’ve already taken some big steps:

You created an HTML file and opened it in a browser
You used inline CSS to style a specific element
You wrote internal CSS to style multiple elements in one place
You created and linked an external CSS file for cleaner, reusable styles

To keep going, try this mini challenge:

Add a new <button> element to your page.
Use your styles.css file to change its background color, text color, and padding.
Add a :hover effect so it changes color when you move your mouse over it.

Every small experiment teaches you something new. Stay curious, keep tweaking your code, and soon styling web pages will feel natural.

You now know the three main ways to add CSS—inline, internal, and external. With these tools, you’re ready to start designing pages that don’t just work, but look great too.

Mudzinga