02 CSS (The Beauty)

HTML agar skeleton hai, to CSS (Cascading Style Sheets) uske kapde aur makeup hai. 💄

---

1. Selectors (Kisko style karein?) 🎯

CSS ko batana padta hai ki kaunsa element design karna hai.

• Element Selector: Tag ka naam.

  p { color: red; } /* Saare paragraphs red ho jayenge */

• Class Selector (.): Sabse zyada use hota hai.

  .btn { background: blue; } /* Jinki class="btn" hai */

• ID Selector (#): Unique elements ke liye.

  #header { height: 100px; } /* Jiski id="header" hai */

• Universal Selector (*): Sab kuch select karne ke liye.

  * { margin: 0; padding: 0; } /* Reset */

---

2. The Box Model (Dabba Concepts) 📦

Har HTML element ek dabba (box) hai. Isko samajhna sabse zaroori hai.

1. Content: Asli text ya image.
2. Padding: Content aur Border ke beech ki jagah (Andar ki saans).
3. Border: Dabbe ki boundary.
4. Margin: Do dabbo ke beech ki doori (Bahar ki jagah).

.box {
  width: 200px;
  padding: 20px; /* Andar space */
  border: 5px solid black; /* Boundary */
  margin: 50px; /* Doosron se doori */
}

---

3. Flexbox (Cheat Sheet) 💪

Layout banane ka modern tareeka. display: flex container par lagayein.

Parent (Container) Properties:

• justify-content: Horizontal alignment (Main Axis).
  • center: Beech me.
  • space-between: Phail jao.
• align-items: Vertical alignment (Cross Axis).
  • center: Vertically beech me.
• flex-direction:
  • row: Line me (Default).
  • column: Ek ke neeche ek.

Example (Center a Div):

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

---

4. CSS Grid (2D Layouts) 🕸️

Complex layouts ke liye Grid best hai (Rows aur Columns dono).

.grid-container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr; /* 3 Equal Columns */
  gap: 20px; /* Beech me gap */
}

---

5. Responsive Design (Mobile Friendly) 📱

Website phone par kaisi dikhegi? Media Queries ka use karein.

/* PC ke liye */
.card { width: 50%; }

/* Mobile ke liye (Jab screen 768px se choti ho) */
@media (max-width: 768px) {
  .card { width: 100%; }
}

---

Pro Tips 💡

1. !important se bachein: Ye debugging mushkil kar deta hai.
2. Naming Convention: nav-bar ya navBar (BEM methodology best hai).
3. External CSS: Hamesha .css file alag banayein aur link karein.

---

Next Up: Ab dimaag lagate hain! JavaScript se website ko interactive banayein. 🧠