CssHow-ToBeginner · 4 min read

How to Add CSS to HTML: Simple Methods Explained

You can add CSS to HTML by using inline styles directly on elements, <style> tags inside the HTML <head>, or by linking an external CSS file with the <link> tag. Each method controls how styles apply and helps keep your code organized.

📐

Syntax

There are three main ways to add CSS to HTML:

Inline CSS: Add styles directly to an HTML element using the style attribute.
Internal CSS: Place CSS rules inside a <style> tag within the HTML <head> section.
External CSS: Link an external CSS file using the <link> tag in the <head>.

html

<!-- Inline CSS -->
<p style="color: blue;">This text is blue.</p>

<!-- Internal CSS -->
<head>
  <style>
    p { color: red; }
  </style>
</head>

<!-- External CSS -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

💻

Example

This example shows all three methods together. The inline style overrides the internal style, and the external style applies to other elements.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS in HTML Example</title>
  <style>
    /* Internal CSS */
    p.internal { color: green; font-weight: bold; }
  </style>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p style="color: blue;">This text uses inline CSS and is blue.</p>
  <p class="internal">This text uses internal CSS and is green and bold.</p>
  <p class="external">This text uses external CSS and is red and italic.</p>
</body>
</html>

Output

Three paragraphs: first is blue text, second is green bold text, third is red italic text.

⚠️

Common Pitfalls

Common mistakes when adding CSS to HTML include:

Using inline styles too much, which makes code hard to maintain.
Forgetting to place the <style> or <link> tags inside the <head> section.
Incorrect file paths in the href attribute for external CSS files.
Not closing CSS rules properly with semicolons or braces.

html

<!-- Wrong: External CSS link outside head -->
<body>
  <link rel="stylesheet" href="styles.css">
</body>

<!-- Right: External CSS link inside head -->
<head>
  <link rel="stylesheet" href="styles.css">
</head>

📊

Quick Reference

Summary tips for adding CSS to HTML:

Use external CSS for large projects to keep styles separate and reusable.
Use internal CSS for quick testing or small pages.
Use inline CSS only for quick, one-off style changes.
Always check your file paths and syntax carefully.

✅

Key Takeaways

Add CSS inline with the style attribute for quick, single-element styling.

Use internal CSS inside a