Adding CSS to HTML

Learn three ways to add CSS styles to your HTML pages — inline, internal, and external stylesheets.

Adding CSS to HTML

CSS (Cascading Style Sheets) controls the visual appearance of your HTML elements. There are three ways to add CSS to an HTML page.

Method 1: Inline CSS

Add styles directly to an element using the style attribute:

<h1 style="color: #6c5ce7; font-size: 2rem;">Hello World</h1>
<p style="color: gray; line-height: 1.7;">Styled paragraph.</p>

Pros: Quick for one-off styling
Cons: Not reusable, clutters HTML, hard to maintain

Method 2: Internal CSS

Place CSS inside a <style> tag within the <head>:

<head>
    <style>
        h1 {
            color: #6c5ce7;
            font-size: 2rem;
        }
        p {
            color: gray;
            line-height: 1.7;
        }
    </style>
</head>

Pros: Styles multiple elements, no extra files
Cons: Only applies to one page, mixes concerns

Method 3: External CSS (Recommended)

Create a separate .css file and link it:

<!-- In your HTML file -->
<head>
    <link rel="stylesheet" href="styles.css">
</head>

/* styles.css */
h1 {
    color: #6c5ce7;
    font-size: 2rem;
}
p {
    color: gray;
    line-height: 1.7;
}
.card {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

Pros: Reusable across pages, clean separation, cacheable by browser
Cons: Requires an additional file (but this is standard)

Which Method Should You Use?

Method	Best For
Inline	Quick demos, email templates, or overriding specific styles
Internal	Single-page sites, prototypes, or page-specific styles
External	Everything else — this is the recommended approach

CSS Priority (Cascade)

If the same element has conflicting styles, the order of priority is:

Inline styles (highest priority)
Internal styles
External styles
Browser defaults (lowest priority)

A Complete Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Styled Page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>My Styled Page</h1>
    <p class="intro">This page uses an external CSS file.</p>
    <div class="card">
        <h2>Card Title</h2>
        <p>Card content with beautiful styling.</p>
    </div>
</body>
</html>

Key Takeaways

Three methods: inline, internal, and external CSS
External CSS is the recommended approach for real projects
Use <link rel="stylesheet" href="file.css"> to connect a CSS file
Inline styles have the highest priority but should be used sparingly