Css Notes

From Markup to Masterpiece: A Best CSS Guide.

by

The Meaning of CSS?

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

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

CSS Key Concepts

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

  • Selectors : वे पैटर्न जिनका उपयोग उन HTML एलीमेंट को चुनने के लिए किया जाता है जिन्हें आप स्टाइल करना चाहते हैं।
  • Properties and Values: कुंजी-मान युग्म जो किसी एलीमेंट शैली को परिभाषित करते हैं, जैसे 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 सेमी-कॉलन ( ; ) द्वारा अलग की जाती हैं, और Declaration Block घुंघराले ब्रेसिज़ { } से घिरे होते हैं।
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 Element की ओर इशारा करता है जिसे आप स्टाइल करना चाहते हैं।
  • color एक प्रॉपर्टी है, और red प्रॉपर्टी की वैल्यू है।
  • text-align एक प्रॉपर्टी है, और center प्रॉपर्टी की वैल्यू है।
  • font-size एक प्रॉपर्टी है, और 20px प्रॉपर्टी की वैल्यू है।

How to Add CSS

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

CSS कोड को HTML फाइल मे जोड़ने के तीन तरीके निम्न प्रकार हैं-

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

External CSS

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

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

External CSS Example

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> element, inside the <head> section of an HTML page:

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

Internal CSS

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

Internal CSS Example

In this example CSS code written in <style> element inside <head> section.

<!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 का उपयोग किया जा सकता है। इनलाइन स्टाइल का उपयोग करने के लिए, संबंधित एलीमेंट में Style Attribute जोड़ें तथा Style Attribute में कोई भी CSS Property शामिल हो सकता है।

Inline CSS Example

In this example Inline styles are defined within the “style” attribute of the relevant 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: 

#para {
  text-align: center;
  color: red;
}

HTML Code

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

<body>
  <h1>This is Heading.</h1>
  <p id="para">This is a paragraph one.</p>
  <p id="para">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 the <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>
</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;
}
Share This Page

Leave a Comment