NECI Blogs

By Shivratan Vishwakarma

What is CSS in Hindi – CSS क्या है? -

What is CSS in Hindi – CSS क्या है? -

CSS Full Notes in Hindi for Beginners

अगर आप Web Designing सीखना चाहते हैं और HTML के बाद CSS सीखना चाहते हैं, तो यह post आपके लिए बहुत useful है। इस post में हमने CSS क्या है, CSS का Full Form, CSS का उपयोग, HTML और CSS में अंतर, CSS Syntax, Selector, Property, Value, Comments, Inline CSS, Internal CSS और External CSS को आसान हिन्दी में step by step समझाया है।

यह notes beginners, students, BCC, ADCA, O Level, Web Designing learners और computer institute students के लिए बहुत helpful हैं। अगर आप website को सुंदर और professional बनाना सीखना चाहते हैं, तो यह CSS Full Notes in Hindi आपके लिए complete guide की तरह काम करेगा।

📑 CSS Full Notes in Hindi – Index (Short)

  1. CSS क्या है?
  2. CSS का Full Form
  3. CSS का उपयोग
  4. HTML और CSS में अंतर
  5. CSS Syntax
  6. Selector, Property और Value
  7. CSS Comments
  8. Inline CSS
  9. Internal CSS
  10. External CSS

1. CSS क्या है?

CSS क्या है? (Definition)

CSS एक Styling Language है जिसका उपयोग web page को सुंदर, रंगीन और आकर्षक बनाने के लिए किया जाता है।

सरल भाषा में समझें

जब हम HTML से webpage बनाते हैं, तो HTML सिर्फ webpage का structure बनाता है।

जैसे:

  1. Heading
  2. Paragraph
  3. Image
  4. Link
  5. Table

लेकिन webpage को:

  1. Color देना
  2. Font बदलना
  3. Background देना
  4. Border लगाना
  5. Button ko attractive banana

ये सब काम CSS करती है।

याद रखने की आसान trick

  1. HTML = Structure
  2. CSS = Design / Decoration

CSS Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>CSS Example</title>

   <style>

       h1 {

           color: red;

       }

   </style>

</head>

<body>

   <h1>Hello Students</h1>

</body>

</html>

Output / Result

ऊपर दिए गए code में Hello Students heading red color में दिखाई देगी।

👉 इससे समझ आता है कि CSS webpage को style देती है।

2. CSS का Full Form

CSS का Full Form क्या है?

CSS ka full form Cascading Style Sheets hota hai.

सरल भाषा में समझें

  1. Cascading = Rules ek order me apply hote hain
  2. Style = Design ya look
  3. Sheets = Style rules ka collection

👉 मतलब CSS एक ऐसी language है जो web page par design rules apply karti hai.

Easy Memory Trick

CSS = Color + Style + Shape

(Ye official full form nahi hai, sirf yaad rakhne ke liye)

CSS Full Form Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>CSS Full Form</title>

   <style>

       p {

           color: blue;

           font-size: 20px;

       }

   </style>

</head>

<body>

   <p>CSS ka full form Cascading Style Sheets hai.</p>

</body>

</html>

Output / Result

Paragraph:

  1. Blue color me dikhai dega
  2. 20px size me dikhai dega

3. CSS का उपयोग क्या है?

CSS का उपयोग

CSS ka use webpage ko:

  1. सुंदर बनाने
  2. Color dene
  3. Font size बदलने
  4. Background लगाने
  5. Border लगाने
  6. Button ko design karne
  7. Layout ko professional banane

के लिए किया जाता है।

सरल भाषा में समझें

CSS ke bina webpage simple aur boring dikhta hai.

CSS ke saath webpage attractive aur professional lagta hai.

CSS Use Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>Use of CSS</title>

   <style>

       body {

           background-color: lightyellow;

       }


       h1 {

           color: darkgreen;

           text-align: center;

       }


       p {

           color: blue;

           font-size: 18px;

       }

   </style>

</head>

<body>

   <h1>Welcome Students</h1>

   <p>CSS webpage ko beautiful banata hai.</p>

</body>

</html>

Output / Result

  1. Page ka background light yellow hoga
  2. Heading dark green aur center me hogi
  3. Paragraph blue color me dikhai dega

4. HTML और CSS में अंतर

HTML और CSS में क्या अंतर है?

HTML webpage ka structure banata hai,

jabki CSS webpage ko design aur style deta hai.


HTML ka kaam

  1. Heading banana
  2. Paragraph banana
  3. Image lagana
  4. Link banana
  5. Table banana

CSS ka kaam

  1. Heading ka color
  2. Paragraph ka font size
  3. Background color
  4. Border design
  5. Layout design

Simple Formula

  1. HTML = Kya dikhana hai
  2. CSS = Kaise dikhana hai

HTML vs CSS Example (Input Code)

Only HTML

<!DOCTYPE html>

<html>

<head>

   <title>HTML Only</title>

</head>

<body>

   <h1>My Website</h1>

   <p>This is a simple paragraph.</p>

</body>

</html>

HTML + CSS

<!DOCTYPE html>

<html>

<head>

   <title>HTML and CSS</title>

   <style>

       h1 {

           color: purple;

           text-align: center;

       }


       p {

           color: green;

           font-size: 20px;

       }

   </style>

</head>

<body>

   <h1>My Website</h1>

   <p>This is a simple paragraph.</p>

</body>

</html>

Output / Result

Only HTML:

  1. Normal heading
  2. Normal paragraph

HTML + CSS:

  1. Heading purple aur center me
  2. Paragraph green aur 20px size me

5. CSS Syntax (सिंटैक्स)

CSS Syntax क्या है?

CSS syntax ka matlab hai CSS rule likhne ka sahi format.

Basic CSS Syntax

selector {

   property: value;

}

Isme:

  1. Selector = Kis HTML element par style lagani hai
  2. Property = Kya badalna hai
  3. Value = Kaunsi value deni hai

Example

h1 {

   color: red;

}

यहाँ:

  1. h1 = Selector
  2. color = Property
  3. red = Value

CSS Syntax Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>CSS Syntax</title>

   <style>

       h1 {

           color: red;

           font-size: 30px;

           text-align: center;

       }

   </style>

</head>

<body>

   <h1>CSS Syntax Example</h1>

</body>

</html>

Output / Result

Heading:

  1. Red color
  2. 30px size
  3. Center me दिखाई देगी

6. Selector, Property और Value

Selector क्या होता है?

Selector batata hai ki kis HTML element par style lagani hai.

Example:

  1. h1
  2. p
  3. body

Property क्या होती है?

Property batati hai ki kya badalna hai.

Example:

  1. color
  2. font-size
  3. background-color

Value क्या होती hai?

Value batati hai ki kaunsi value deni hai.

Example:

  1. red
  2. 20px
  3. yellow


Example

p {

   color: blue;

}

यहाँ:

  1. p = Selector
  2. color = Property
  3. blue = Value

Selector Property Value Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>Selector Property Value</title>

   <style>

       p {

           color: blue;

           font-size: 22px;

       }

   </style>

</head>

<body>

   <p>This is a paragraph.</p>

</body>

</html>

Output / Result

Paragraph:

  1. Blue color
  2. 22px size

7. CSS Comments

CSS Comment क्या है?

CSS me comment ka use code ko samjhane ke liye hota hai.

Browser comment ko ignore karta hai.

CSS Comment Syntax

/* This is a CSS comment */

👉 Comment browser me दिखाई नहीं देता।

CSS Comment Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>CSS Comment</title>

   <style>

       /* This style is for heading */

       h1 {

           color: red;

       }


       /* This style is for paragraph */

       p {

           color: blue;

       }

   </style>

</head>

<body>

   <h1>Hello Students</h1>

   <p>This is a CSS comment example.</p>

</body>

</html>

Output / Result

  1. Heading red color me
  2. Paragraph blue color me
  3. Comment browser me दिखाई नहीं देगा

8. Inline CSS

Inline CSS क्या है?

Jab CSS ko directly HTML tag ke andar style attribute me likha jata hai, use Inline CSS kehte hain.

Example

<h1 style="color:red;">Hello</h1>

👉 Isme style seedha tag ke andar likha gaya hai.


Inline CSS Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>Inline CSS</title>

</head>

<body>

   <h1 style="color:red; text-align:center;">Welcome Students</h1>

   <p style="color:blue; font-size:20px;">This is inline CSS example.</p>

</body>

</html>

Output / Result

  1. Heading red color me aur center me
  2. Paragraph blue color me aur 20px size me


9. Internal CSS

Internal CSS क्या है?

Jab CSS ko HTML document ke <head> section ke andar <style> tag me likha jata hai, use Internal CSS kehte hain.

Structure

<head>

   <style>

       h1 {

           color: red;

       }

   </style>

</head>

👉 Ek hi page ke liye CSS likhne ka best तरीका है।


Internal CSS Example (Input Code)

<!DOCTYPE html>

<html>

<head>

   <title>Internal CSS</title>

   <style>

       h1 {

           color: green;

           text-align: center;

       }


       p {

           color: blue;

           font-size: 18px;

       }

   </style>

</head>

<body>

   <h1>Internal CSS Example</h1>

   <p>This is paragraph using internal CSS.</p>

</body>

</html>

Output / Result

  1. Heading green color me aur center me
  2. Paragraph blue color me aur 18px size me

10. External CSS

External CSS क्या है?

Jab CSS ko alag .css file me likha jata hai aur HTML file se link kiya jata hai, use External CSS kehte hain.

Professional Method

Isme:

  1. HTML file alag hoti hai
  2. CSS file alag hoti hai

HTML me CSS file link karna

<link rel="stylesheet" href="style.css">

External CSS Example (Input Code)

Step 1: HTML File (index.html)

<!DOCTYPE html>

<html>

<head>

   <title>External CSS</title>

   <link rel="stylesheet" href="style.css">

</head>

<body>

   <h1>External CSS Example</h1>

   <p>This is paragraph using external CSS.</p>

</body>

</html>

Step 2: CSS File (style.css)

h1 {

   color: purple;

   text-align: center;

}


p {

   color: brown;

   font-size: 20px;

}

Output / Result

  1. Heading purple color me aur center me
  2. Paragraph brown color me aur 20px size me

CSS Full Notes in Hindi – Part 1 Practical Work

Class Practical

Students ko ye 5 practical jarur karna chahiye:

Practical 1

h1 ka color red karo

Practical 2

p ka font-size 20px karo

Practical 3

Inline CSS se heading center karo

Practical 4

Internal CSS se page style karo

Practical 5

External CSS file bana kar HTML se link karo

CSS Viva Questions

  1. CSS ka full form kya hai?
  2. CSS ka use kis liye hota hai?
  3. HTML aur CSS me kya difference hai?
  4. CSS syntax ka basic format kya hai?
  5. Selector kya hota hai?
  6. Property kya hoti hai?
  7. Value kya hoti hai?
  8. Inline CSS kahan likhi jati hai?
  9. Internal CSS kahan likhi jati hai?
  10. External CSS file ka extension kya hota hai?

Conclusion

इस post में आपने CSS Full Notes in Hindi का शुरुआती और सबसे important हिस्सा सीखा। हमने CSS क्या है, CSS का Full Form, CSS का उपयोग, HTML और CSS में अंतर, CSS Syntax, Selector, Property, Value, Comments, Inline CSS, Internal CSS और External CSS को आसान भाषा में समझा। अगर आप beginner हैं, तो यह CSS सीखने की सबसे अच्छी शुरुआत है।

अगर आपको यह CSS Full Notes in Hindi for Beginners पसंद आए, तो इसे अपने दोस्तों के साथ जरूर share करें और अगला part भी पढ़ें।

इसे भी पढ़ें :-

  1. HTML Full Notes in Hindi
  2. Web Designing Full Notes in Hindi
  3. JavaScript Basic Notes in Hindi
  4. Internet Full Course Notes in Hindi
  5. Basic Computer Notes in Hindi


💬 Leave a Comment

🗨️ Comments

No comments yet. Be the first! 🚀

📚 Suggested Blogs

HTML Full Notes in Hindi for Beginners | HTML Complete Notes with Examples
HTML Full Notes in Hindi for Beginners | HTML Complete Notes with Examples
Tally Prime मे Godown कैसे बनाये। 2026 - Accounting सीखे हिंदी मे -
Tally Prime मे Godown कैसे बनाये। 2026 - Accounting सीखे हिंदी मे -
Tally Prime में Payroll क्या है? Payroll Processing Step by Step in Hindi
Tally Prime में Payroll क्या है? Payroll Processing Step by Step in Hindi
टैली प्राइम में जर्नल वाउचर कैसे करें? Journal Entry पूरी जानकारी हिंदी में
टैली प्राइम में जर्नल वाउचर कैसे करें? Journal Entry पूरी जानकारी हिंदी में