[Web Dev] Day 2: HTML Code (CSS Basics)

📅 Date: Feb 22, 2026

🧠 Mood: Designer 🎨

🔥 Topic: Web Dev Day 2: CSS Basics & The Box Model

🎨 Adding Colors to the Skeleton

If HTML is the skeleton, CSS (Cascading Style Sheets) is the skin, clothes, and makeup. Without CSS, the web is just boring black text on a white background.

Today, I dived into the basics of CSS. There are 3 ways to add CSS (Inline, Internal, External), but External CSS (making a separate .css file) is the only professional way to do it.

---

🧠 CSS Summary: The Holy Trinity

1. Selectors (How to target elements)

• Element Selector: h1 { color: red; } (Targets all h1 tags).
• Class Selector (The Best): .btn { background: blue; } (Targets any element with class="btn". Can be used multiple times).
• ID Selector: #navbar { height: 50px; } (Targets a unique element with id="navbar". Use only once per page).

2. The Box Model (Crucial!)

Every single element in HTML is a rectangular box. You MUST understand this to position things correctly.

1. Content: The actual text or image.
2. Padding: The transparent space INSIDE the border.
3. Border: The line around the padding.
4. Margin: The transparent space OUTSIDE the border (pushes other elements away).
        

---

🎯 What's Next?

Theory is boring. Tomorrow, I will apply this Box Model and build an actual Signup & Login Page UI from scratch!