सीएसएस क्या है?
सीएसएस का मतलब सी एस्केडिंग एस टाइप एस हीट्स है
CSS बताता है कि HTML तत्वों को कैसे प्रदर्शित किया जाना है
सीएसएस उदाहरण
<style>
body
{background-color:lightblue; text-align:center;}
h1
{color:blue; font-size:40px;}
p
{font-family:verdana;
font-size:20px;}
</style>
यह कैसे काम करता है यह देखने के लिए "इसे स्वयं आज़माएं" बटन पर क्लिक करें।
सीएसएस सिंटेक्स
एक सीएसएस नियम में एक चयनकर्ता और एक घोषणा ब्लॉक होता है:
चयनकर्ता HTML तत्व को शैली (h1) की ओर इंगित करता है।
डिक्लेरेशन ब्लॉक (घुंघराले ब्रेसिज़ में) में अर्धविराम द्वारा अलग किए गए एक या अधिक डिक्लेरेशन होते हैं।
प्रत्येक घोषणा में एक सीएसएस संपत्ति का नाम और एक मूल्य शामिल होता है, जिसे एक कोलन द्वारा अलग किया जाता है।
निम्नलिखित उदाहरण में सभी <p> तत्व केंद्र-संरेखित, लाल होंगे और उनका फ़ॉन्ट आकार 32 पिक्सेल होगा:
उदाहरण
<style>
p
{font-size:32px; color:red;
text-align:center;}
</style>
वही उदाहरण इस प्रकार भी लिखा जा सकता है:
<style>
p
{
font-size: 32px;
color: red;
text-align: center;
}
</style>
बाहरी स्टाइल शीट
CSS स्टाइल शीट को बाहरी फाइल में स्टोर किया जा सकता है:
mystyle.css
body {background-color: orange; font-family:verdana}
h1 {color: white;}
p {font-size: 20px;}
बाहरी स्टाइल शीट <लिंक> टैग वाले HTML पेजों से जुड़ी होती हैं :
उदाहरण
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
</body>
</html>
इनलाइन स्टाइल
उदाहरण
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<body>
<h1>My First CSS Example</h1>
<p>This is
a paragraph.</p>
<p style="font-size:25px">This is a paragraph.</p>
<p style="font-size:30px">This is a paragraph.</p>
</body>
</html>
कैस्केडिंग ऑर्डर
यदि HTML तत्वों के लिए अलग-अलग शैलियाँ निर्दिष्ट की जाती हैं, तो शैलियाँ निम्नलिखित प्राथमिकता के साथ नई शैलियों में कैस्केड होंगी:
- प्राथमिकता 1: इनलाइन शैलियाँ
- प्राथमिकता 2: बाहरी और आंतरिक स्टाइल शीट
- प्राथमिकता 3: ब्राउज़र डिफ़ॉल्ट
- यदि विभिन्न शैलियों को समान प्राथमिकता स्तर पर परिभाषित किया जाता है, तो अंतिम शैली को सर्वोच्च प्राथमिकता दी जाती है।
उदाहरण
<!DOCTYPE html>
<html>
<link rel="stylesheet"
href="mystyle.css">
<style>
body {background-color:
lightblue;}
</style>
<body style="background-color: olivedrab">
<h1>Multiple
Styles Cascades into One</h1>
<p>Try experimenting by removing styles to see how the cascading stylesheets
work.</p>
<p>Try removing the inline first, then the internal, then the
external.</p>
</body>
</html>
CSS डेमो - एक HTML पेज - कई शैलियाँ!
यहां हम 4 अलग-अलग स्टाइलशीट के साथ प्रदर्शित एक HTML पेज दिखाएंगे।
स्टाइलशीट बटन पर क्लिक करें (1-4) भी विभिन्न शैलियों के साथ प्रदर्शित पृष्ठ देखें।
पूर्ण सीएसएस ट्यूटोरियल
यह CSS का संक्षिप्त विवरण रहा है।
पूर्ण CSS ट्यूटोरियल के लिए W3Schools CSS Tutorial पर जाएँ ।
पूर्ण CSS संदर्भ के लिए W3Schools CSS Reference पर जाएं ।