What is CSS in Hindi [CSS Tags क्या हैं?]
CSS क्या हैं?
CSS का संक्षिप्त नाम Cascading Style sheet है। इसकी सहायता से HTML में हम
layout का निर्धारण करने के लिए करते है अर्थात इसकी सहायता से HTML के तत्व को
स्क्रीन पर किस प्रकार से प्रदर्शित करा सकते है इसका निर्धारण कर सकते है। हमें
ये तो पता ही है कि HTML से वेब पेज बनाने का कार्य होता है इसी वेब पेज को हमें
अधिक आकर्षक बनाना होता है तो CSS का उपयोग करते है।
CSS – in Hindi
इसका उपयोग कर हम
HTML डाक्युमेंट के काटेंट में जैसे color, font, margins, background image,
lines, height एवं अन्य प्रकार के तत्व निर्धारण कर सकते हैं। CSS का एक और लाभ
यह होता है कि हम जो इसके द्वारा Design किया गया है उसे सभी एक से अधिक वेब पेज
में युज कर सकते हैं।
![CSS क्या हैं ? [ What is CSS in Hindi ]](https://1.bp.blogspot.com/-1VDnUrCe-Yg/YEOF-X_dhII/AAAAAAAAAIE/fNhJQvxuowo0FYlL3aRduqswepJuqULaQCLcBGAsYHQ/s352/CSS%2Btag%2B.jpg "CSS क्या हैं ? [ What is CSS in Hindi ]")
CSS के अनेको प्रकार के वर्जन आ चुके है जिन्हें CSS 1, 2, 3 अनेक
प्रकार के नामो से जानते है। CSS के W3C के द्वारा और अन्य XSL Style Sheet
language का विकास किया गया। रहने के लिए दोनों Style Sheet
language है तब दोनों में अधिकांस कार्य एक ही प्रकार जैसे होता है कुछ कार्यों
में विभिन्नता हो सकति है जिन्हे निम्न प्रकार समझ सकते है।
![CSS क्या हैं ? [ What is CSS in Hindi ]](https://1.bp.blogspot.com/-gKUV932-gGQ/YEN7d69yqMI/AAAAAAAAAH0/GXOvPepjwywIUizLDxcvSFFzlv43cSI1QCLcBGAsYHQ/s319/Css%2B1.jpg "CSS क्या हैं ? [ What is CSS in Hindi ]")
उपर दिये गये टेबल से स्पष्ट है कि CSS अधिक उपयोगी है CSS के और भी लाभ है
:
- layout अधिक से अधिक नियंत्रण कर सकते है।
- अनेक प्रकार के आधुनिक तकनीक का उपयोग कर सकते है।
- Single Style Sheet कि सहायता से अनेक दस्तावेज तैयार कर सकते है।
- अलगअलग प्रकार के मिडिया के लिए अलग अलग प्रकार के layout का उपयोग।
What is CSS in Hindi [CSS Tags क्या हैं?]
Usefulness of Style Sheet:
हैं, HTML की सहायता से हम web-page तो बना सकते हैं लेकिन उसमे design देना हो
तो उसके लिए style sheet language से ही कर सकते हैं। CSS को markup language भी
माना जा सकता हैं क्योकि इसमें जो coding किया जाता है वे HTML में किये जाने
वाले coding के समान ही होती हैं।
Advantage of style sheet:
के लिए होती है उसे दूसरे के लिए भी निधार्रित कर सकते हैं।
होती हैं जो design किये होते है वे प्रत्येक element के लिए अलग अलग हो सकते है
और इसमें अधिक मेहनत और समय लगता है और page भी धीरे धीरे लोड होने लगता हैं
इसलिए CSS अधिक उपयोगी हैं।
जैसे की हम किसी heading के color को बदलना होता हैं CSS की सहायता से किसी एक
heading के color बदलने से सभी का कलर change हो जाता हैं।
Creating Style Sheet in Hindi:
उसके लिए कुछ नियम निधार्रित हैं जिसके जानकारी से कोडन करना आसान हो जाता है :
हमे उसे point करना होता हैं और इसी प्रकार curly bracket के अंतर्गत property और
value को रखा जाता है यह property एक से अधिक हो तो इसके लिए अलग अलग semicolon
लगाना पड़ता है।
Internal style sheet:
उपयोग में लाया जा सकता हैं। इसे HTML के page के head के अंतर्गत भी उपयोग में
लाया जा सकता है इसी लिए style को tag में नही रखा जाता, उसे एक प्रकार से
block में style को परिभाषित किया जाता हैं।
<head>
<style>
body{background-color: green:}
p{color: blue;}
h3 {color: red;}
</style>
</head>
<body>
<p> What is CSS in Hindi </p>
<h3> CSS Tags </h3>
</body>
</html>
External style sheet:
लिए प्रयोग होता है और external किसी अन्य वेब-पेज के लिए कर सकते है जिसमे
वर्तमान web-page से link किया जाता है। इसका उपयोग कर अनेक प्रकार के web-page
को एक साथ कर सकते हैं।
किया जा सकता हैं। इसे निम्न उदाहरणों से समझ सकते है :
<head>
<style>
<link rel=”stylesheet” href=”https://realhindiguide.com/”>
</style>
</head>
<body>
<p> Real Hindi Guide </p>
</body>
</html>
file जोड़ा गया है वह style apply हो जाता हैं।
Inline style sheet:
sheet का उपयोग करते हैं इसे हैम निम्नलिखित उदाहरणों से समझ सकते हैं।
<head>
<h3 style=”color:red;”> CSS in Hindi </h3>
</head>
</html>
होगा।
Classes and Pseudo-classes:
सकते हैं। CSS में एक attribute होता है और इसी प्रकार एक attribute ID होती है
जिनका कार्य एक ही element के पहचान के लिए होती है।
जाता है। “hash character” (#) का उपयोग ईद selector के नाम मे किया जाता है। इसके
लिये हम निम्न उदाहरण से समझ सकते है :
<head>
<style>
city {
background-color:tomato;
color:white;
border:2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class=”city”>
<h2> Raipur </h2>
<p> </p>
</div>
</body>
</html>
को रखा गया हैं।
relation भी बना सकते हैं। और इसके सहायता से selector के उपयोग से selected
element के लिए विशेष properties का निर्धारण कर सकते हैं। जैसे कि किसी लिंक पर
mouse ले जाने पर रंग बदलना या click करने पर visited होने पर उसकी स्तिथी का
बदलना आदि।
|
Selector:pseudo-class{ property:value } |
|
abc:link {color:blue;} |
निर्धारण करने के लिए करते है।
|
abc:visited {color:pink;} |
प्रदर्शित होता है।
|
abc:hover {color:yellow;} |
निर्धारण कर सकते है।
|
abc:active {color:#000ff;} |
active attribute द्वारा निर्धारित किया जाता है।
CSS Tags क्या हैं?
होता है। इसकी सहायता से html द्वारा प्रदर्शित हो रहे element को ओर अधिक आकर्षक
बना दिया जाता है। जिस प्रकार html में tags की सहायता से निर्धारित किया जाता है
उसी प्रकार से CSS के tags का भी निर्धरण कर सकते हैं CSS के कुछ आवश्यक tags
निम्न है :
(1) Background:
के properties निम्न है :
(A) Background-color:
कर सकते हैं। यहाँ element के रूप मे body, heading<h1,h2…..>, paragraph
<p>, आदि का निर्धारित कर सकते हैं।
<head>
<style>
body {
background-color:#00ff00;
}
</style>
</head>
<body>
<p>What is CSS in Hindi</p>
</body>
</html>
“#ff0000” यहाँ पहले में 00 अर्थात red=00, green=ff(full) और blue=00 इस प्रकार
से green color में बैकग्राउंड प्रदर्शित होगा।
(B) Background-Image:
निर्धारण कर सकते है यहाँ पर element – paragraph, heading, body, हो सकते
है।
<head>
<style>
body {
background-image:url(“car.jpg”)
}
</style>
</head>
<body>
<p>What is CSS in Hindi</p>
</body>
</html>
(C) Background-Position:
image के लिए background पर स्थान का निर्धारण किया जाता है इसे निम्न उदाहरणों
से समझ सकते हैं :
<head>
<head>
<style>
body{
background-position:right top;
}
</style>
</head>
<body>
<p>What is CSS in Hindi</p>
</body>
</html>
properties के कारण एक से अधिक image दिखाई पडेंगे इसलिए repeat होने से रोका
जाता है जिसके लिये no-repeat property का यूज करते हैं।
(D) Background-attachment:
करा सकते है यह जिस स्थान में fix किया जाता है वह स्थान नही बदलेगा इसे निम्न
प्रकार से समझ सकते हैं :
<head>
<style>
body{
background-attachment:fixed;
}
</style>
</head>
<body>
<p>What is CSS in Hindi</p>
</body
</html>
में ही रहगा ।
(E) Background-repeat:
page में बार बार repeat रहता है क्योंकि यह default रहता है यदि इसे हटाना चाहते
हैं तो इसके लिए no-repeat लिखकर उसे समाप्त कर दिया जाता है इस समझने के लिए
निम्न उदाहरण है।
<head>
<style>
body{
background-repeat:no-repeat;
}
</style>
</head>
<body>
<p>What is CSS in Hindi</p>
</body>
</html>
(2) Font:
एवं weight आदि का निर्धारण किया जा सकता हैं। CSS में Font को दो group विभाजित
किया जाता है :
(a) Generic family:
sans-serif और monospace के नाम से जानते है। इसे generic इसलिय कहा जाता है
क्योंकि ये एक ही प्रकार होती है इसके अंतर्गत आने वाले को निम्न नाम से जाना
जाता है :
(b) Font family:
उपयोग कर set किया जाता है। यह property सभी प्रकार के font में उपयोग कर सकते
है। इस property की सहायता से जब कोई font दिया गया होता तब उसमें font का नाम
दिया जाता है उसे पहले ढूढ़ लिया जाता है यदि नही मिलता तो उसके generic font में
जाना होता है इसे निम्न प्रकार से समझ सकते है :
<head> </head>
<body>
<p style =”font-family:courier,garamond,serif;”>
What is CSS in Hindi
</p>
</body>
</html>
Font style:
सकता है Italic में font text तिरछी प्रदर्शित होती है।
करते हैं।
<head> </head>
<body>
<p style =”font-style:italic;”>
What is CSS in Hindi
</p>
</html>
Font Size:
कार्य attributes या tag की सहायता से pixel में दे सकते है। Font size के
लिए जिसमे आकार 6 प्रकार की होती है। CSS में font size के लिए दो प्रकार से मान दे
सकते हैं जिसको Absolute और Relative कहा जाता है इनमे अंतर निम्न है :
Absolute size : इसमे browser में text के आकार को बदल सकते है ।
Relative size : इसमे text के आकार को अपने अनुसार बदला जा सकता है।
<head> </head>
<body>
<p style =”font-size:30px;”>
What is CSS in Hindi
</p>
<p style =”font-size:small;”>
What is CSS in Hindi
</p>
<p style =”font-size:large;”>
What is CSS in Hindi
</p>
</body>
</html>
What is CSS in Hindi
What is CSS in Hindi
Font weight :
है तब इस property का उपयोग कर सकते है इसे निम्न प्रकार से समझ सकते है :
<head> </head>
<body>
<p style =”font-weight:bold;”>
What is CSS in Hindi
</p>
<p style =”font-weight:bolder;”>
What is CSS in Hindi
</p>
<p style =”font-weight:500;”>
What is CSS in Hindi
</p>
</body>
</html>
What is CSS in Hindi
What is CSS in Hindi
Font Variant:
सभी capital letter में ही दिखाई पड़ते है अगर capital letter में है वह बड़ा और जो
small letter में है वह छोटा दिखाई पड़ता है। इसे निम्न प्रकार से समझ सकते है :
<head> </head>
<body>
<p style =”font-variant:small-caps;”>
What is CSS in Hindi
</p>
</body>
</html>
<head> </head>
<body>
<p style =”font-variant:large-caps;”>
What is CSS in Hindi
</p>
</body>
</html>