CSS Kya Hai
CSS वेब डिजाइनिंग के लिये बहुत अच्छी लैंग्वेज मानी जाती है. क्योकि अगर आप अपनी वेबसाइट में इसका उपयोग करते है तो आपकी वेबसाइट बहुत अच्छी बनती है.
CSS के प्रयोग से आपका सामान्य सा दिखने वाला HTML Page अत्यन्त आकर्षक दिखने लग जाता है. अपने Web Page मे लगे हुए Images का आकार प्रकार आदि आवश्यकतानुसार बनाने के लिये तथा अन्य बहुत सारे Design कार्य को करने के लिये हम CSS का प्रयोग करते है. CSS को सीखने के पहले हमे HTML का पूरा ज्ञान होना आवश्यक है.
यदि हम HTML की जानकारी नहीं रखते है तो हमारे लिये CSS को सीखना बहुत मुश्किल होगा. CSS को सीखकर भी हम इसका कोई प्रयोग नहीं कर सकते क्यूँकि यह स्वतन्त्र रूप से प्रयुक्त नहीं होता है. क्यूँकि यह HTML Tag पर लिखा जाता है और यह HTML Tag पर ही कार्य करता है. इसलिये CSS को सीखने से पहले आपको HTML का सामान्य ज्ञान तो होना आवश्यक है. CSS आप तीन प्रकार से Apply कर सकते है.
Inline CSS
Internal CSS
External CSS
Inline CSS
HTML में इनलाइन सीएसएस जोड़ने के लिए Style Attribute का उपयोग किया जाता है. Style Attribute एक Element के लिए एक Inline Style Specified करती है. सीएसएस Attribute का उपयोग Font-family, font-style, text-decoration, direction आदि जैसे Attributes के साथ किया जाता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color:blue">The Text in this example will be red</h1>
<p style="color:red">My Name is Ammu.</p>
<p style="color:blue">I Live in Telangana.</p>
<p style="color:red">My Best Friend is Ali.</p>
</body>
</html>
Output
Internal CSS
HTML में CSS का विभिन्न तरीकों से उपयोग किया जा सकता है. उनमें से एक Internal CSS का उपयोग है अर्थात् <style> Tag. <style> टैग का उपयोग<head>… </head> टैग में किया जाता है. यह एक पृष्ठ के लिए सीएसएस Style को परिभाषित करता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Internal CSS Example</title>
<style>
p{color: green}
h1{ text-align:center; color:red}
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>My Name is Ammu.</p>
<p>I Live in Telangana.</p>
<p>My Best Friend is Ali.</p>
</body>
</html>
Output
External CSS
आपके HTML दस्तावेज़ में बाहरी स्टाइलशीट फ़ाइल को शामिल करने के लिए <link> Element का उपयोग किया जा सकता है.
CSS से आप Webpages के Presentation को नियंत्रण कर सकते है. CSS आपको Webpage की Design पर पूरा नियंत्रण देती है. CSS से आप Webpage का Text Color, Font Family, Background, Margin, Padding और स्थिति आदि Set कर सकते है.
property:value;
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>The Text in this example will be red</h1>
<p>My Name is Ammu.</p>
<p>I Live in Telangana.</p>
<p>My Best Friend is Ali.</p>
</body>
</html>
Output
CSS in Hindi Introduction
कैस्केडिंग स्टाइल शीट्स को सीएसएस के रूप में जाना जाता है. सीएसएस वेब पृष्ठों को प्रस्तुत करने की प्रक्रिया को सरल बनाने के उद्देश्य से बनाई गई एक सरल भाषा है. सीएसएस आपको वेब पेज पर शैलियों को लागू करने की अनुमति देता है. इससे भी महत्वपूर्ण बात सीएसएस आपको HTML से स्वतंत्र करने में सक्षम बनाता है जो प्रत्येक वेब पेज बनाता है.
CSS का उपयोग Web Page को Beautiful बनाने मे किया जाता है. इसकी मदद से आप विभिन Content पर अलग-अलग Style Design को Apply कर सकते है. जैसे की Headings, Paragraphs, Lists आदि.
सीएसएस का उपयोग करके Web Pages के Text Color और Font Family और Background और Margin, Padding और Position आदि को सेट किया जाता है.
CSS के उपयोग से Web Pages को एक Attractive Design मिलता है. HTML और CSS हमेसा साथ मे ही उपयोग किये जाते है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-color: lightblue;
}
h1 {
color: white;
text-align: center;
}
p {
font-family: verdana;
font-size: 16px;
}
</style>
</head>
<body>
<h1>CSS First Example</h1>
<p>This is paragraph.</p>
</body>
</html>
Output
CSS in Hindi Syntax
CSS का प्रयोग HTML मे Selector के सहारे किया जाता है. ये Selector Id, Class या Block भी हो सकते है.
यदि हमे किसी Block पर CSS का प्रयोग करना है तो सबसे पहले हमे उस Block को Selector का स्वरूप देना होगा. Selector को बनाने के लिये या तो हम उस Block की Id को निर्धारित करे या Class को निर्धारित करे अथवा या सीधे उस Block के प्रकार को ही Selector बनाकर प्रयोग कर ले.
CSS मे बहुत से Style Rules होते है जो Browser द्वारा व्याख्यान किए गए है और फिर अपने Document मे संबंधित Element लागू होते है. Style Rule तीन प्रकार के होते है.
Selector
Property
Value
CSS Rule हमेशा Selector से Start होता है और यह बताता है कि हम किस HTML Element मे Rule Apply करेंगे. ऊपर Image मे दिखाया गया है जिसमे हम <body> Element मे कुछ Rule Apply कर रहे है.
Selector - यह एक HTML Tag है जिस पर Style Applied की जाती है. यह किसी भी Tag की तरह हो सकता है <h1>, <table> आदि.
Property - यह HTML Tag का एक प्रकार का Attribute होता है. यह Color, Border आदि हो सकता है.
Value - यह CSS Properties को Assigned करता है.
selector { property: value }
Types of Selectors
CSS Selectors एक CSS Rule Set का हिस्सा होता है. जो वास्तव मे वह Content चुनता है जिसे आप Style करना चाहते है. तो चलिए हम आपको सभी अलग-अलग प्रकार के Selectors को उपलब्ध कराते है.
Universal Selector
एक Selector एक HTML टैग होता है जिस पर एक स्टाइल लागू की जाएगी. यह कोई भी टैग हो सकता है जैसे <h1> या <table> आदि.
For Example
<!DOCTYPE html>
<html>
<head>
<title>Universal Selector Example</title>
<style>
*{
color:blue;
}
</style>
</head>
<body>
<h1>
This is heading
</h1>
<p>
This is a paragraph.
</p>
<p>
This is another paragraph.
</p>
</body>
</html>
Output
Tag Selector
Tag Selector को Element Type Selector भी कहते है. इससे हम Web Page के किसी भी HTML Tag को Select करके उसमे Style Apply कर सकते है. Tag Selector में हम Selector के स्थान पर उस Tag का नाम लिख सकते जिस Design को हम बदलना चाहते है.
For Example
<!DOCTYPE html>
<html>
<head>
<title>Tag Selector Example</title>
<style>
input{
background-color:red;
}
</style>
</head>
<body>
Enter Your Name: <input type="text">
</body>
</html>
Output
Class Selector
Class Selector सबसे ज्यादा उपयोग होने वाला Selector होता है. अगर हमे कभी Collection of Properties को बार-बार उपयोग करने की आवश्यकता पडती है तो हम एक Class बना कर उसके सभी Rules को उसके अंदर Define कर देते है. फ़िर जिस Tag मे हमे इस Rules को Set करना होता है तो हम उस Tag मे इस Class को Call कर लेते है. Class को Define करने के लिये .(dot) Symbol का उपयोग करते है. एक Class को हम जितने चाहे Tags मे Call कर सकते है.
For Example
<!DOCTYPE html>
<html>
<head>
<title>Class Selector Example</title>
<style>
.intro{
background-color:yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div class="intro">
<p>My Name is Ammu.</p>
<p>I Live in Telangana.</p>
</div>
<p>My Best Friend is Ali.</p>
</body>
</html>
Output
ID Selector
ID Selector यह Class की तरह ही होता है. इसमे बस इतना Difference होता है कि हम इसको Define करते समय # Character का उपयोग करते है. इसको Call करते समय Tag मे Id Attribute का उपयोग करते है. और एक ID Selector को हम सिर्फ़ एक Element के लिये ही उपयोग कर सकते है. सभी ID Unique Tag पर ही Apply होती है. ID का उपयोग ज्यादतर Layout को बनाते समय किया जाता है.
For Example
<!DOCTYPE html>
<html>
<head>
<title>ID Selector Example</title>
<style>
#intro{
background-color:red;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<div id="intro">
<p>My Name is Ammu.</p>
<p>I Live in Telangana.</p>
</div>
<p>My Best Friend is Ali.</p>
</body>
</html>
Output
Child Selectors
Child Selectors Descendant Selector की तरह ही होता है. लेकिन यह किसी Element के Child को ही Target करता है. इसलिए इसमे हम Greater Than Symbol (>) का उपयोग करते है.
For Example
<!DOCTYPE html>
<html>
<head>
<title>Child Selector Example</title>
<style>
p b{
background-color:yellow;
}
</style>
</head>
<body>
<p>Welcome to My Website <b>Tutorialsroot</b></p>
<b>My Name is Ammu.</b>
<p>My Best Friend is Ali.</p>
</body>
</html>
Output
Attribute Selector
आप विशेष विशेषताओं के साथ HTML Elements में Styles को भी लागू कर सकते हैं. नीचे दी गई Styles का Rule Text की Values के साथ एक प्रकार की विशेषता वाले सभी इनपुट Elements से मेल खाएगा.
For Example
<!DOCTYPE html>
<html>
<head>
<title>Attribute Selector Example</title>
<style>
a[target=_blank] {
background-color:yellow;
}
</style>
</head>
<body>
<h3>Welcome to My Website Tutorialsroot</h3>
<a href="http://www.tutorialsroot.com">tutorialsroot.com</a>
<a href="https://www.flipkart.com/" target="_blank">Flipkart.com</a>
<a href="http://www.wikipedia.org" target="_top">Wikipedia.org</a>
</body>
</html>
Output
CSS in Hindi Colors
HTML Element के Color को सेट करने के लिए CSS Color Property का उपयोग किया जाता है. इस Property का उपयोग फ़ॉन्ट रंग, पृष्ठभूमि रंग आदि सेट करने के लिए किया जाता है.
CSS एक Element का Color निम्नलिखित तरीकों से परिभाषित किया जा सकता है -
A valid Color Name - Llike "red"
An RGB Value - Like "rgb(255, 0, 0)"
A HEX Value - Like "#ff0000"
CSS Color Names and Codes
| Name | HexDec | RGB | Color |
|---|---|---|---|
| aliceblue | #f0f8ff | 240,248,255 | |
| antiquewhite | #faebd7 | 250,235,215 | |
| aqua | #00ffff | 0,255,255 | |
| aquamarine | #7fffd4 | 127,255,212 | |
| azure | #f0ffff | 240,255,255 | |
| beige | #f5f5dc | 245,245,220 | |
| bisque | #ffe4c4 | 255,228,196 | |
| black | #000000 | 0,0,0 | |
| blanchedalmond | #ffebcd | 255,235,205 | |
| blue | #0000ff | 0,0,255 | |
| blueviolet | #8a2be2 | 138,43,226 | |
| brown | #a52a2a | 165,42,42 | |
| burlywood | #deb887 | 222,184,135 | |
| cadetblue | #5f9ea0 | 95,158,160 | |
| chartreuse | #7fff00 | 127,255,0 | |
| chocolate | #d2691e | 210,105,30 | |
| coral | #ff7f50 | 255,127,80 | |
| cornflowerblue | #6495ed | 100,149,237 | |
| cornsilk | #fff8dc | 255,248,220 | |
| crimson | #dc143c | 220,20,60 | |
| cyan | #00ffff | 0,255,255 | |
| darkblue | #00008b | 0,0,139 | |
| darkcyan | #008b8b | 0,139,139 | |
| darkgoldenrod | #b8860b | 184,134,111 | |
| darkgray | #a9a9a9 | 169,169,169 | |
| darkgreen | #006400 | 0,100,0 | |
| darkgrey | #a9a9a9 | 169,169,169 | |
| darkkhaki | #bdb76b | 189,183,107 | |
| darkmagenta | #8b008b | 139,0,139 | |
| darkolivegreen | #556b2f | 85,107,47 | |
| darkorange | #ff8c00 | 255,140,0 | |
| darkorchid | #9932cc | 153,50,204 | |
| darkred | #8b0000 | 139,0,0 | |
| darksalmon | #e9967a | 233,150,122 | |
| darkseagreen | #8fbc8f | 143,188,143 | |
| darkslateblue | #483d8b | 72,61,139 | |
| darkslategray | #2f4f4f | 47,79,79 | |
| darkslategrey | #2f4f4f | 47,79,79 | |
| darkturquoise | #00ced1 | 0,206,209 | |
| darkviolet | #9400d3 | 148,0,211 | |
| deeppink | #ff1493 | 255,20,147 | |
| deepskyblue | #00bfff | 0,191,255 | |
| dimgray | #696969 | 105,105,105 | |
| dimgrey | #696969 | 105,105,105 | |
| dodgerblue | #1e90ff | 30,144,255 | |
| firebrick | #b22222 | 178,34,34 | |
| floralwhite | #fffaf0 | 255,250,240 | |
| forestgreen | #228b22 | 34,139,34 | |
| fuchsia | #ff00ff | 255,0,255 | |
| gainsboro | #dcdcdc | 220,220,220 | |
| ghostwhite | #f8f8ff | 248,248,255 | |
| gold | #ffd700 | 255,215,0 | |
| goldenrod | #daa520 | 218,165,32 | |
| gray | #808080 | 128,128,128 | |
| green | #008000 | 0,128,0 | |
| greenyellow | #adff2f | 173,255,47 | |
| grey | #808080 | 128,128,128 | |
| honeydew | #f0fff0 | 240,255,240 | |
| hotpink | #ff69b4 | 255,105,180 | |
| indianred | #cd5c5c | 205,92,92 | |
| indigo | #4b0082 | 75,0,130 | |
| ivory | #fffff0 | 255,255,240 | |
| khaki | #f0e68c | 240,230,140 | |
| lavender | #e6e6fa | 230,230,250 | |
| lavenderblush | #fff0f5 | 255,240,245 | |
| lawngreen | #7cfc00 | 124,252,0 | |
| lemonchiffon | #fffacd | 255,250,205 | |
| lightblue | #add8e6 | 173,216,230 | |
| lightcoral | #f08080 | 240,128,128 | |
| lightcyan | #e0ffff | 224,255,255 | |
| lightgoldenrodyellow | #fafad2 | 250,250,210 | |
| lightgray | #d3d3d3 | 211,211,211 | |
| lightgreen | #90ee90 | 144,238,144 | |
| lightgrey | #d3d3d3 | 211,211,211 | |
| lightpink | #ffb6c1 | 255,182,193 | |
| lightsalmon | #ffa07a | 255,160,122 | |
| lightseagreen | #20b2aa | 32,178,170 | |
| lightskyblue | #87cefa | 135,206,250 | |
| lightslategray | #778899 | 119,136,153 | |
| lightslategrey | #778899 | 119,136,153 | |
| lightsteelblue | #b0c4de | 176,196,222 | |
| lightyellow | #ffffe0 | 255,255,224 | |
| lime | #00ff00 | 0,255,0 | |
| limegreen | #32cd32 | 50,205,50 | |
| linen | #faf0e6 | 250,240,230 | |
| magenta | #ff00ff | 255,0,255 | |
| maroon | #800000 | 128,0,0 | |
| mediumaquamarine | #66cdaa | 102,205,270 | |
| mediumblue | #0000cd | 0,0,205 | |
| mediumorchid | #ba55d3 | 186,85,211 | |
| mediumpurple | #9370db | 147,112,219 | |
| mediumseagreen | #3cb371 | 60,179,113 | |
| mediumslateblue | #7b68ee | 123,104,238 | |
| mediumspringgreen | #00fa9a | 0,250,154 | |
| mediumturquoise | #48d1cc | 72,209,204 | |
| mediumvioletred | #c71585 | 199,21,133 | |
| midnightblue | #191970 | 25,25,112 | |
| mintcream | #f5fffa | 245,255,250 | |
| mistyrose | #ffe4e1 | 255,228,225 | |
| moccasin | #ffe4b5 | 255,228,181 | |
| navajowhite | #ffdead | 255,222,173 | |
| navy | #000080 | 0,0,128 | |
| oldlace | #fdf5e6 | 253,245,230 | |
| olive | #808000 | 128,128,0 | |
| olivedrab | #6b8e23 | 107,142,35 | |
| orange | #ffa500 | 255,165,0 | |
| orangered | #ff4500 | 255,69,0 | |
| orchid | #da70d6 | 218,112,214 | |
| palegoldenrod | #eee8aa | 238,232,170 | |
| palegreen | #98fb98 | 152,251,152 | |
| paleturquoise | #afeeee | 173,238,238 | |
| palevioletred | #db7093 | 219,112,147 | |
| papayawhip | #ffefd5 | 255,239,213 | |
| peachpuff | #ffdab9 | 255,218,185 | |
| peru | #cd853f | 205,133,63 | |
| pink | #ffc0cb | 255,192,203 | |
| plum | #dda0dd | 221,160,221 | |
| powderblue | #b0e0e6 | 176,224,230 | |
| purple | #800080 | 128,0,128 | |
| red | #ff0000 | 255,0,0 | |
| rosybrown | #bc8f8f | 188,143,143 | |
| royalblue | #4169e1 | 65,105,225 | |
| saddlebrown | #8b4513 | 139,69,19 | |
| salmon | #fa8072 | 250,128,114 | |
| sandybrown | #f4a460 | 244,264,96 | |
| seagreen | #2e8b57 | 46,139,87 | |
| seashell | #fff5ee | 255,245,238 | |
| sienna | #a0522d | 160,82,45 | |
| silver | #c0c0c0 | 192,192,192 | |
| skyblue | #87ceeb | 135,206,235 | |
| slateblue | #6a5acd | 106,90,205 | |
| slategray | #708090 | 112,128,144 | |
| slategrey | #708090 | 112,128,144 | |
| snow | #fffafa | 255,250,250 | |
| springgreen | #00ff7f | 0,255,127 | |
| steelblue | #4682b4 | 70,130,180 | |
| tan | #d2b48c | 210,180,140 | |
| teal | #008080 | 0,128,128 | |
| thistle | #d8bfd8 | 216,191,216 | |
| tomato | #ff6347 | 255,99,71 | |
| turquoise | #40e0d0 | 64,224,208 | |
| violet | #ee82ee | 238,130,238 | |
| wheat | #f5deb3 | 245,222,179 | |
| white | #ffffff | 255,255,255 | |
| whitesmoke | #f5f5f5 | 245,245,245 | |
| yellow | #ffff00 | 255,255,0 | |
| yellowgreen | #9acd32 | 154,205,50 |
For Example
<h1 style="background-color:liMe;">LIME</h1>
<h1 style="background-color:green;">GREEN</h1>
<h1 style="background-color:aqua;">AQUA</h1>
<h1 style="background-color:teal;">TEAL</h1>
<h1 style="background-color:blue;">BLUE</h1>
<h1 style="background-color:navy;">NAVY</h1>
<h1 style="background-color:fuchsia;">FACHSIA</h1>
<h1 style="background-color:purple;">PURPLE</h1>
<h1 style="background-color:white;">WHITE</h1>
<h1 style="background-color:silver;">SILVER</h1>
<h1 style="background-color:gray;">GRAY</h1>
<h1 style="background-color:black;">BLACK</h1>
<h1 style="background-color:red;">RED</h1>
<h1 style="background-color:maroon;">MAROON</h1>
<h1 style="background-color:yellow;">YELLOW</h1>
<h1 style="background-color:olive;">OLIVE</h1>
Output
CSS Background में सामग्री या तत्व के लिए एक Background प्रभाव को परिभाषित करने के लिए उपयोग किया जाता है. Background की Property को लागू करने के विभिन्न तरीके हैं. Background Property हमें किसी भी तत्व की Background को नियंत्रित करने की अनुमति देती है.
Background को Set करने के लिए CSS आपको बहुत सी Properties Provide करती है. आप एक HTML Element का Background Set करने के लिये नीचे लिखी Properties का उपयोग कर सकते है.
background-color
background-image
background-repeat
background-attachment
background-position
Background Color
CSS में किसी भी box या div या font या Background को Color Set करने के लिए आप background-color Property का उपयोग कर करते है. इस Property की Value को आप Color के नाम से डिफाइन कर सकते या फिर इसके आलावा Hex Code से डिफाइन कर सकते है. इस Property की Value आप Color का नाम या Hex Code दे सकते है.
<!DOCTYPE HTML>
<html>
<head>
<style>
h3,p{
background-color: lightblue;
}
</style>
</head>
<body>
<h3>This is first CSS page.</h3>
<p>Hello Tutorial Root. This is an example of CSS background-color</p>
<h1>CSS First Example</h1>
<p>This is paragraph.</p>
</body>
</html>
Output
Background Image
CSS के द्वारा Image को Background के रूप मे Set किया जा सकता है. इसके लिए background-image Property उपयोग की जाती है. इस Property की Value के रूप मे Image का url दिया जाता है.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("paper.gif");
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This page has an image as the background!</p>
</body>
</html>
Output
Repeat Background Image
Background-image Property Horizontal और Vertical रूप से Background Image को Repeat करता है.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("images/css.jpg");
background-repeat: repeat;
}
</style>
</head>
<body>
<p>CSS Tutorials</p>
<p>This page has an Repeat Background Image</p>
</body>
</html>
Output
Background Image Position
Background-position का उपयोग Background Image की Position को Control करने के लिये किया जाता है.
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
background-image: url("images/norept-back.jpg");
background-position:100px;
}
</style>
</head>
<body>
<p>CSS Tutorials</>
</body>
</html>
Output
CSS in Hindi Fonts
CSS मे Font Property का उपयोग Look और Texts को Control करने के लिये किया जाता है. CSS से आप Fonts Size, Style, Weight, line-height आदि को Change कर सकते है.
All CSS Font Properties
font-family Property
font-size Property
font-style Property
font-variant Property
font-weight Property
Font Family
Font Family Property एक Element के लिए Font को Specified करती है. Font Family Property मे Fallback System के रूप मे कई Font Name हो सकते है. यदि Browser पहले Font का समर्थन नही करता है तो यह अगले Font पर प्रयास करती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Font Family Example</title>
</head>
<body>
<p style="font-family:georgia,garamond,serif;">
This text is rendered in either georgia, garamond, or the default serif
font depending on which font you have at your system.
</p>
</body>
</html>
Output
Font Style
इसका उपयोग एचटीएमएल एलिमेंट की फ़ॉन्ट स्टाइल को निर्दिष्ट करने के लिए किया जाता है. Font Style की तीन value हो सकती है Normal, Italic या Oblique.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Font Style Example</title>
<style>
h2{ font-style: oblique; }
p { font-style: italic; }
h3 { font-style: normal; }
</style>
</head>
<body>
<h2>Wellcome to My Website </h2>
<p>This text will be prepare, in italic style</p>
<h3>My Name is Ammu.</h3>
</body>
</html>
Output
Font Variant
इसका उपयोग Small Caps बनाने के लिए किया जाता है. यह सामान्य या Small Caps हो सकता है. हालांकि यह सभी Font मे काम नही करता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Font Variant Example</title>
<style>
p{font-variant: small-caps;}
</style>
</head>
<body>
<p>Wellcome to My Website</p>
</body>
</html>
Output
Font Weight
Font Weight Property किसी भी Font की Boldness और Thickness को परिभाषित करती है. इसकी Value Range 100-900 तक होती है. इसके अलावा आप कुछ Keyword Like This Normal, Bold, Bolder, Lighter आदि का भी उपयोग कर सकते है. कोई भी Value Set नही करने की Condition मे इसकी Value By Default Normal होती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Font Weight Example</title>
</head>
<body>
<p style="font-weight:bold;">This font is bold.</p>
<p style="font-weight:bolder;">This font is bolder.</p>
<p style="font-weight:300;">This font is 300 weight.</p>
</body>
</html>
Output
Font Size
इसका उपयोग HTML एलिमेंट के फ़ॉन्ट साइज को सेट करने के लिए किया जाता है. फ़ॉन्ट साइज को अलग अलग तरीकों से सेट किया जा सकता है जैसे की Pixel, Percent, EMI. इसका उपयोग करके आप फ़ॉन्ट की Value Set कर सकते हैं.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Font Size Example</title>
<style>
h1 {
font-size: 250%;
}
h2 {
font-size: 200%;
}
p {
font-size: 100%;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<p>I Live in Telangana.</p>
</body>
</html>
Output
CSS in Hindi Text
CSS का उपयोग करके किसी भी वेब पेज के Text को बहुत अच्छे से डिज़ाइन किया जा सकता है. वेब पेज को अच्छे से डिज़ाइन करने के लिए CSS बहुत सी Properties प्रदान करती है जिनका उपयोग करके आप वेब पेज को बहुत अच्छा बना सकते है.
CSS में आपको बहुत सी Properties मिल जाएगी है जिनका आप उपयोग कर सकते हो अपने वेब पेज इन सभी Properties के बारे में आप नीचे विस्तार से देख सकते है.
All CSS Text Properties
| Property | Description |
|---|---|
| Color | Color Property का उपयोग किसी Text का Color Set करने के लिए किया जाता है. |
| Direction | Direction Property का उपयोग किसी Text की Direction Set करने के लिए किया जाता है. |
| letter-spacing | letter-spacing Property का उपयोग किसी Text मे Letter-spacing Set करने के लिए किया जाता है. |
| word-spacing | word-spacing Property का उपयोग किसी Text मे Word-spacing Defined करने के लिए किया जाता है. |
| text-indent | Text-indent का उपयोग किसी Paragraph की First Line का Indent Set करने के लिए किया जाता है. |
| text-align | Text-align Property का उपयोग किसी Text का Web Page मे Alignment Set करने के लिए किया जाता है. |
| text-decoration | text-decoration Property का उपयोग किसी Text को Decorate करते हो जैसे की Text के नीचे Underline Define करने के लिए किया जाता है. |
| text-transform | text-transform Property का उपयोग किसी Text का Case Set करने के लिये करते है. |
| white-space | white-space Property का उपयोग Text के Flow और Formatting को Control करने के लिये किया जाता है. |
| text-shadow | इस Property का उपयोग Web Page मे Text की Shadow को प्रदशि॔त कर सकते है. |
Text Color
<!DOCTYPE HTML>
<html>
<head>
<title>Text Color Example</title>
<style>
body {
color: red;
}
h1 {
color: #7fff00;
}
p.ex {
color: rgb(220,20,60);
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<p>My Name is Ammu</p>
<p class="ex">I Live in Telangana</p>
</body>
</html>
Output
Text Direction
<!DOCTYPE HTML>
<html>
<head>
<title>Text Direction Example</title>
<style>
div.x1 {
direction: rtl;
}
h1 {
direction: ltr;
color:red;
}
</style>
</head>
<body>
<div>Wellcome to My Website</div>
<h3>My Name is Ammu</h3>
<div class="x1">I Live in Telangana</p>
</body>
</html>
Output
Letter Spacing
<!DOCTYPE HTML>
<html>
<head>
<title>Letter Spacing Example</title>
<style>
h1 {
letter-spacing: 3px;
color:green;
}
h2 {
letter-spacing: -4px;
color:red;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
</body>
</html>
Output
Text Indent Example
<!DOCTYPE HTML>
<html>
<head>
<title>Text Indent Example</title>
<style>
p {
text-indent: 60px;
color:green;
}
</style>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit, sed diam nonummy nibh euismod tincidunt ut laoreet
dolore magna aliquam erat volutpat. Ut wisi enim ad minim
veniam, quis nostrud exerci tation ullamcorper suscipit
lobortis nisl ut aliquip ex ea commodo consequat.
</p>
</body>
</html>
Output
Text Alignment
<!DOCTYPE HTML>
<html>
<head>
<title>Text Alignment Example</title>
<style>
h1 {
text-align: center;
color:green;
}
h2 {
text-align: left;
color:red;
}
h3 {
text-align: right;
color:blue;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<h3>I Live in Telangana</h3>
</body>
</html>
Output
Decoration Text Example
<!DOCTYPE HTML>
<html>
<head>
<title>Text Decoration Example</title>
<style>
h1 {
text-decoration: overline;
color:green;
}
h2 {
text-decoration: line-through;
color:red;
}
h3 {
text-decoration: underline;
color:blue;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
<h3>I Live in Telangana</h3>
</body>
</html>
Output
Text Shadow
<!DOCTYPE HTML>
<html>
<head>
<title>Text Shadow Example</title>
<style>
h1 {
text-shadow: 3px 3px #FF0000;
}
</style>
</head>
<body>
<h1>Wellcome to My Website</h1>
<h2>My Name is Ammu</h2>
</body>
</html>
Output
CSS in Hindi Images
CSS आपको कुछ Properties प्रदान करती है. जिनकी सहायता से आप Images को Optimize कर सकते है. यह Properties Image की height, width, border, radius, opacity आदि Define करती है.
Image Border
Image Height
Image Width
Image Opacity
Image Radius
Image Border Property
Border Property का उपयोग करके आप किसी भी Image की Border की Heigh, Width डिफाइन कर सकते है. इसके द्वारा आप बॉर्डर के प्रकार जैसे की Dotted, Dashed और उसका Color को Define कर सकते है.
Border Property Define करने का Syntax आप नीचे देख सकते है.
Syntax
border : width | type | color;
Border की Width के बाद Border का Type Define किया जाता है. CSS मे Borders के चार Basic Types होते है.
Dotted - Border Dotes की Form मे Represent होती है.
Dashed - Border Dashes की Form मे Represent होती है.
Double - Border Double Lines के रूप मे Show होती है.
Solid - Border एक Solid Line के रूप मे Show होती है
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Image Border Example</title>
<style>
#borderimg1 {
border: 8px solid transparent;
padding: 14px;
-webkit-border-image: url(border.png) 30 round;
-o-border-image: url(border.png) 30 round;
border-image: url(border.png) 30 round;
}
</style>
</head>
<body>
<p id="borderimg1">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Output
Image Height Property
Height Property का उपयोग करके किसी भी Image की Height को Define किया जा सकता है. CSS के द्वारा Image की Height को Pixels और % मे भी Define किया जा सकता है.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Height Example</title>
<style>
img.normal {
height: auto;
}
img.big {
height: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="94" height="74"><br>
<img class="big" src="css.gif" width="94" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Output
Image Width Property
इस Property का उपयोग करके किसी भी Image की Width को Define किया जा सकता है. CSS के द्वारा Image की Width को Pixel और % मे भी Define किया जा सकता है.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Width Example</title>
<style>
img.normal {
height: auto;
}
img.big {
width: 120px;
}
p.yx {
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<img class="normal" src="css.gif" width="74" height="74"><br>
<img class="big" src="css.gif" width="74" height="74">
<p class="yx">Wellcome To My Website. My Name is Ammu. I Live in Telangana.</p>
</body>
</html>
Output
Image Opacity Property
Opacity Property के द्वारा Images की स्पष्टता को Define किया जाता है. इस Property की Value 0.1 से लेकर 1 तक होती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Image Opacity Example</title>
<style>
div {
background-color: red;
opacity: 0.5;
filter: Alpha(opacity=50);
}
</style>
</head>
<body>
<div>Wellcome To My Website. My Name is Ammu. I Live in Telangana.
Wellcome To My Website. My Name is Ammu. I Live in Telangana.</div>
</body>
</html>
Output
CSS in Hindi Tables
Tables का उपयोग किसी भी Information को Structured Form में वर्णन करने के लिए किया जाता है. CSS आपको 5 Properties प्रदान करती है. जिनका उपयोग करके आप Table को बहुत अच्छे से Design कर सकते हो.
border-collapse
border-spacing
caption-side
empty-cells
table-layout
Border Collapse Property
Border Collapse Property हमें बताती है कि क्या ब्राउज़र को संलग्न सीमाओं की उपस्थिति को नियंत्रित करना चाहिए जो एक-दूसरे को छूते हैं या क्या प्रत्येक सेल को अपनी Style बनाए रखना चाहिए.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.one {border-collapse:collapse;}
table.two {border-collapse:separate;}
td.a {
border-style:dotted;
border-width:3px;
border-color:#5F9EA0;
padding: 10px;
}
td.b {
border-style:solid;
border-width:3px;
border-color:#8A2BE2;
padding:10px;
}
</style>
</head>
<body>
<table class="one">
<caption>Collapse Border Example</caption>
<tr><td class="a"> Cell A Collapse Example</td></tr>
<tr><td class="b"> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two">
<caption>Separate Border Example</caption>
<tr><td class="a"> Cell A Separate Example</td></tr>
<tr><td class="b"> Cell B Separate Example</td></tr>
</table>
</body>
</html>
Output
Border Spacing Property
Border Spacing Property उस Space को निर्दिष्ट करती है जो Adjacent Cells को अलग करती है. यह या तो एक या दो Values ले सकता है ये लंबाई की इकाइयाँ होनी चाहिए.
जब आप 1 Value को Define करते है तो पहली Value Horizontal और दुसरी Value Vertical Apply होती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.one {
border-collapse:separate;
width:410px;
border-spacing:12px;
}
table.two {
border-collapse:separate;
width:410px;
border-spacing:12px 52px;
}
</style>
</head>
<body>
<table class="one" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Collapse Example</td></tr>
<tr><td> Cell B Collapse Example</td></tr>
</table>
<br />
<table class="two" border="1">
<caption>Separate Border Example with border-spacing</caption>
<tr><td> Cell A Separate Example</td></tr>
<tr><td> Cell B Separate Example</td></tr>
</table>
</body>
</html>
Output
Caption Side Property
Caption Side Propertyआपको यह निर्दिष्ट करने की अनुमति देती है कि टेबल के संबंध में <caption> Element की सामग्री को कहां रखा जाना चाहिए. तालिका जो निम्न मानों को सूचीबद्ध करती है. इस Property में चार Value top, bottom, left, right हो सकती हैं.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
caption.top {caption-side:top}
caption.bottom {caption-side:bottom}
caption.left {caption-side:left}
caption.right {caption-side:right}
</style>
</head>
<body>
<table style="width:400px; border:1px solid red;">
<caption class="top">
This caption will appear at the top
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="bottom">
This caption will appear at the bottom
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="left">
This caption will appear at the left
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
<br />
<table style="width:400px; border:1px solid red;">
<caption class="right">
This caption will appear at the right
</caption>
<tr><td > Cell A</td></tr>
<tr><td > Cell B</td></tr>
</table>
</body>
</html>
Output
Empty Cells Property
Empty-cells Property Empty Cells को Hide या Show करने के लिए उपयोग की जाती है. इसका ज्यादातर उपयोग Table के साथ किया जाता है क्योंकि Table मे कई Cells होते है और कुछ समय में कुछ Cells Empty होते है और उन्हे Hide करने की जरूरत होती है.
यह Property चार प्रकार की Values को Accept कर सकती है जैसे Show, Hide, Initial और Inherit लेकिन अधिकतर दो Value दिखाई जाती है और Hide होती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.empty{
width:400px;
border-collapse:separate;
empty-cells:hide;
}
td.empty{
padding:5px;
border-style:solid;
border-width:1px;
border-color:#B22222;
}
</style>
</head>
<body>
<table class="empty">
<tr>
<th></th>
<th>Title one</th>
<th>Title two</th>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty">value</td>
</tr>
<tr>
<th>Row Title</th>
<td class="empty">value</td>
<td class="empty"></td>
</tr>
</table>
</body>
</html>
Output
Table Layout Property
Table-layout CSS Property Table Cells, Rows, और Columns को बाहर करने के लिए उपयोग किए जाने वाले Algorithm को Specifies करती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
table.auto {
table-layout: auto
}
table.fixed{
table-layout: fixed
}
</style>
</head>
<body>
<table class="auto" border="1" width="100%">
<tr>
<td width="20%">11111111111111111111111111111</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
<br />
<table class="fixed" border="1" width="100%">
<tr>
<td width="20%">122222222</td>
<td width="40%">10000000</td>
<td width="40%">100</td>
</tr>
</table>
</body>
</html>
Output
CSS in Hindi Borders
Border Property का उपयोग Element के Border को अलग-अलग रूपों और अनुभव में प्रदर्शित करने के लिए किया जाता है. आप अलग-अलग Borders Styles के साथ Web Page को और Attractive बना सकते है. इसका उपयोग Web Page पर प्रदर्शित करने के लिए Element या Tag का Circle देने के लिए किया जाता है.
हम Border को Specify करने के लिए सबसे अधिक दो Attributes Border Style और Border Width का उपयोग करते है. CSS आपको चार Properties Provide करती है. जिनकी मदद से आप Borders की Advanced Designing कर सकते है. इनकी List आप नीचे देख सकते है.
List of Border Properties
border-color
border-style
border-width
Border Color Property
इस Property का उपयोग Border के Color को निर्धारित करने के लिए किया जाता है. Color Color Name, Hex Value या RGB Value का उपयोग करके सेट किया जा सकता है. यदि Color Specified Border नहीं है तो Element का Color Inherits में मिला है
अगर आप पूरे Border के Color को बदलना चाहते है तो आप Border Color Property का उपयोग करके इसे बदल सकते हो.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p.example1{
border:1px solid;
border-bottom-color:#00FFFF;
border-top-color:#0000FF;
border-left-color:#A52A2A;
border-right-color:#7FFF00;
}
p.example2{
border:1px solid;
border-color:#006400;
}
</style>
</head>
<body>
<p class="example1">
This example is showing all borders in different colors.
</p>
<p class="example2">
This example is showing all borders in different color only.
</p>
</body>
</html>
Output
Border Style Property
Border Style Property का उपयोग ज्यादातर Border Style को Specify करने और विभिन्न Styles मे Borders को Set करने के लिए और विकल्प प्रदान करने के लिए किया जाता है. जैसे की Dotted, Dashed, Solid आदि. यह Property Element के Borders को Different Look देने मे बहुत उपयोगी है. इस Property से आप Border style को Define करते है.
| Value | Description |
|---|---|
| none | None Value से Element का Border नही दिखाई देता है. |
| solid | Solid Value से आप एक Solid Border को Define कर सकते हो. |
| double | जब आप Double Value देते है तो Border Double Line Show होती है. |
| dashed | Dashed Value से Border - Dash से बनी हुई Show होती है. |
| dotted | Dotted Value से आप Border को Dotted Show कर सकते है. |
| groove | Groove Value से Border Grooved दिखाई देता है. |
| ridge | Ridge Value का उपयोग करके आप Border को Ridged बना सकते हो. |
| inset | Inset Value से आप Inset Border Show कर सकते हो. |
| outset | Outset Value से आप Outset Border को Show कर सकते हो. |
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Border Style Property Example</title>
<style>
p.none {border-style: none;}
p.dotted {border-style: dotted;}
p.dashed {border-style: dashed;}
p.solid {border-style: solid;}
p.double {border-style: double;}
p.groove {border-style: groove;}
p.ridge {border-style: ridge;}
p.inset {border-style: inset;}
p.outset {border-style: outset;}
p.hidden {border-style: hidden;}
</style>
</head>
<body>
<p class="none">No border.</p>
<p class="dotted">A dotted border.</p>
<p class="dashed">A dashed border.</p>
<p class="solid">A solid border.</p>
<p class="double">A double border.</p>
<p class="groove">A groove border.</p>
<p class="ridge">A ridge border.</p>
<p class="inset">An inset border.</p>
<p class="outset">An outset border.</p>
<p class="hidden">A hidden border.</p>
</body>
</html>
Output
Border Width Property
Border की Width Border की Width निर्धारित करती है. Border की Width px, pt, cm या Medium और Thick में हो सकती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Border Width Property Example</title>
<style>
p.one {
border-style: solid;
border-width: 4px;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three {
border-style: solid;
border-width: 2px;
}
</style>
</head>
<body>
<p class="one">My Name is Ammu.</p>
<p class="two">My Name is Ammu.</p>
<p class="three">My Name is Ammu.</p>
</body>
</html>
Output
CSS in Hindi Padding
किसी भी Webpage के Design मे Padding और Margin का बहुत बड़ा महत्व होता है. Padding और Margin को किसी HTML Element <div>,<h1> और <p> आदि की Border के संदर्भ मे Define किया जाता है. Padding Border की अंदर की तरफ Space के रूप मे Define की जाती है और Margin Border के बाहर की तरफ Space के रूप मे Define किया जाता है.
CSS मे Padding का उपयोग Content के आस पास Space देने के लिये किया जाता है. Padding को Define करने के लिए CSS आपको चार Properties प्रदान करती है.
padding-top
padding-bottom
padding-left
padding-right
Padding Top Property
यह Property Top Side की Padding को Define करने के लिए उपयोग की जाती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Top Property Example</title>
<style>
p.padding {
padding-top: 2cm;
}
p.padding2 {
padding-top: 40%;
}
</style>
</head>
<body>
<p class="padding">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="padding2">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
</body>
</html>
Output
Padding Bottom Property
यह Property Bottom Side की Padding को Define करने के लिए उपयोग की जाती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Bottom Property Example</title>
<style>
p.padding {
padding-bottom: 2cm;
}
p.padding2 {
padding-bottom: 40%;
}
</style>
</head>
<body>
<p class="padding">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="padding2">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
</body>
</html>
Output
Padding Left Property
यह Property Left Side की Padding को Define करने के लिए उपयोग की जाती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Left Property Example</title>
<style>
p.padding {
padding-left: 2cm;
}
p.padding2 {
padding-left: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="padding">Wellcome to My Website.
My Name is Ammu.</p>
<p class="padding2">Wellcome to My Website.
My Name is Ammu.</p>
</body>
</html>
Output
Padding Right Property
यह Property Right Side की Padding को Define करने के लिए उपयोग की जाती है.
<!DOCTYPE HTML>
<html>
<head>
<title>Padding Right Property Example</title>
<style>
p.padding {
padding-right: 2cm;
}
p.padding2 {
padding-right: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="padding">Wellcome to My Website.
My Name is Ammu.</p>
<p class="padding2">Wellcome to My Website.
My Name is Ammu.</p>
</body>
</html>
Output
CSS in Hindi Margin
सीएसएस मार्जिन का उपयोग एलिमेंट के चारों ओर स्थान बनाने के लिए किया जाता है. यदि आप किसी भी Element के Left, Right, Top और Bottom को Clear Spaces देना चाहते है तो आप इस Property का उपयोग कर सकते है. Margins को Define करने के लिए CSS आपको चार Properties Provide करता है.
margin-top
margin-bottom
margin-left
margin-right
Margin Top Property
यह Property Top Side मे Margins को Define करने के लिए उपयोग की जाती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Top Property Example</title>
<style>
p.margin {
margin-top: 2cm;
}
p.margin2 {
margin-top: 20%;
}
</style>
</head>
<body>
<p class="margin">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="margin2">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
</body>
</html>
Output
Margin Bottom Property
यह Property Bottom Side मे Margins को Define करने के लिए उपयोग की जाती है. आप जितनी Value इस Property की देते है उतना ही Space Element के Bottom मे Border के बाहर की तरफ Create हो जाता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Bottom Property Example</title>
<style>
p.margin {
margin-bottom: 2cm;
}
p.margin2 {
margin-bottom: 20%;
}
</style>
</head>
<body>
<p class="margin">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="margin2">Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
</body>
</html>
Output
Margin Left Property
यह Property Left Side मे Margins को Define करने के लिए उपयोग की जाती है जब आप इस Property को Value के साथ Set करते है तो Element के Left की तरफ Border के बाहर Space Create हो जाता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Left Property Example</title>
<style>
p.margin {
margin-left: 2cm;
}
p.margin2 {
margin-left: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="margin">Wellcome to My Website.
My Name is Ammu.</p>
<p class="margin2">Wellcome to My Website.
My Name is Ammu.</p>
</body>
</html>
Output
Margin Right Property
यह Property Right Side मे Margins को Define करने के लिए उपयोग की जाती है. इससे Element के Right और Border के बाहर की तरफ Specified Space Create हो जाता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Margins Right Property Example</title>
<style>
p.margin {
margin-right: 10cm;
}
p.margin2 {
margin-right: 40%;
}
</style>
</head>
<body>
<p>Wellcome to My Website. My Name is Ammu.
I Live in Telangana.</p>
<p class="margin">Wellcome to My Website.
My Name is Ammu.</p>
<p class="margin2">Wellcome to My Website.
My Name is Ammu.</p>
</body>
</html>
Output
CSS in Hindi Scrollbars
CSS Overflow नाम की एक Property प्रदान करता है जो Browser को बताता है कि Box का Materials Box से बड़ा होने पर क्या करना चाहिए. और फिर ये Browser Box को Scrollbars को उपयोग करने की अनुमति देता है.
यह Property निम्नलिखित Values में से एक ले सकती है -
| Value | Description |
|---|---|
| visible | यह Content को इसके Element की सीमाओ को Overflow करने की अनुमति देता है. |
| hidden | नेस्टेड एलिमेंट की सामग्री केवल कोन्टाइनिंग एलिमेंट की सीमा पर काट दी जाती है और कोई स्क्रॉलबार दिखाई नहीं देता है. |
| scroll | कोन्टाइनिंग एलिमेंट का आकार नहीं बदलता है लेकिन उपयोगकर्ता को सामग्री देखने के लिए स्क्रॉल करने की अनुमति देने के लिए स्क्रॉलबार जोड़े जाते हैं. |
| auto | उद्देश्य स्क्रॉल के समान होता है लेकिन स्क्रॉलबार केवल तभी दिखाया जाएगा जब सामग्री अतिप्रवाह करती है. |
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Scrollbars Example</title>
</head>
<style type="text/css">
.scroll{
display:block;
border: 1px solid green;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:scroll;
}
.auto{
display:block;
border: 1px solid green;
padding:5px;
margin-top:5px;
width:300px;
height:50px;
overflow:auto;
}
</style>
<body>
<p>Example of scroll value:</p>
<div class="scroll">
Lorem Ipsum has been the industry's standard dummy text ever since
the 1500s, when an unknown printer took a galley of type and scrambled
it to make a type specimen book.
</div>
<br />
<p>Example of auto value:</p>
<div class="auto">
It is a long established fact that a reader will be distracted by
the readable content of a page when looking at its layout.
Lorem Ipsum is simply dummy text of the printing and
typesetting industry.
</div>
</body>
</html>
Output
CSS in Hindi Pseudo
CSS में एक Pseudo Class का उपयोग किसी एलिमेंट की विशेष स्थिति को परिभाषित करने के लिए किया जाता है. इसे अपने States के आधार पर मौजूदा एलिमेंट में एक प्रभाव जोड़ने के लिए CSS Selector के साथ जोड़ा जा सकता है.
उदाहरण के लिए उपयोगकर्ता द्वारा उस पर Hovering समय या किसी लिंक पर जाने पर किसी एलिमेंट के स्टाइल को बदलना. इन सभी को CSS में Pseudo Classes का उपयोग करके किया जा सकता है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<style>
div {
background-color: #7FFF00;
color: white;
padding: 25px;
text-align: center;
}
div:hover {
background-color: blue;
}
</style>
</head>
<body>
<p>Mouse over the div element below to change its background color:</p>
<div>Mouse Over Me</div>
</body>
</html>
Output
CSS in Hindi Box Model
CSS बॉक्स मॉडल एक कंटेनर है जिसमें कई Properties होती हैं जिनमें बॉर्डर, मार्जिन, पैडिंग और सामग्री स्वयं शामिल होती हैं. इसका उपयोग वेब पेजों के डिजाइन और लेआउट को बनाने के लिए किया जाता है. इसका उपयोग विभिन्न Elements के लेआउट को अनुकूलित करने के लिए एक टूलकिट के रूप में किया जा सकता है. वेब ब्राउज़र CSS बॉक्स मॉडल के अनुसार प्रत्येक तत्व को Rectangular बॉक्स के रूप में Present करता है.
इन Properties की अलग अलग Values Define करके आप Element के Layout को Control कर सकते है. CSS Box Model का उपयोग Element की Width और Height को Control करने के लिए किया जाता है.
CSS Box Model Explanation
Margin − इस क्षेत्र में Border और Margin के बीच जगह होती है. मार्जिन क्षेत्र के Dimension margin-box की Width और Margin Box की Height होती हैं. Padding की ही तरह Margin का भी कोई Color नहीं होता है. यह Transparent होता है. Margin Define करने के लिए CSS मे Margin Properties Available होती है.
Border − Content और Padding के चारो तरफ Element की Border होती है. जब तक की आप Border Define नही करते है Border Hidden रहती है. Border Define करने के लिए CSS मे Border Properties Available होती है.
Padding − Content के चारो तरफ कितना Space रहेगा यह Padding द्वारा Define किया जाता है. Padding Define करने के लिए CSS मे Padding Properties Available होती है. आप अपने हिसाब से सभी Sides के लिए Padding एक साथ उपयोग कर सकते है.
Contents − इसमें Text, Image या अन्य मीडिया सामग्री जैसी सामग्री शामिल होती है.
For Example
<!DOCTYPE HTML>
<html>
<head>
<title>Box Model Example</title>
<style>
div {
background-color: lightgrey;
width: 400px;
border: 25px solid red;
padding: 25px;
margin: 25px;
}
</style>
</head>
<body>
<h2>Demonstrating the Box Model</h2>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting</p>
<div>Lorem Ipsum is simply dummy text of the printing and
typesetting industry. Lorem Ipsum has been the industry's standard dummy
text ever since the 1500s, when an unknown printer took a galley of
type and scrambled it to make a type specimen book..</div>
</body>
</html>