CSS styles can be added to HTML documents using three methods: external stylesheets, internal style blocks, or inline style attributes.
Each method inserts CSS into web documents at different scopes:
<!-- 1. External CSS (Recommended for Production) -->
<link rel="stylesheet" href="styles.css">
<!-- 2. Internal CSS (Used for single-page styles) -->
<style>
body { background-color: #0f172a; }
</style>
<!-- 3. Inline CSS (Used for quick dynamic overrides) -->
<h1 style="color: #38bdf8;">Inline Styled Title</h1>
Method breakdown:
.css files and linked inside <head>. Best for entire multi-page websites.<style> tags in <head>. Used for unique single-page layouts.style="..." attributes. Highest specificity, but hard to maintain.flowchart TD
A["Cascading Priority Order"] --> B["1. Inline Styles (style='...') [Highest Specificity]"]
B --> C["2. Internal <style> Block & External .css Files"]
C --> D["3. Browser Default User-Agent Stylesheet [Lowest Priority]"]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS How-To Demonstration</title>
<!-- External stylesheet import -->
<link rel="stylesheet" href="main.css">
<!-- Internal stylesheet -->
<style>
.badge {
display: inline-block;
padding: 4px 10px;
background-color: #059669;
color: #ffffff;
border-radius: 4px;
font-weight: bold;
}
</style>
</head>
<body style="font-family: system-ui, sans-serif; background-color: #0f172a; color: #f8fafc; padding: 2rem;">
<h2>CSS Insertion Methods</h2>
<p>Internal Class Style: <span class="badge">Active</span></p>
<!-- Inline Style Override -->
<p style="color: #f59e0b; font-weight: bold;">
Inline Overridden Paragraph
</p>
</body>
</html>
.css files keep HTML code clean and allow browsers to cache CSS assets across page navigations.<link rel="stylesheet"> inside <head>: Prevents Flash of Unstyled Content (FOUC) during page loading.Write a <link> tag connecting an external stylesheet named theme.css inside the <head> section of an HTML document!
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.