Episode 15 of 17

Add CSS to Your HTML

Learn the three ways to add CSS to HTML — inline styles, internal stylesheets, and external CSS files. Start making your pages beautiful.

HTML structures content, but CSS (Cascading Style Sheets) makes it beautiful. There are three ways to add CSS to your HTML.

Method 1: Inline Styles

Add styles directly to an element using the style attribute:

<p style="color: blue; font-size: 18px;">Blue text</p>
<h1 style="background: yellow; padding: 10px;">Yellow heading</h1>

⚠️ Avoid inline styles — they're hard to maintain and override.

Method 2: Internal Stylesheet

Add a <style> block inside the <head>:

<head>
  <style>
    body { font-family: Arial, sans-serif; background: #f5f5f5; }
    h1 { color: #333; text-align: center; }
    p { color: #666; line-height: 1.6; }
    .highlight { background: yellow; padding: 4px; }
  </style>
</head>

Good for single-page projects or quick prototyping.

Method 3: External Stylesheet (Recommended)

Create a separate .css file and link it:

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

/* style.css */
body { font-family: 'Inter', sans-serif; margin: 0; padding: 0; }
h1 { color: #1a1a1a; }
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }

Which Method to Use?

Method	When to Use
Inline	Quick testing only
Internal	Single page, prototyping
External	Real projects (always)

Always use external stylesheets for real projects. They're reusable, cacheable, and keep your HTML clean.