Episode 5 of 53

Inline and Embedded CSS

Learn two ways to add CSS directly in your HTML: inline styles and embedded stylesheets.

There are three ways to add CSS to an HTML page. In this episode, we cover the first two: inline styles and embedded (internal) stylesheets.

Inline Styles

Inline styles are written directly on an HTML element using the style attribute:

<p style="color: red; font-size: 18px;">This is red text.</p>
<h1 style="text-align: center;">Centered Heading</h1>

Pros: Quick for one-off changes. Cons: Doesn't scale, mixes content with presentation, hard to maintain.

Embedded (Internal) CSS

Embedded CSS goes inside a <style> tag in the <head> section of your HTML:

<head>
    <style>
        h1 {
            color: navy;
            text-align: center;
        }
        p {
            font-size: 16px;
            line-height: 1.5;
        }
    </style>
</head>

Pros: Keeps styles separate from individual elements. Good for single-page projects. Cons: Doesn't scale across multiple pages — you'd have to duplicate styles in every HTML file.

When to Use Each

Inline styles — only for quick testing or truly one-off overrides
Embedded CSS — for small, single-page projects or prototyping
External stylesheets (covered next episode) — for everything else