CSS How To

Learn the three ways to add CSS to your HTML documents

Three Ways to Add CSS

There are three ways to insert CSS into your HTML documents:

📄

External CSS

Separate .css file (recommended)

📝

Internal CSS

Inside <style> tag in HTML

✏️

Inline CSS

Directly in HTML elements

🔹 1. External CSS (Recommended)

External CSS is the most efficient and maintainable method for styling websites, involving a separate .css file linked to HTML documents. This approach promotes separation of concerns, enabling consistent styling across multiple pages, easier updates, and improved caching. By reducing code duplication and inline styles, external CSS enhances site performance, leading to faster load times and better Core Web Vitals scores. Search engines prioritize fast, well-structured websites, making external CSS a critical SEO best practice. Additionally, cleaner HTML improves crawlability and indexing, while reusable stylesheets support scalable, user-friendly designs that boost engagement and reduce bounce rates.

Step 1: Create a CSS file (styles.css) 

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
    text-align: center;
}

Step 2: Link it in your HTML 

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Result:

Hello World!

🔹 2. Internal CSS

Internal CSS involves embedding style rules within a <style> block in the HTML <head> section, ideal for single-page projects or quick prototypes. This method allows styles to load quickly without additional HTTP requests, benefiting small-scale applications or pages with unique styling needs. However, internal CSS lacks reusability across multiple pages and can increase HTML file size. For SEO, limited use of internal CSS can improve initial page render speed, but excessive usage may hinder maintainability and performance. Balancing internal styles with external sheets ensures faster perceived loading and better user experience, positively impacting engagement metrics and search rankings. 

<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            background-color: lightblue;
        }
        
        .highlight {
            color: red;
            font-weight: bold;
        }
    </style>
</head>
<body>
    <p>This is normal text.</p>
    <p class="highlight">This is highlighted text.</p>
</body>
</html>

Result:

This is normal text.

This is highlighted text.

🔹 3. Inline CSS

Inline CSS applies styles directly to individual HTML elements using the style attribute, offering high specificity but limited maintainability. While useful for quick overrides, testing, or dynamic styling via JavaScript, inline CSS should be used sparingly. It increases HTML file size, reduces caching efficiency, and complicates large-scale updates. From an SEO perspective, excessive inline styles can slow page loading, harm Core Web Vitals, and reduce crawl efficiency. However, strategic use for critical above-the-fold content can improve perceived performance. Best practices recommend combining inline CSS with external sheets to balance speed, maintainability, and search engine visibility. 

<h1 style="color: blue; font-size: 30px;">Blue Heading</h1>
<p style="color: green; background-color: yellow;">Green text on yellow background</p>
<div style="border: 2px solid red; padding: 10px;">
    Red border with padding
</div>

Result:

Blue Heading

Green text on yellow background

Red border with padding

🔹 CSS Priority Order

CSS priority order, or specificity, determines which styles apply when multiple rules target the same element, directly impacting visual consistency. The hierarchy is: inline styles (highest), ID selectors, class/attribute selectors, and element selectors (lowest). The !important declaration can override all but should be used cautiously. Understanding specificity prevents styling conflicts, ensures predictable designs, and improves maintainability. Clean, conflict-free CSS leads to faster rendering, better user experience, and improved site performance—all key factors in SEO. Well-managed stylesheets also enhance crawlability and indexing, supporting higher search rankings and organic visibility.

Priority (Highest to Lowest):

  1. Inline CSS - style attribute
  2. Internal CSS - <style> tag
  3. External CSS - .css file 
<!-- External CSS: h1 { color: blue; } -->
<style>
    h1 { color: green; } /* Internal CSS */
</style>

<h1 style="color: red;">What color am I?</h1>

Result:

What color am I?

Answer: Red! (Inline CSS has highest priority)

💡 Best Practices

✅ Do:

  • Use External CSS for multiple pages
  • Use Internal CSS for single-page styles
  • Keep CSS organized and commented
  • Use meaningful file names (styles.css, main.css)

❌ Avoid:

  • Overusing inline CSS (hard to maintain)
  • Mixing all three methods unnecessarily
  • Very long CSS files without organization

🧠 Test Your Knowledge

Which CSS method is best for styling multiple web pages?