📘 Lesson · Lesson 01

Introduction to CSS

CSS का परिचय

What is CSS?

CSS (Cascading Style Sheets) is the language that makes web pages beautiful. If HTML builds the structure (headings, paragraphs, images), CSS controls how it all LOOKS — colours, fonts, sizes, spacing, layout, animations. Without CSS, every website would be plain black text on a white background, like a document from 1995. CSS is what turns that raw structure into the polished, colourful pages you see everywhere.

Remember the house analogy from the HTML course? HTML is the bricks and walls; CSS is the paint, decoration and interior design. Same house, but CSS decides whether it looks like a dull government office or a beautiful modern home.

The Paint Analogy (remember this)

Language	Role	Controls
HTML	Structure (bricks & walls)	WHAT is on the page
CSS	Style (paint & design)	How it LOOKS
JavaScript	Behaviour (electricity)	What it DOES

You already mastered the walls in the HTML course. Now you learn to paint them any colour, arrange the rooms, and make the whole house look professional. The same HTML page can look a thousand different ways depending only on its CSS.

Your First Look at CSS

<!-- The HTML (structure) -->
<h1>Welcome to My School</h1>
<p>Alpine Public School, Khurja</p>

/* The CSS (style) */
h1 {
    color: navy;
    text-align: center;
}
p {
    color: gray;
    font-size: 18px;
}

Welcome to My School ← now navy blue AND centered Alpine Public School, Khurja ← now gray, slightly bigger

Read it like English: "for every h1, make the colour navy and centre the text; for every p, make it gray and 18px." CSS is a set of styling instructions attached to HTML elements. You already understand your first CSS rules without studying anything!

What CSS Can Do

Colours & backgrounds: text colour, background colours, gradients, images.
Text & fonts: font family, size, weight, spacing, Google Fonts.
Spacing & sizing: margins, padding, width, height — the box model.
Layout: arrange elements side by side, in grids, centered — flexbox and grid.
Responsive design: one page that looks perfect on phone, tablet and desktop.
Effects: shadows, rounded corners, hover effects, transitions and animations.

Every stunning website you admire — its beauty is 90% CSS. And all of it is learnable, step by step, in this course.

Why Learn CSS?

CSS is non-optional for web work:
✅ Every website needs it — there is no such thing as a professional site without CSS.
✅ It's the difference between "it works" and "it looks great" — clients pay for the second.
✅ Frontend jobs, WordPress, email design, app UI — all built on CSS.
✅ It pairs with the HTML you already know — you're not starting from zero.

Full form: Cascading Style Sheets. "Cascading" refers to how styles flow down and combine according to rules (a topic we'll cover fully in the Specificity chapter).

CSS क्या है?

CSS (Cascading Style Sheets) वह language है जो web pages को खूबसूरत बनाती है. अगर HTML structure बनाता है (headings, paragraphs, images), तो CSS control करती है कि सब कुछ कैसा DIKHTA है — colours, fonts, sizes, spacing, layout, animations. CSS के बिना हर website सफेद background पर सादा काला text होती, 1995 के document जैसी. CSS ही उस raw structure को वे polished, रंगीन pages बनाती है जो आप हर जगह देखते हैं.

HTML course की घर वाली analogy याद है? HTML ईंटें और दीवारें है; CSS paint, सजावट और interior design है. वही घर, पर CSS तय करती है कि वह किसी नीरस सरकारी दफ्तर जैसा दिखे या खूबसूरत modern घर जैसा.

Paint वाली Analogy (याद रखिए)

Language	Role	Control करती है
HTML	Structure (ईंटें और दीवारें)	Page पर क्या HAI
CSS	Style (paint और design)	कैसा DIKHTA है
JavaScript	Behaviour (बिजली)	क्या KARTA है

HTML course में आप दीवारें बना चुके हैं. अब उन्हें किसी भी रंग में paint करना, कमरे सजाना, और पूरे घर को professional बनाना सीखेंगे. वही HTML page सिर्फ अपनी CSS के आधार पर हज़ार अलग-अलग तरह दिख सकता है.

CSS की पहली झलक

<!-- HTML (structure) -->
<h1>Welcome to My School</h1>
<p>Alpine Public School, Khurja</p>

/* CSS (style) */
h1 {
    color: navy;
    text-align: center;
}
p {
    color: gray;
    font-size: 18px;
}

Welcome to My School ← ab navy blue AUR centered Alpine Public School, Khurja ← ab gray, thoda bada

English की तरह पढ़िए: "हर h1 के लिए colour navy करो और text center करो; हर p के लिए gray और 18px करो." CSS HTML elements से जुड़े styling निर्देशों का समूह है. बिना कुछ पढ़े आपको पहले CSS rules समझ आ गए!

CSS क्या कर सकती है

Colours और backgrounds: text colour, background colours, gradients, images.
Text और fonts: font family, size, weight, spacing, Google Fonts.
Spacing और sizing: margins, padding, width, height — box model.
Layout: elements को साथ-साथ, grids में, center — flexbox और grid.
Responsive design: एक page जो phone, tablet और desktop पर perfect दिखे.
Effects: shadows, rounded corners, hover effects, transitions और animations.

हर लुभावनी website जो आपको पसंद है — उसकी खूबसूरती 90% CSS है. और यह सब step by step इस course में सीखा जा सकता है.

CSS क्यों सीखें?

Web काम के लिए CSS non-optional है:
✅ हर website को चाहिए — बिना CSS professional site होती ही नहीं.
✅ यह "काम करता है" और "शानदार दिखता है" का फर्क है — clients दूसरे के पैसे देते हैं.
✅ Frontend jobs, WordPress, email design, app UI — सब CSS पर बने.
✅ यह उसी HTML के साथ जुड़ती है जो आप जानते हैं — आप शून्य से शुरू नहीं कर रहे.

Full form: Cascading Style Sheets. "Cascading" बताता है styles कैसे नीचे बहते और rules के अनुसार मिलते हैं (Specificity chapter में पूरा cover करेंगे).

← Back to CSS Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.