Colors & Units
Colors: named colors (red, blue — simple, limited), hex (#FF5733 — RRGGBB format, bahut common), rgb(255, 87, 51) (Red-Green-Blue values), rgba(255, 87, 51, 0.5) (RGB + alpha/transparency).
Units: px (absolute, fixed pixels), % (parent ke relative), em (parent element ke font-size ke relative), rem (root/html element ke font-size ke relative — predictable, isliye modern CSS mein popular).
h1 {
color: #FF5733; /* hex */
background-color: rgb(240, 240, 240);
}
p {
color: rgba(0, 0, 0, 0.7); /* 70% opaque black */
font-size: 16px; /* absolute */
padding: 1em; /* parent's font-size ke relative */
margin: 2rem; /* root font-size ke relative (predictable) */
width: 50%; /* parent width ke relative */
}- hex/rgb/rgba = color formats, rgba mein transparency bhi
- px = fixed, % = parent-relative, em/rem = font-size-relative
- rem = predictable, modern CSS mein widely preferred
hsl(hue, saturation%, lightness%) ek aur color format hai — hex/rgb se zyada "human-intuitive" hai, especially color variations banane ke liye (jaise same hue, alag lightness = shades).
.primary { background-color: hsl(210, 100%, 50%); } /* bright blue */
.primary-dark { background-color: hsl(210, 100%, 30%); } /* darker blue, SAME hue */
.primary-light { background-color: hsl(210, 100%, 80%); } /* lighter blue, SAME hue */vw (viewport width) aur vh (viewport height) screen size ke relative units hain — 1vw = viewport width ka 1%, 1vh = viewport height ka 1%. Full-screen sections, responsive typography ke liye common.
.hero {
height: 100vh; /* poori screen height */
font-size: 5vw; /* screen width ke relative text size */
}