Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Inline, Internal & External CSS
There are three ways to add CSS to an HTML page: inline (style attribute), internal (style tag), and external (separate .css file). Each method has specific use cases. Professional developers primarily use external CSS for maintainability and performance.
Three Ways to Add CSS
- Inline CSS - style attribute directly on an element: <p style='color: red;'>. Use only for quick overrides or dynamic JS styles
- Internal CSS - <style> tag inside <head>. Good for single-page styles or prototyping. Styles only apply to that page
- External CSS - Separate .css file linked with <link rel='stylesheet' href='styles.css'>. The professional standard
- Priority order - Inline (highest) > Internal > External (lowest). More specific methods override less specific ones
- External benefits - Cached by browser (faster page loads), reused across pages, easier to maintain, team-friendly
- Best practice - Use external CSS for all projects. Reserve inline for JavaScript-driven dynamic styles only
All Three Methods
<!-- Method 1: Inline CSS -->
<p style="color: red; font-size: 18px;">Inline styled text</p>
<!-- Method 2: Internal CSS (in <head>) -->
<head>
<style>
p { color: blue; font-size: 16px; }
</style>
</head>
<!-- Method 3: External CSS (separate file) -->
<head>
<link rel="stylesheet" href="styles.css">
</head>
/* styles.css */
p {
color: green;
font-size: 16px;
line-height: 1.6;
}Tip
Always use external CSS for real projects. Create a 'styles.css' file, link it in your HTML <head>, and write all styles there. This lets the browser cache the file - returning visitors load your site faster because the CSS is already saved locally.
The cascade determines which style wins when multiple rules conflict
Common Mistake
Placing the <link> tag in the <body> instead of <head> causes a Flash of Unstyled Content (FOUC) - the user sees raw HTML for a moment before styles apply. Always put CSS links inside <head> to prevent this jarring experience.
Practice Task
Create an external CSS file called 'styles.css'. In it, write styles for body (font-family, background-color), h1 (color, font-size), and p (color, line-height). Then link it to your HTML file using <link rel='stylesheet' href='styles.css'> in the <head>.
Quick Quiz
Key Takeaways
- There are three ways to add CSS to an HTML page: inline (style attribute), internal (style tag), and external (separate.
- Inline CSS - style attribute directly on an element: <p style='color: red;'>. Use only for quick overrides or dynamic JS styles
- Internal CSS - <style> tag inside <head>. Good for single-page styles or prototyping. Styles only apply to that page
- External CSS - Separate .css file linked with <link rel='stylesheet' href='styles.css'>. The professional standard