🎨
Basics

CSS Kya Hai?

Introduction
💡 Agar HTML ghar ka structure hai (deewarein, kamre), CSS uska interior design hai — rang kya honge, furniture kaha rakhna hai, lighting kaisi hogi. Same ghar (HTML), bilkul alag look CSS badalne se.

CSS (Cascading Style Sheets) HTML elements ki STYLING control karta hai — colors, fonts, spacing, layout, animations, sab kuch. HTML "kya hai" batata hai, CSS "kaisa dikhta hai" decide karta hai.

CSS rules ek simple pattern follow karte hain: selector { property: value; } — selector batata hai KAUNSA element target karna hai, property-value pair batata hai WHAT style apply karni hai.

CSS ko HTML se connect karne ke 3 tareeke hain: external stylesheet (<link rel="stylesheet">, sabse common aur best practice), internal (<style> tag <head> mein), inline (style="..." attribute directly element par, avoid karo generally).

/* style.css */
h1 {
  color: blue;
  font-size: 32px;
}

p {
  color: gray;
  line-height: 1.6;
}
🎨
Agar HTML ghar ka structure hai (deewarein, kamre), CSS uska interior design hai — rang kya honge, furniture kaha rakhna hai, lighting kaisi hogi. Same ghar (HTML), bilkul alag look CSS badalne se.
1 / 6
⚡ Quick Recap
  • CSS = styling/presentation layer, HTML = structure
  • selector { property: value; } = basic rule syntax
  • External stylesheet (<link>) = best practice, inline avoid karo
Is page mein (2 subtopics)

CSS3 (jo aaj "CSS" ka current standard mana jaata hai) modules mein evolve hota hai (Selectors, Flexbox, Grid, Animations alag-alag specs hain) — isliye "CSS4" jaisa koi single version nahi hai, features individually browsers mein add hote rehte hain.

/* Modern browsers naye features support karte hain: */
.modern {
  display: grid;           /* CSS Grid (relatively recent) */
  gap: 20px;                 /* Modern spacing property */
  aspect-ratio: 16 / 9;      /* Very modern feature */
}
💡Tip: caniuse.com ek bahut useful tool hai check karne ke liye ki koi CSS feature kaunse browsers mein support hai — production code likhte waqt browser support verify karna important habit hai.

Different browsers ka default styling thoda alag hota hai (margins, font sizes) — "CSS reset" (sab kuch zero kar dena) ya "normalize.css" (consistent, sensible defaults) se cross-browser consistency achieve karte hain, project shuru karte waqt.

/* Simple reset example: */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
💡Tip: Modern projects mein full "reset" ki jagah lightweight "normalize" approach zyada common hai — poora zero karne ke bajaye, sensible/consistent starting defaults set karna.