How to Insert CSS

There are several ways to apply CSS to an HTML document. Each method has different advantages, disadvantages, and use cases. Understanding these differences is important for choosing the right approach.

1. Inline CSS

Inline CSS is applied directly to an HTML element using the style attribute. Each element can have different styles.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Inline CSS Example</title>
</head>
<body>
    <h1 style="color: #2c3e50; font-size: 36px; text-align: center;">
        Title with Inline CSS
    </h1>

    <p style="color: #555; font-size: 16px; line-height: 1.8; max-width: 600px; margin: 0 auto;">
        This paragraph has styles written directly inside the style attribute.
        Each property is separated by a semicolon (;).
    </p>

    <div style="background-color: #ecf0f1; padding: 20px; border-left: 4px solid #3498db; margin: 20px 0;">
        <p style="color: #333;">
            Notification box with inline CSS.
        </p>
    </div>

    <button style="background-color: #3498db; color: white; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; font-size: 16px;">
        Button with Inline CSS
    </button>
</body>
</html>

Inline CSS Priority

Inline CSS has the highest priority among the three methods (except for !important in external/internal CSS). This means an inline style will override styles from internal or external CSS.

<!-- External CSS: .box { color: blue; } -->
<!-- Internal CSS: .box { color: green; } -->
<div class="box" style="color: red;">
    This text is RED (inline CSS wins)
</div>

When to Use Inline CSS

• For quick testing/debugging
• For applying dynamic styles from JavaScript
• For HTML email (some email clients do not support external CSS)
• Avoid it for styling in production code

2. Internal CSS (Embedded CSS)

Internal CSS is written inside a <style> tag placed in the <head> section of an HTML document. It is suitable for styling a single page.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Internal CSS Example</title>
    <style>
        /* Basic reset */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background-color: #f8f9fa;
            color: #333;
            line-height: 1.6;
        }

        .header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 40px 20px;
            text-align: center;
        }

        .header h1 {
            font-size: 2.5rem;
            margin-bottom: 10px;
        }

        .header p {
            font-size: 1.1rem;
            opacity: 0.9;
        }

        .container {
            max-width: 800px;
            margin: 30px auto;
            padding: 0 20px;
        }

        .card {
            background: white;
            border-radius: 10px;
            padding: 25px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
        }

        .card h2 {
            color: #2c3e50;
            margin-bottom: 15px;
            font-size: 1.4rem;
        }

        .card p {
            color: #666;
            line-height: 1.8;
        }

        .highlight {
            background-color: #fff3cd;
            border-left: 4px solid #ffc107;
            padding: 15px 20px;
            margin: 20px 0;
            border-radius: 0 5px 5px 0;
        }

        @media (max-width: 768px) {
            .header h1 {
                font-size: 1.8rem;
            }
            .container {
                padding: 0 15px;
            }
        }
    </style>
</head>
<body>
    <div class="header">
        <h1>Page Title</h1>
        <p>A short description about this page</p>
    </div>

    <div class="container">
        <div class="card">
            <h2>First Card</h2>
            <p>Content of the first card with a detailed explanation about the topic discussed.</p>
        </div>

        <div class="highlight">
            <strong>Note:</strong> This is a highlight block with a yellow background.
        </div>

        <div class="card">
            <h2>Second Card</h2>
            <p>Content of the second card with different content.</p>
        </div>
    </div>
</body>
</html>

When to Use Internal CSS

• Single pages that do not share styles with other pages
• Email templates
• Quick prototypes
• When the styles are specific to one particular page

3. External CSS

External CSS is stored in a separate file with a .css extension and linked to the HTML using a <link> tag. This is the most recommended method for web projects.

File Structure

project/
├── index.html
├── about.html
├── css/
│   ├── styles.css
│   ├── reset.css
│   └── responsive.css
└── js/
    └── main.js

The styles.css File

/* styles.css */
:root {
    --primary-color: #3498db;
    --secondary-color: #2c3e50;
    --accent-color: #e74c3c;
    --text-color: #333;
    --text-light: #666;
    --bg-color: #ffffff;
    --bg-light: #f8f9fa;
    --border-color: #ddd;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    color: var(--text-color);
    background-color: var(--bg-light);
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Typography */
h1, h2, h3 {
    color: var(--secondary-color);
    margin-bottom: 15px;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }

p {
    margin-bottom: 15px;
    color: var(--text-light);
}

/* Components */
.btn {
    display: inline-block;
    padding: 12px 24px;
    background-color: var(--primary-color);
    color: white;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.btn:hover {
    background-color: #2980b9;
}

.btn-secondary {
    background-color: transparent;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
}

.btn-secondary:hover {
    background-color: var(--primary-color);
    color: white;
}

The index.html File

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home - My Website</title>
    <link rel="stylesheet" href="css/styles.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <header>
        <div class="container">
            <h1>Welcome</h1>
            <p>This is a website with external CSS.</p>
            <a href="#" class="btn">Start Now</a>
        </div>
    </header>
</body>
</html>

The media Attribute on <link>

The media attribute allows CSS to be loaded based on certain conditions.

<!-- CSS for all media (default) -->
<link rel="stylesheet" href="styles.css">

<!-- CSS for screen only -->
<link rel="stylesheet" href="screen.css" media="screen">

<!-- CSS for print only -->
<link rel="stylesheet" href="print.css" media="print">

<!-- CSS for screens with a maximum width of 768px -->
<link rel="stylesheet" href="mobile.css" media="screen and (max-width: 768px)">

4. @import Rule

The @import rule is used to import other CSS files from within a CSS file or from within a <style> tag.

@import in a CSS File

/* main.css */
@import url("reset.css");
@import url("variables.css");
@import url("typography.css");

/* Main styles */
body {
    font-family: var(--font-primary);
    color: var(--text-color);
}

@import in a <style> Tag

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>@import Example</title>
    <style>
        @import url("reset.css");
        @import url("styles.css");

        body {
            font-family: Arial, sans-serif;
        }
    </style>
</head>
<body>
    <h1>Page Title</h1>
</body>
</html>

@import Order

The @import rule must be placed before all other CSS rules in a file. If it is placed after other CSS rules, it will be ignored.

/* CORRECT - @import at the top */
@import url("reset.css");
@import url("components.css");

.header {
    background-color: blue;
}

/* WRONG - @import after CSS rules */
.header {
    background-color: blue;
}

@import url("reset.css");  /* Will be ignored by the browser */

Full Comparison

Usage Recommendations

1. Use External CSS as the primary method for all web projects.
2. Use Internal CSS only for single pages or email templates.
3. Use Inline CSS only for dynamic styling from JavaScript.
4. Use <link> instead of @import for better performance.
5. Split CSS into multiple files (reset, components, responsive) for maintainability.

Summary

CSS can be inserted into HTML through four methods: inline, internal, external (<link>), and @import. External CSS using <link> is the best method because it supports caching, is easy to maintain, and cleanly separates presentation from content. The choice of method depends on the project's scale and specific needs.