🎨 CSS COURSE – MODULE 1: INTRODUCTION
📁 File: intro.md
🧠 What is CSS?
📌 Introduction
CSS stands for Cascading Style Sheets.
It is used to style HTML elements and control how a webpage looks.
👉 HTML = structure 👉 CSS = design & appearance
💡 Why CSS is Important
Without CSS:
- Websites look plain
- No colors
- No layout
- No design
With CSS:
- Beautiful UI
- Responsive design
- Modern websites
🧱 How CSS Works
CSS works by selecting HTML elements and applying styles:
p {
color: blue;
}
✔ This makes all <p> text blue
🌐 Ways to Add CSS
1. Inline CSS
<p style="color:red;">Hello</p>
2. Internal CSS
<style>
p {
color: red;
}
</style>
3. External CSS (BEST PRACTICE)
<link rel="stylesheet" href="style.css" />
p {
color: red;
}
🧠 Important Concept
👉 CSS follows a rule:
selector { property: value; }
Example:
h1 {
color: green;
font-size: 30px;
}
🎯 Real Example
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<h1>Welcome</h1>
<p>This is CSS styling</p>
</body>
</html>
h1 {
color: blue;
}
p {
color: gray;
}
🚫 Common Mistakes
- Forgetting
;in CSS ❌ - Wrong selector ❌
- Mixing HTML and CSS incorrectly ❌
🧪 Mini Exercise
Create:
- An HTML page
- Add external CSS file
- Style:
- Heading → red
- Paragraph → gray
- Background → light color