🎨 Day 8: Inline vs Internal vs External CSS
CSS (Cascading Style Sheets) allows you to add style to your HTML documents. In this lesson, you'll learn the three main ways to apply CSS: inline, internal, and external.
📌 1. Inline CSS
Used directly within an HTML tag using the style attribute.
<h1 style="color: red; font-size: 24px;">This is Inline CSS</h1>
📌 2. Internal CSS
Defined within a <style> tag in the <head> of the HTML document.
<head>
<style>
p {
color: green;
font-size: 18px;
}
</style>
</head>
<body>
<p>This is Internal CSS</p>
</body>
📌 3. External CSS
CSS is written in a separate .css file and linked to your HTML file.
/* style.css */
h1 {
color: blue;
text-align: center;
}
/* HTML file */
<head>
<link rel="stylesheet" href="style.css" />
</head>
💡 Which One to Use?
- Inline: For quick testing or one-off styles (not recommended for production)
- Internal: Good for small projects or when testing styles directly
- External: Best practice for scalability and reusability
🧪 Practice Task
- Try styling a heading with inline CSS
- Use internal CSS to style a paragraph and a button
- Link an external CSS file and style multiple elements
🚀 What’s Next?
In Day 9, we’ll explore CSS colors, fonts, and typography to make your designs stand out.
No comments:
Post a Comment