HTML CSS

HTML CSS: Connecting Stylesheets to HTML Pages

HTML defines document structure while CSS controls visual design, spacing, colors, and responsive layout. You can attach CSS rules to an HTML document in three ways: inline attributes, internal style blocks, or external .css files.

Three Ways to Add CSS

1. External CSS: Store rules in a separate styles.css file and link it inside head with link rel="stylesheet". This is the standard approach for multi-page sites because browsers cache the CSS file once across every page.
2. Internal CSS: Place a style block inside the head section to style a single standalone page.
3. Inline CSS: Add a style="..." attribute directly onto one HTML element for isolated overrides or email templates.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML and CSS Example</title>
    <!-- External stylesheet link -->
    <link rel="stylesheet" href="/css/styles.css">

    <!-- Internal CSS block -->
    <style>
        .notice-card {
            background-color: #f1f5f9;
            border-left: 4px solid #2563eb;
            padding: 16px;
            font-family: system-ui, sans-serif;
        }
    </style>
</head>
<body>
    <div class="notice-card">
        <h2>Styled with Internal CSS</h2>
        <p style="color: #334155;">This paragraph also applies an inline text color override.</p>
    </div>
</body>
</html>

Cascade Priority Order

When conflicting rules target the same element, inline styles win over internal and external styles. Between internal style blocks and external link stylesheets, whichever appears lower in the head section wins if specificity matches.

Common Mistakes to Avoid

• Placing link rel="stylesheet" inside body: Putting stylesheets in body causes a flash of unstyled content before styles load. Keep stylesheet links in head.
• Adding style tags inside an external .css file: Write pure CSS rules in .css files with zero HTML tags.
• Using relative CSS paths carelessly: Double-check folder paths (css/main.css vs /css/main.css) when moving pages into subfolders.

Frequently Asked Questions

Which CSS method is best for real websites?

External .css files are best because they keep HTML clean, prevent repeated rules, and allow browsers to cache styles between page visits.

Can an HTML page load more than one external stylesheet?

Yes. You can add multiple link tags in head, and later stylesheets override earlier ones when selector specificity is equal.