HTML CSS integration connects HTML document structure with Cascading Style Sheets (CSS) to style layouts, typography, colors, and responsive designs. CSS can be attached to HTML using inline attributes, internal <style> tags, or external .css files.
Web developers apply CSS rules to HTML documents using three methods:
style attribute directly on individual HTML tags. Best for quick isolated fixes or dynamic backend updates.<style> block inside the <head> section of an HTML document. Ideal for single-page templates or localized page styling.<link rel="stylesheet" href="styles.css"> element inside <head> to reference an external .css file. Best practice for multi-page web applications and maintainable codebases.When styling rules conflict, browsers resolve styles according to CSS specificity and stylesheet insertion order:
flowchart TD
A["CSS Specificity Hierarchy"] --> B["Inline Styles (style='...')"]
B -->|Overrides| C["Internal Stylesheet (<style>)"]
C -->|Overrides| D["External Stylesheet (.css)"]
D -->|Overrides| E["Browser Default Styles"]
Here is a complete HTML document demonstrating external link tags, internal style blocks, and inline style overrides:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML CSS Integration Example</title>
<!-- 1. External CSS Link -->
<link rel="stylesheet" href="main.css">
<!-- 2. Internal CSS Block -->
<style>
body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background-color: #f8fafc;
color: #1e293b;
margin: 0;
padding: 20px;
}
.card {
background-color: #ffffff;
border: 1px solid #cbd5e1;
border-radius: 8px;
padding: 24px;
max-width: 500px;
margin: 0 auto;
}
.card-title {
color: #0f172a;
margin-top: 0;
}
</style>
</head>
<body>
<div class="card">
<h2 class="card-title">User Profile</h2>
<p>This card layout is styled using an internal CSS style block in the head element.</p>
<!-- 3. Inline CSS Attribute Override -->
<button style="background-color: #2563eb; color: #ffffff; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer;">
Edit Profile
</button>
</div>
</body>
</html>
<link> tags inside <head>: Always place stylesheet <link> tags in the HTML <head> section so browsers parse visual styles before rendering page elements, preventing Flash of Unstyled Content (FOUC).href="css/styles.css" vs href="../styles.css") to avoid 404 resource errors on production deployments.Create an HTML file with an internal <style> tag that sets the body background color to light gray (#f1f5f9) and styles an <h1> heading with dark blue text (#1e3a8a) and a centered alignment!
Sign in to track your learning journey, earn industry-recognized certificates, and join our elite developer community.
Quick Access With
Experiment with the code from this lesson in our interactive playground.