Hey there! I’m Vikas Sankhla, your friendly full-stack dev bro 😎 and founder of Web Codder. Today, let’s talk about how to make websites beautiful using CSS — in the easiest way possible.
Imagine HTML as the skeleton of a web page. CSS is like the clothes, colors, and makeup that make it look cool and stylish. 💅
🧵 What is CSS?
CSS stands for Cascading Style Sheets.
It controls how elements look on a web page — like colors, spacing, fonts, sizes, and layout.
Think of HTML as what you see, and CSS as how you see it.
Example:
<p>This is a paragraph.</p>
With CSS:
p {
color: blue;
font-size: 18px;
}
Now the paragraph is blue and bigger! 💙
📦 CSS Box Model – Layout Magic
Every HTML element is a box. This box has 4 layers:
- Content – The actual text or image
- Padding – Space inside the box, around the content
- Border – The line around the box
- Margin – Space outside the box
Box Model Diagram 📦
+-------------+
| Margin |
| +--------+ |
| | Border | |
| |+------+| |
| ||Padding|| |
| ||Content|| |
| |+------+| |
| +--------+ |
+-------------+
Example:
div {
margin: 10px;
padding: 20px;
border: 2px solid black;
}
✍️ Styling Text and Fonts
You can make your text beautiful with CSS.
Basic Properties:
h1 {
color: red;
font-size: 32px;
font-family: Arial, sans-serif;
line-height: 1.5;
}
color: Text colorfont-size: Size of the textfont-family: Style of the fontline-height: Space between lines
👀 Tip: Use Google Fonts to explore cool fonts!
🧠 CSS Selectors – Target Like a Pro
Selectors help us decide which element to style.
| Selector | Example | Meaning |
|---|---|---|
| Element | p {} | All <p> tags |
| Class | .title {} | Elements with class=”title” |
| ID | #main {} | Element with id=”main” |
Example:
<p class="info">This is blue text.</p>
.info {
color: blue;
}
⚖️ Specificity – Who Wins the Style Fight?
Sometimes, multiple styles apply to the same element. Who wins?
🎯 Specificity decides which CSS rule is stronger.
Specificity Ranking:
- Inline styles →
style="color:red" - ID selectors →
#id - Class selectors →
.class - Element selectors →
p, h1
📌 Higher specificity wins!
🧰 Inline, Internal, and External CSS
There are 3 ways to apply CSS:
| Method | Where it goes | Example |
|---|---|---|
| Inline | Inside an HTML tag | <p style="color: red"> |
| Internal | In a <style> block | <style>p {color: blue;}</style> |
| External | Linked .css file | <link href="style.css" rel="stylesheet"> |
💡 Pro Tip: Always use external CSS for big projects.
🧪 Try It Yourself!
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1 class="title">Hello World</h1>
<p>This is a paragraph.</p>
</body>
</html>
/* styles.css */
.title {
color: purple;
font-size: 36px;
}
p {
color: green;
font-size: 18px;
}
📌 Summary
- CSS makes websites beautiful 🎨
- Use box model to control layout
- Style text with fonts, colors, and spacing
- Use selectors to target elements
- Specificity decides which style wins
📣 Final Tip from Vikas Bhaiya 💬
CSS is super fun once you play with it! Try changing colors, spacing, and fonts.
Build your own small project and style it like a boss. 🧑🎨💻
And hey, if you learned something new today:
✅ Subscribe to Web Codder on YouTube
👉 https://www.youtube.com/@web_codder/?sub_confirmation=1
🧠 Read more articles on Automation & Web Dev
👉 https://webcodder.dev/category/automation/
💬 Join our WhatsApp Community
👉 https://webcodder.dev/whatsapp
Let’s grow and code together! 🚀
