CSS पाठ्यपुस्तक — पाठ 3 — गुण (Properties): background-color, font-style, font-weight, text-align, text-decoration, text-transform

HTML के अस्तित्व के दौरान कई टैग बनाए गए, और अब CSS के व्यापक उपयोग के साथ हमें कुछ टैग्स को छोड़ना पड़ा है, जैसे <font>, <b>, <i>, <center>। आगे चलकर हम अन्य "अमान्य" टैग्स के बारे में भी बात करेंगे। CSS गुणों का उपयोग आपको HTML में अतिरिक्त कोड लिखने से बचाएगा और उसे एक अलग CSS फ़ाइल में स्थानांतरित करने की अनुमति देगा।

पिछले पाठ में हमने सीखा कि CSS गुण कैसे जोड़े जाते हैं और उनके लिए रंग कैसे चुने जाते हैं। इस पाठ में हम उन गुणों का अध्ययन करेंगे जिन्हें आपने HTML सीखते समय देखा होगा, लेकिन जिन्हें अब हम टैग्स की बजाय CSS के माध्यम से लागू करेंगे — जो अधिक सही तरीका है।

तो चलिए इस पाठ का पहला गुण देखते हैं — background-color.

Background-color

इस गुण का उपयोग हम न केवल ब्लॉकों के लिए पृष्ठभूमि रंग निर्धारित करने के लिए कर सकते हैं, बल्कि साधारण टेक्स्ट और लिंक के लिए भी कर सकते हैं। उदाहरण के लिए:

span {
  background-color: yellow;
}

या लिंक के लिए:

a {
  background-color: blue;
}

रंगों को आप संख्याओं (hexadecimal) के रूप में भी निर्दिष्ट कर सकते हैं, जैसे #ff0000 (यह लाल रंग होगा)।

Font-style

आपने शायद टैग्स <b> या <strong> (बोल्ड टेक्स्ट के लिए), <i> (इटैलिक के लिए) या <font> ("खतरनाक" टैग जो टेक्स्ट को बदल देता है) देखे होंगे। इन सभी टैग्स की जगह अब हम CSS का गुण font-style इस्तेमाल कर सकते हैं। उदाहरण के लिए:

p {
  font-style: italic; /* तिरछा (italic) टेक्स्ट */
}

इस प्रकार, हम <i> टैग की जगह font-style: italic; का उपयोग कर सकते हैं।

Font-weight

पुराने टैग्स में से एक <b> टेक्स्ट को बोल्ड बनाता था। अब यह CSS के गुण font-weight से किया जाता है:

body {
  font-weight: normal; /* सामान्य टेक्स्ट */
}

p {
  font-weight: 400; /* सामान्य टेक्स्ट */
}

span {
  font-weight: 700; /* बोल्ड टेक्स्ट */
}

a {
  font-weight: bold; /* बोल्ड टेक्स्ट */
}

font-weight के सामान्य मान हैं 400 या normal (साधारण फ़ॉन्ट) और 700 या bold (मोटा फ़ॉन्ट)।

Text-align

text-align गुण ने पुराने <center> टैग और HTML के align एट्रिब्यूट को प्रतिस्थापित किया। इसे इस तरह उपयोग किया जा सकता है:

body {
  text-align: left; /* बाएँ किनारे पर संरेखण */
}

p {
  text-align: justify; /* दोनों किनारों पर संरेखण */
}

span {
  text-align: right; /* दाएँ किनारे पर संरेखण */
}

div {
  text-align: center; /* केंद्र में संरेखण */
}

यह गुण क्या करता है, यह नीचे दी गई छवि से स्पष्ट हो जाएगा:

Text-decoration

अब हम पुराने टैग्स <strike> (टेक्स्ट काटना) और <u> (टेक्स्ट रेखांकित करना) की जगह CSS का गुण text-decoration उपयोग कर सकते हैं:

.underline {
  text-decoration: underline; /* रेखांकित टेक्स्ट */
}

.line-through {
  text-decoration: line-through; /* काटा गया टेक्स्ट */
}

Text-transform

एक और उपयोगी गुण है text-transform, जो आपको सभी अक्षरों को बड़े (UPPERCASE) या छोटे (lowercase) अक्षरों में बदलने की अनुमति देता है।

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