CSS3 Course in Roman Hindi/Urdu - Beginner se Advanced Tak | Lecture 11: CSS3 Variables & Custom Properties Full Guide (Yaar, CSS Variables, Themes, Calc Function, Responsive Themes – Full Deep Dive Se Samajh Aayega!)
Assalam-o-Alaikum yaar! Kya haal hai, dost? Pichli lecture mein media queries aur responsive design seekh liya – sites ko mobile/desktop sab par fit kar diya, breakpoints se magic! Ab smart coding: CSS3 Variables & Custom Properties! Yeh CSS3 ka powerful feature hai – colors, sizes ko variables mein store kar reusable banao, calc math ke saath dynamic, themes switch easy (dark/light). Hum is lecture mein custom properties (:root var), calc function (math expressions), responsive themes (media query vars), aur theme switching ko full detail mein bataayenge – har ek ka use kya, kyun zaroori, kahan lagana, aur real examples ke saath, jaise tere saath calculator aur color palette leke experiment kar raha hoon. Tension mat le, step-by-step, code copy-paste se try karenge. Yeh seekh le toh sites ko maintainable banaayega – ek jagah change, sab update!
Yaar, variables 2015 se hain, CSS preprocessors (Sass) ko replace kar rahe. Ready? Chal shuru!
CSS3 Variables Kya Hain? (Yaar, Overview – Kyun Aur Kab Use Karein)
Dost, CSS Custom Properties (Variables) values store karte hain jaise --primary-color: blue; – reusable, dynamic (JS change). Use: Themes (color switch), spacing consistent. Why: DRY code (don't repeat), easy maintenance. Where: :root global, components local. Example: :root { --main-bg: #f0f0f0; } body { background: var(--main-bg); } – ek change, sab update. Calc: --spacing: calc(1rem + 0.5vw); responsive. Without: Hardcoded, changes pain. Theme switching: JS class add dark mode vars.
Fun fact: Variables CSS ko programming-like banaate, Sass nahi chahiye. Chalo syntax deep dive!
CSS3 Custom Properties Syntax - Full Breakdown (Use, Why, Where with Examples)
Yaar, syntax --name: value; access var(--name). Full details: use kya, kyun, kahan, example.
- :root Selector: Use: Global variables set. Why: Inheritance all. Where: Top CSS. Example: :root { --primary: #3498db; --spacing: 1rem; } body { color: var(--primary); padding: var(--spacing); } – blue text, spaced. Why: Site-wide theme.
:root { --primary: #3498db; --spacing: 1rem; } - Local Variables: Use: Component specific. Why: Scoped. Where: Classes. Example: .card { --card-radius: 10px; border-radius: var(--card-radius); } .card different radius. Why: Reuse without global.
.card { --card-radius: 10px; border-radius: var(--card-radius); } - var() Fallback: Use: Default if var missing. Why: Safe. Where: All. Example: color: var(--color, red); No --color? Red fallback. Use: Legacy support.
color: var(--color, red); - Invalid Values: Use: Inherit parent if invalid. Why: Robust. Where: Dynamic. Example: --size: invalid; width: var(--size, 100px); – 100px fallback.
Yaar Tip: Hyphen --name convention. JS access: getComputedStyle(document.documentElement).getPropertyValue('--primary') change kar.
CSS3 Calc Function - Math Magic (Full Use with Examples)
Dost, calc expressions compute – + - * /.
- Basic Calc: Use: Dynamic values. Why: Flexible. Where: Widths. Example: width: calc(100% - 50px);
width: calc(100% - 50px);Full Minus 50px– viewport adjust. Why: Sidebar space. - Mixed Units: Use: % + px. Why: Hybrid. Where: Responsive. Example: font-size: calc(1rem + 1vw);
font-size: calc(1rem + 1vw);Fluid Size
– scale with screen. * / ok (parentheses). - Nested Calc: Use: Complex math. Why: Advanced. Where: Layouts. Example: padding: calc((100% / 3) - 10px); Equal thirds minus gap.
padding: calc((100% / 3) - 10px);
Yaar Tip: Calc vars mein: --gutter: 20px; margin: calc(var(--gutter) * 2); reusable math. No spaces around operators.
Responsive Themes with Variables - Dark/Light Mode (Full Switching with Examples)
Yaar, vars se themes switch – media query prefers-color-scheme.
- Light/Dark Vars: Use: Mode set. Why: User pref. Where: :root. Example: :root { --bg: white; --text: black; } [data-theme="dark"] { --bg: black; --text: white; } body { background: var(--bg); color: var(--text); } – switch class.
:root { --bg: white; --text: black; } [data-theme="dark"] { --bg: black; --text: white; } - Media Query Auto: Use: OS detect. Why: Native. Where: @media. Example: @media (prefers-color-scheme: dark) { :root { --bg: black; } } – auto dark mode. Why: Battery save.
@media (prefers-color-scheme: dark) { :root { --bg: black; } } - Toggle JS: Use: Button switch. Why: Manual. Where: Settings. Example: button onclick="document.documentElement.setAttribute('data-theme', 'dark')".
Yaar Tip: 16+ vars common theme (colors, spacing, shadows). Calc responsive: --font-size: clamp(1rem, 2vw, 1.5rem);
Apna Pehla Variables Project (Yaar, Hands-On – Step-by-Step with Fixes)
Dost, ab banao theme-switcher card!
Step 1: Setup
Folder "Variables-Project". Files: index.html, vars.css. Live Server.
Step 2: Code Likh (Full with Why)
vars.css:
:root {
--primary-color: #3498db;
--secondary-color: #2c3e50;
--bg-color: #f8f9fa;
--text-color: #333;
--spacing-sm: 0.5rem;
--spacing-md: 1rem;
--spacing-lg: 2rem;
--border-radius: 8px;
--shadow: 0 2px 10px rgba(0,0,0,0.1);
--font-size-base: clamp(1rem, 2.5vw, 1.2rem);
}
/* Dark Mode */
[data-theme="dark"] {
--bg-color: #1a1a1a;
--text-color: #f8f9fa;
--primary-color: #74b9ff;
--secondary-color: #fdcb6e;
--shadow: 0 2px 10px rgba(0,0,0,0.3);
}
/* Apply */
body {
background: var(--bg-color);
color: var(--text-color);
font-size: var(--font-size-base);
padding: var(--spacing-lg);
transition: background 0.3s, color 0.3s;
}
h1 {
color: var(--primary-color);
margin-bottom: var(--spacing-md);
text-shadow: var(--shadow);
}
.card {
background: var(--bg-color);
border: 1px solid var(--secondary-color);
border-radius: var(--border-radius);
padding: var(--spacing-md);
margin: var(--spacing-sm);
box-shadow: var(--shadow);
transition: all 0.3s;
}
.button {
background: var(--primary-color);
color: white;
border: none;
padding: calc(var(--spacing-sm) * 2) var(--spacing-md);
border-radius: var(--border-radius);
cursor: pointer;
}
.button:hover {
transform: scale(1.05);
box-shadow: var(--shadow);
}
/* Responsive Calc */
.container {
max-width: calc(100vw - 40px);
margin: 0 auto;
}
/* Auto Dark */
@media (prefers-color-scheme: dark) {
:root {
--bg-color: #1a1a1a;
--text-color: #f8f9fa;
}
}index.html:
<!DOCTYPE html>
<html lang="hi">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Variables Demo - Lecture 11</title>
<link rel="stylesheet" href="vars.css">
</head>
<body>
<h1>Variables Theme Demo</h1>
<button onclick="toggleTheme()">Toggle Dark/Light</button>
<div class="container">
<div class="card">
<h2>Card Title (Var Color)</h2>
<p>Spacing and shadows from variables. Calc width responsive.</p>
<button class="button">Action Button (Hover Scale)</button>
</div>
<div class="card">
<p>Second card with same styles – change vars, all update!</p>
</div>
</div>
<script>
function toggleTheme() {
document.documentElement.setAttribute('data-theme', document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark');
}
</script>
</body>
</html>Yaar, Yeh Kaise Kaam Karta? :root vars set, dark attribute override, body apply, calc responsive width, button hover scale. Toggle JS switch, auto media dark. Test: Click button – instant theme change. Mistakes: Var name mismatch? Fallback none. Calc space? Parentheses (var(--spacing) * 2).
Step 3: Test aur Tweak (Dost Help)
1. Save, refresh – toggle work? 2. Inspect: Computed vars values. 3. Tweak: --border-radius calc(10px + 5px); dynamic. Media auto test OS dark mode. Issue: JS no? Button onclick check.
Practice Tasks (Yaar, Challenges – Level Up Kar)
- Easy (10 Min): Code copy, --primary #e74c3c badal red, test all change. (Use: Theme tweak.)
- Medium (15 Min): Calc spacing: --gutter: calc(1rem + 0.5vw); margin: var(--gutter); responsive.
- Advanced (20 Min): Dark theme media query add vars, button toggle JS enhance localStorage save.
Dost Challenge: Ek calculator card banao calc vars se sizes, theme switch with calc(--font-size * 1.2) hover. Screenshot!
Common Questions (Yaar, Sab Clear – FAQ Dost Style)
- Q1: Variables JS se change kaise?
- A: document.documentElement.style.setProperty('--primary', 'red'); dynamic.
- Q2: Calc units mix kab?
- A: Always, jaise calc(50% + 20px). Parentheses nested ke liye.
- Q3: Fallback var mein kya daal?
- A: Safe default jaise var(--color, #000). No crash.
- Q4: Responsive vars?
- A: Media query mein override, jaise @media dark { --bg: black; }.
- Q5: Variables browser support?
- A: 95%+ IE11+, fallback static values.
Next Lecture Teaser
Yaar, agla advanced: CSS3 Pseudo-Classes Advanced & Combinators Deep (Focus, Active, Not, Has) with Specificity Tips. Variables practice kar, pseudo fun lagega. Comment bata kaisa tha – saath hain!
Course Outline Hint: - L1: Basic Intro - L2: Advanced Selectors - L3: Box Model - L4: Flexbox - L5: Grid - L6: Animations - L7: Transforms - L8: Colors/Backgrounds - L9: Typography - L10: Responsive - L11: Variables (Yeh) - ... L20: Projects.
Doubts ho toh bol, dost. Allah Hafiz! Variables master kar le. 😊
