Css Notes

CSS Notes in Hindi.

by

CSS (Cascading Style Sheets) वेब पेजों को सुंदर, आकर्षक और व्यवस्थित (Style & Layout) बनाने के लिए अनिवार्य है। यह HTML से अलग स्टाइलिंग को संभालता है, जिससे टेक्स्ट का रंग, फॉन्ट, मार्जिन और लेआउट को नियंत्रित करना आसान हो जाता है। बिना CSS के वेबसाइट्स नीरस और अव्यवस्थित दिखेंगी। यह रिस्पॉन्सिव डिज़ाइन के लिए भी जरूरी है ताकि वेबसाइटें मोबाइल से डेस्कटॉप तक हर स्क्रीन पर अच्छी लगें। 

CSS के प्रमुख महत्व:

  • आकर्षक डिज़ाइन और स्टाइलिंग: CSS के जरिए वेबसाइट के रंग, फॉन्ट, लेआउट, और एलिमेंट्स की पोज़िशन को आसानी से बदला जा सकता है।
  • बेहतर यूजर एक्सपीरियंस (UX): यह वेबसाइट को इस्तेमाल करने में आसान और आकर्षक बनाता है, जिससे यूज़र्स वेबसाइट पर ज़्यादा देर रुकते हैं।
  • रिस्पॉन्सिव वेब डिज़ाइन (Mobile-Friendly): CSS ही सुनिश्चित करता है कि एक ही वेबसाइट मोबाइल, टैबलेट और डेस्कटॉप पर सही ढंग से प्रदर्शित हो।
  • कंटेंट और डिज़ाइन का पृथक्करण: यह HTML (संरचना) और CSS (प्रस्तुति) को अलग रखता है, जिससे कोडिंग साफ़ रहती है।
  • समय और प्रयास की बचत: एक बार एक स्टाइल शीट (CSS फ़ाइल) बना लेने के बाद, उसका उपयोग पूरी वेबसाइट के कई पेजों पर किया जा सकता है, जिससे बार-बार कोडिंग नहीं करनी पड़ती।
  • बेहतर SEO: CSS से बनी रिस्पॉन्सिव वेबसाइट्स को Google बेहतर रैंक करता है।
  • एनिमेशन और ट्रांजिशन: वेबसाइटों में इंटरैक्टिव तत्व और एनिमेशन जोड़ने के लिए CSS एक प्रमुख साधन है। 

The Meaning of CSS

कैस्केडिंग स्टाइल शीट्स, या CSS, वर्ल्ड वाइड वेब की एक आधारभूत तकनीक है, जिसका उपयोग HTML जैसी मार्कअप भाषा में लिखे गए दस्तावेज़ की प्रस्तुति और शैली का वर्णन करने के लिए किया जाता है। HTML को एक वेबपेज का ढाँचा समझें, जो उसकी संरचना और विषय-वस्तु को परिभाषित करता है, जबकि CSS उसका रूप-रंग निर्धारित करता है। नीचे दिखाई गई इमेज इसका उदाहरण है।

HTML CSS Difference

किसी दस्तावेज़ की सामग्री को उसके विज़ुअल डिज़ाइन से अलग करके, CSS कई महत्वपूर्ण लाभ प्रदान करता है। यह किसी वेबसाइट की वैश्विक स्टाइलिंग की अनुमति देता है, अर्थात CSS फ़ाइल में एक भी बदलाव कई पृष्ठों के स्वरूप को अपडेट कर सकता है। इससे रखरखाव और अपडेट कहीं अधिक कुशल हो जाते हैं। यह लेआउट और टाइपोग्राफी पर बेहतर नियंत्रण भी प्रदान करता है, जिससे डेवलपर्स आकर्षक और उपयोगकर्ता-अनुकूल डिज़ाइन बना सकते हैं।

CSS Key Concepts

ये नोट्स मूलभूत और उन्नत CSS विषयों पर चर्चा करेंगे, जिनमें शामिल हैं:

  • Selectors : वे पैटर्न जिनका उपयोग उन HTML एलीमेंट को चुनने के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं।
  • Properties and Values: प्रॉपर्टी और वैल्यू जो किसी एलीमेंट की शैली (Style) को परिभाषित करते हैं, जैसे color: blue; या font-size: 16px;.
  • The Box Model: एक आधारभूत अवधारणा जो प्रत्येक HTML एलीमेंट को एक आयताकार बॉक्स के रूप में प्रदर्शित करती है, जिसमें सामग्री, पैडिंग, बॉर्डर और मार्जिन शामिल होते हैं।
  • Layouts: पृष्ठ पर एलीमेंट्स को व्यवस्थित करने की तकनीकें, जिनमें फ्लेक्सबॉक्स और ग्रिड शामिल हैं।
  • Responsive Design: ऐसी वेबसाइट बनाने का अभ्यास जो अच्छी दिखें और डेस्कटॉप कंप्यूटर से लेकर स्मार्टफोन तक सभी डिवाइसों पर अच्छी तरह से काम करें।

CSS Example

CSS Code

body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}

HTML Code

<!DOCTYPE html>
<html>
  <head><title>CSS Example</title></head>
<body>
<h1>This is a Heading</h1>
<p>This is paragraph line.</p>
</body>
</html>

CSS Syntax

एक CSS फाइल में Selectors और Declaration ब्लॉक शामिल होते है –

  • Selector उस HTML Element की ओर इंगित करता है जिसे आप स्टाइल करना चाहते हैं।
  • Declaration ब्लॉक में एक या अधिक घोषणाएँ शामिल हो सकती हैं, जिन्हे सेमी-कॉलन ( ; ) द्वारा अलग किया जाता है।
  • प्रत्येक Declaration में एक CSS Property Name और एक Value होती है, जो एक कोलन ( : ) द्वारा अलग किया जाता है।
  • सभी CSS Declarations घुंघराले ब्रेसिज़ { } से घिरे होते हैं।
CSS Declaration Syntax
Example
In this example all <p> elements will be center-aligned, with a red text color:

p {
  color: red;
  text-align: center;
  font-size: 20px;
}

Above Example Explained

  • यहाँ p एक Selector है, यह HTML डॉक्यूमेंट के सभी पैराग्राफ <p> को स्टाइल करेगा।
  • color एक प्रॉपर्टी है, और red प्रॉपर्टी की वैल्यू है। इसके द्वारा पैराग्राफ का टेक्सट कलर लाल सेट होगा।
  • text-align एक प्रॉपर्टी है, और center प्रॉपर्टी की वैल्यू है। इसके द्वारा पैराग्राफ सेंटर मे अलाइन होगा।
  • font-size एक प्रॉपर्टी है, और 20px प्रॉपर्टी की वैल्यू है। इसके द्वारा पैराग्राफ का फॉन्ट साइज़ 20px सेट होगा।

How to Add CSS in HTML Document

जब कोई ब्राउज़र किसी स्टाइल शीट यानि CSS को पढ़ता है, तो वह स्टाइल शीट में दी गई जानकारी के अनुसार HTML दस्तावेज़ को प्रारूपित करता है।

CSS कोड को HTML डॉक्यूमेंट मे जोड़ने के तीन तरीके निम्न प्रकार हैं-

  1. External CSS
  2. Internal CSS
  3. Inline CSS

External CSS

External Style Sheet की मदद से, आप सिर्फ़ एक फ़ाइल बदलकर पूरी वेबसाइट का स्वरूप बदल सकते हैं। इसके लिए प्रत्येक HTML डॉक्यूमेंट मे <head> सेक्शन के अंदर <link> टैग के साथ बाहरी स्टाइल शीट फ़ाइल का संदर्भ शामिल होना चाहिए।

  • एक बाहरी स्टाइल शीट फाइल किसी भी टेक्स्ट एडिटर जैसे – Notepad में लिखी जा सकती है और उसे .css एक्सटेंशन के साथ सेव किया जाना चाहिए।
  • बाहरी स्टाइल शीट फ़ाइल में कोई भी HTML टैग नहीं होना चाहिए।

CSS Code

Save this file with style.css file name.

body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: verdana;
  font-size: 20px;
}

HTML Code

External styles are defined within the <link> tag inside the <head> section of an HTML page:

<!DOCTYPE html>
<html>
 <head>
  <title>CSS Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>This is a Heading</h1>
  <p>This is paragraph line.</p>
</body>
</html>

Internal CSS

Internal Style Sheet को <style> टैग के साथ HTML डॉक्यूमेंट के <head> सेक्शन के अंदर परिभाषित किया जाता है।

In this example CSS code written in <style> tag inside the <head> section in HTML Document.

<!DOCTYPE html>
<html>
<head><title>CSS Example</title>
<style>
  body {
    background-color: black;
   }
   h1 {
    color: white;
    margin-left: 40px;
   }
</style>
</head>

<body>
  <h1>This is a Heading</h1>
  <p>This is paragraph line.</p>
</body>
</html>

Inline CSS

किसी सिंगल एलीमेंट के लिए एक अलग स्टाइल लागू करने के लिए Inline Style Sheet का उपयोग किया जा सकता है। इनलाइन स्टाइल का उपयोग करने के लिए, संबंधित HTML Tag में Style Attribute जोड़ें तथा Style Attribute में कोई भी CSS Property शामिल हो सकता है।

In this example, Inline styles are defined within the “style” attribute of the target element.

<!DOCTYPE html>
<html>
<head><title>CSS Example</title></head>

<body>
<h1 style="color: blue; text-align: center;">This is a heading</h1>
<p style="color: red;">This is a paragraph.</p>
</body>
</html>

CSS Cascading Order

जब किसी HTML Element के लिए एक से ज़्यादा Styles निर्दिष्ट हों, तो किस Style का उपयोग किया जाएगा?

किसी HTML डॉक्यूमेंट की सभी Styles निम्नलिखित नियमों के अनुसार एक नई “Virtual” स्टाइल शीट में “Cascade” हो जाएँगी, जहाँ नंबर एक को सर्वोच्च प्राथमिकता दी जाती है।

  1. Inline style (inside an HTML element)
  2. External and internal style sheets (in the head section)
  3. Browser default

Inline Style को सर्वोच्च प्राथमिकता दी जाती है, तथा यह External एवं Internal Styles और ब्राउज़र डिफ़ॉल्ट को ओवरराइड कर देगी।

CSS Selectors

CSS Selectors का उपयोग उन HTML Elements को “ढूँढने” (या चुनने) के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं।

हम CSS Selectors को पाँच श्रेणियों में विभाजित कर सकते हैं-

  • Simple selectors (select elements based on name, id, class)
  • Combinator selectors (select elements based on a specific relationship between them)
  • Pseudo-class selectors (select elements based on a certain state)
  • Pseudo-elements selectors (select and style a part of an element)
  • Attribute selectors (select elements based on an attribute or attribute value)

CSS Element Selector

Element Selector एलीमेंट नाम के आधार पर HTML एलीमेंट को चुनता है। जैसे – body, h1, p, table, img आदि।

CSS Code

Here, all <p> elements on the html document will be center-aligned, with a red text color: 

p {
  text-align: center;
  color: red;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>

<body>
  <h1>This is Heading.</h1>
  <p>This is a paragraph one.</p>
  <p>This is a paragraph two.</p>
</body>
</html>

CSS ID Selector

  • ID Selector किसी विशिष्ट एलीमेंट का चयन करने के लिए HTML Element की ID Attribute का उपयोग करता है।
  • किसी एलीमेंट की आईडी पृष्ठ के भीतर अद्वितीय (Unique) होती है, इसलिए ID Selector का उपयोग एक Unique Element का चयन करने के लिए किया जाता है।
  • आईडी नाम किसी संख्या से शुरू नहीं हो सकता।
  • स्टाइल शीट में किसी विशिष्ट आईडी वाले एलीमेंट का चयन करने के लिए, एक हैश (#) वर्ण लिखें, उसके बाद एलीमेंट की आईडी लिखें।

CSS Code

Here, all <p> elements on the html document will be center-aligned, with a red text color: 

#para1{
  text-align: center;
  color: red;
}
#para2 {
  text-align: center;
  color: blue;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>

<body>
  <h1>This is Heading.</h1>
  <p id="para1">This is a paragraph one.</p>
  <p id="para2">This is a paragraph two.</p>
</body>
</html>

CSS Class Selector

  • Class Selector एक विशिष्ट Class Attribute वाले HTML Elements का चयन करता है।
  • CSS Style Sheet में किसी विशिष्ट क्लास वाले एलीमेंट का चयन करने के लिए, एक बिन्दु (.) वर्ण लिखें, उसके बाद क्लास का नाम लिखें।
  • क्लास का नाम किसी संख्या से शुरू नहीं हो सकता।

CSS Code

Here, all elements of abc class <div> will be center-aligned, with a red text color:

.abc {
  text-align: center;
  color: red;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>
<body>
  <div class="abc">
  <h1>This is Heading.</h1>
  <p>This is a paragraph one.</p>
  <p>Ths is a paragraph two.</p>
  </div>
  <div>
  <h1>This is Heading.</h1>
  <p>This is a paragraph one.</p>
  <p>Ths is a paragraph two.</p>
  </div>
</body>
</html>

आप यह भी निर्दिष्ट कर सकते हैं कि किसी क्लास से केवल विशिष्ट HTML एलीमेंट ही प्रभावित होने चाहिए।

CSS Code

Here, only <p> elements of the class “abc” will be center-aligned, with a red text color:

p.abc {
  text-align: center;
  color: red;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>
<body>
  <h1 class="abc">This is Heading.</h1>
  <p class="abc">This is a paragraph one.</p>
  <p class="abc">This is a paragraph two.</p>
</body>
</html>

HTML एलीमेंट एक से अधिक क्लासेस को भी संदर्भित कर सकते हैं।

CSS Code

Here <p>, <h1> and <div> elements will be affected with different class name.

.abc {
  text-align: center;
  color: red;
}
.xyz {
 background-color: yellow;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>
<body>
  <div class="abc xyz">
  <h1>This is Heading.</h1>
  <p>This is a paragraph one.</p>
  <p>Ths is a paragraph two.</p>
  </div>
</body>
</html>

The CSS Universal Selector *

Universal Selector (*) पेज के सभी HTML एलीमेंट्स का एक साथ चयन करता है।

CSS Code

Here, all the elements of the page will be center-aligned, with a red text color.

* {
  text-align: center;
  color: blue;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>
<body>
  <h1>This is Heading.</h1>
  <p>This is a paragraph one.</p>
  <p>Ths is a paragraph two.</p>
</body>
</html>

The CSS Grouping Selector

Grouping Selector एक समान स्टाइल परिभाषाओं वाले सभी HTML एलीमेंट्स का चयन करता है। निम्नलिखित CSS कोड देखें जहां h1, h2, और p एलीमेंट्स की स्टाइल परिभाषाएँ एक समान हैं।

h1 {
  text-align: center;
  color: red;
}

h2 {
  text-align: center;
  color: red;
}

p {
  text-align: center;
  color: red;
}

कोड को छोटा करने के लिए, Selectors को समूहबद्ध (Group) करना बेहतर होगा। Selectors को समूहबद्ध करने के लिए प्रत्येक Selector को कॉमा ( , ) से अलग करें।

CSS Code

Here, h1, h2, p elements of the document will be center-aligned, with a red text color.

h1,h2,p {
  text-align: center;
  color: red;
}

HTML Code

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
</head>

<body>
  <h1>This is heading one.</h1>
  <h2>This is heading two.</p>
  <p>Ths is a paragraph one.</p>
</body>
</html>

HTML and CSS Comments

  • टिप्पणियाँ कोड को समझाने के लिए उपयोग की जाती हैं, और बाद में स्रोत कोड को संपादित करते समय मददगार हो सकती हैं।
  • टिप्पणियों का उपयोग स्टाइलशीट में कोड के कुछ हिस्सों को अस्थायी रूप से अक्षम (Disable) करने के लिए भी किया जाता है।
  • टिप्पणियों को ब्राउज़र द्वारा अनदेखा कर दिया जाता है।

निम्न उदाहरण द्वारा कमेंट्स को जानिए – 

<!DOCTYPE html>
<html>
<head>
<title>CSS Example</title>
<style>
  p {
    color: red; /* Set text color to red */
  }
</style>
</head>
<body>
  <h2>This is Heading</h2>
  <!-- These paragraphs will be red -->
  <p>This is paragraph one.</p>
  <p>This is paragraph two.</p>
</body>
</html>

CSS Errors

CSS में त्रुटियाँ अप्रत्याशित व्यवहार या स्टाइल के सही ढंग से लागू न होने का कारण उत्पन्न हो सकती हैं। निम्न उदाहरण सामान्य CSS गलतियों और उनसे बचने के तरीकों को दर्शाता है।

Missing Semicolons

किसी Property Declaration के अंत में सेमी-कॉलन ( ; ) लगाना भूल जाने से स्टाइल नियम टूट सकता है। निम्न उदाहरण मे color प्रॉपर्टी के अंत मे सेमी-कॉलन ( ; ) नहीं लगाया गया है।

Example

p {
  color: red
  background-color: yellow;
}

Invalid Property Names

किसी ऐसे प्रॉपर्टी नाम का उपयोग करना जो मौजूद नहीं है, ब्राउज़र द्वारा अनदेखा कर दिया जाएगा। निम्न उदाहरण में font-size प्रॉपर्टी को गलत टाइप किया गया है।

Example

p {
  colr: blue;
  font size: 16 px;
}

पढ़ना जारी रखें –

Syllabus Notes

CSS Basics
CSS Colors
CSS Backgrounds
CSS Borders
CSS Margins
CSS Paddings
CSS Height & Width
CSS Box Model
CSS Text
CSS Fonts
CSS Links
CSS Lists
CSS Tables

Share This Page

Leave a Comment