CSS Notes & Assignment in Hindi

CSS क्या है?

CSS (Cascading Style Sheets) एक Style Sheet Language है, जिसका उपयोग HTML Web Pages को सुंदर और आकर्षक बनाने के लिए किया जाता है।

CSS की सहायता से हम किसी Web Page का Color, Font, Size, Spacing, Layout, Background, Border आदि बदल सकते हैं।

CSS का पूरा नाम

CSS = Cascading Style Sheets

Cascading = नियमों की प्राथमिकता (Priority)
Style = डिजाइन या स्वरूप
Sheets = स्टाइल की फाइल

CSS का उपयोग क्यों किया जाता है?

CSS का उपयोग Web Page को सुंदर और Professional बनाने के लिए किया जाता है।

CSS की सहायता से हम:

Text का Color बदल सकते हैं।
Font Style बदल सकते हैं।
Background Color या Image लगा सकते हैं।
Border बना सकते हैं।
Margin और Padding सेट कर सकते हैं।
Website का Layout बना सकते हैं।
Responsive Design बना सकते हैं।
Animation और Effects जोड़ सकते हैं।

CSS के फायदे (Advantages)

1. Attractive Design :वेबसाइट को सुंदर बनाता है।
2. Time Saving :एक ही CSS File कई Pages पर लागू की जा सकती है।
3. Easy Maintenance :एक जगह बदलाव करने पर सभी Pages अपडेट हो जाते हैं।
4. Faster Loading: बार-बार Style लिखने की आवश्यकता नहीं होती।
5. Responsive Website :Mobile, Tablet और Computer सभी पर सही दिखाई देती है।

CSS Syntax

CSS में किसी भी स्टाइल को लिखने के लिए एक नियम (Rule) बनाया जाता है, जो मुख्य रूप से दो भागों से मिलकर बनता है—Selector और Declaration Block।

h1{

    color: blue;

    font-size: 20px;

}

इसमें:

h1 → Selector (किस Element पर Style लागू होगी)
{ color: blue; font-size: 20px; } → Declaration Block (जिसमें सभी Style Rules लिखे जाते हैं)

CSS Syntax चार मुख्य भागों से मिलकर बनता है। सबसे पहले Selector आता है, जो बताता है कि किस HTML Element पर Style लगानी है। उसके बाद Curly Braces {} के अंदर हम Property और Value लिखते हैं। Property बताती है कि क्या बदलना है, जैसे color या font-size, और Value बताती है कि उसे किस रूप में बदलना है, जैसे red या 30px। Property और Value के बीच Colon (:) लगाया जाता है, और हर Rule के अंत में Semicolon (;) लगाया जाता है।”

CSS कैसे काम करता है?
HTML Structure बनाता है और CSS उसे Design देता है।
उदाहरण:
HTML कहता है:
यह Heading है।
CSS कहता है:
इसे लाल रंग का, 30px Size और Center में दिखाओ।
उदाहरण 1: बिना CSS

HTML Code

<!DOCTYPE html>

<html>

<head>

    <title>Without CSS</title>

</head>

<body>

<h1>Welcome to UICT</h1>

</body>

</html>

Output:

Welcome to UICT

यहाँ Heading साधारण (Default Style) में दिखाई देगी।

उदाहरण 2: CSS के साथ

HTML + CSS Code

<!DOCTYPE html>

<html>

<head>

<style>

h1{

    color:red;

    font-size:30px;

    text-align:center;

}

</style>

</head>

<body>

<h1>Welcome to UICT</h1>

</body>

</html>

Output:

Welcome to UICT

 🔴 रंग (Color) = Red

 🔠 Size = 30px

 📍 Position = Center

Code की व्याख्या

h1{

    color:red;

}

➡️ सभी <h1> Heading का रंग लाल (Red) कर देगा।

font-size:30px;

➡️ Heading का आकार 30 Pixel कर देगा।

text-align:center;

➡️ Heading को Center में दिखाएगा।

CSS Notes, Examples & Assignment for Beginners