CSS Kya Hai




CSS एक Web Designing Language है. इसका उपयोग Website को और भी Attractive बनाने के लिए किया जाता है. CSS के द्वारा आप HTML Tags पर Designing लागू कर सकते है.

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

इस विधि मे आप CSS को HTML Tag मे ही Define कर देते है. ऐसा आप Style Attribute के द्वारा कर सकते है.

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

इस विधि मे आप CSS को HTML Tag मे Define करने की बजाए HTML File के <head> Tag मे <style> Tag की सहायता से Define करते है.

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

इस विधि मे आपकी CSS File और HTML File अलग अलग होती है. HTML File मे आप CSS File को <link> Attribute के द्वारा Add कर सकते है.

CSS से आप Webpages के Presentation को नियंत्रण कर सकते है. CSS आपको Webpage की Design पर पूरा नियंत्रण देती है. CSS से आप Webpage का Text Color, Font Family, Background, Margin, Padding और स्थिति आदि Set कर सकते है.

CSS बहुत ही प्रभावशाली Technology है. इसकी सहायता से आप Complete HTML Page की Presentation को नियंत्रण कर सकते है. CSS Property और Value के Context मे काम करती है. जैसे की यदि आप Web Page का background-color बदलना चाहते है तो background-color Property है और जो आप Value देंगे वो इसकी Value होगी.


property:value;


जैसा की मैने ऊपर भी बताया है Inline Style Sheet मे आप Style Attribute का उपयोग करते है. लेकिन Internal और External CSS के लिए <style> Tag मे Selectors उपयोग किया जाता है. Selector उस Tag, Id या Class का नाम होता है जिस पर आप CSS Apply करना चाहते है.

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

Advantages of CSS

  • CSS को उपयोग करने से आपका समय बचता है. आप एक CSS File बना कर उसे कई HTML Documents पर लागू कर सकते है. आप हर HTML Tag के लिए एक Style Fix कर सकते है और इसे जितने चाहे उतने Webpages पर लागू कर सकते है.

  • CSS के द्वारा Webpage को Maintain करना बहुत ही Simple होता है. उदहारण के लिए आप सभी Headings का यदि Color बदलना चाहते है तो सिर्फ CSS मे Change कीजिये और ये सभी Headings पर लागू हो जायेगा.

  • CSS आपको HTML से अधिक Style Options प्रदान करती है. HTML की तुलना मे आप CSS से अधिक Attractive Webpages बना सकते है.

  • CSS के द्वारा आप एक ही Webpage को विभिन्न Devices के लिए Configure कर सकते है. जैसे की मोबाइल फोन के लिए अलग Styles उपयोग की जा सकती है.

  • HTML Attributes का उपयोग अब बहुत कम हो चूका है. CSS को उपयोग करना अब एक Global Standard बन चूका है.

CSS in Hindi Introduction

CSS का पूरा नाम Cascading Style Sheet है. CSS एक Web Designing Language है इसे आसानी से सिखा जा सकता है.

CSS का उपयोग Web Page को Beautiful बनाने मे किया जाता है. इसकी मदद से आप विभिन Content पर अलग-अलग Style Design को Apply कर सकते है. जैसे की Headings, Paragraphs, Lists आदि.

CSS से आप Web Pages के Text Color, Font Family, Background, Margin, Padding और Position आदि को Set कर सकते है.

CSS के उपयोग से Web Pages को एक Attractive Design मिलता है. HTML और CSS हमेसा साथ मे ही उपयोग किये जाते है.

HTML का उपयोग आप बिना CSS के कर सकते हो लेकिन CSS का उपयोग आप बिना HTML के नही कर सकते हो.

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 के Syntax मे Selectors का महत्वपूर्ण Role होता है. आप किस Element के ऊपर कौन सी Style Apply करना चाहते है ये आप Selectors के द्वारा ही Define करते है. यह CSS के Selectors ही है जो इसे इतनी शक्तिशाली और Efficient Language बनाते है. Selectors आपको HTML के किसी भी Element को Select करके उसकी Presentation को बदलने की Ability प्रदान करते है.

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 के बाद Curly Braces मे हम Property Set करते है जो कि <body> Element के Presentation को Change कर देगी.

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

जब हमको अपने Web Page के सारे Elements मे एक जैसा Rule Apply करना होता है. तब हम इस Selector का उपयोग करते है. इससे HTML Page के सारे Tags एक साथ Select हो जाते है. इसके लिये हम * Symbol का उपयोग करते है.

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 का Name लिख देते है जिसका Design हमको Change करना होता है.

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

Attribute Selector से हम किसी भी Tag के Attribute को Select कर सकते है. Attribute Selector को Square Brackets से Declare किया जाता है.

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

CSS मे एक Colors को Specified करने के लिए Colors Value का उपयोग करते है. आमतौर पर इन्हें किसी Element के Foreground के लिए या तो Element के Background के लिए Colors Set करने के लिए उपयोग किया जाता है. CSS Color का उपयोग और अन्य सजावटी प्रभावों को प्रभावित करने के लिए भी किया जा सकता है .

CSS मे Colors को अधिकतर Specified किया गया है.

  • 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 in Hindi Backgrounds

CSS से किसी भी HTML Element का Background Set किया जा सकता है. Background दो तरह से Set किया जा सकता है. आप चाहे तो Background मे कोई भी Solid Color Set कर सकते है या फिर कोई Image भी Set कर सकते है. Background को Set करने के लिए CSS आपको बहुत सी Properties Provide करती है. आप एक HTML Element का Background Set करने के लिये नीचे लिखी Properties का उपयोग कर सकते है.

  • background-color

  • background-image

  • background-repeat

  • background-attachment

  • background-position

Background Color

CSS से Background Color Set करने के लिए background-color Property का उपयोग कर करते है. इस 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

ऊपर दिए गए उदाहरण मे Paragraph और Heading का Background Color CSS के द्वारा Change किया गया है. इसी प्रकार दूसरे HTML Elements का Background Color भी आप Change कर सकते है.

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

CSS की सहायता से Font Style को Change करने के लिए font-style Property का उपयोग किया जाता है. 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

Font Variant Property से आप Font को 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

Font Size Property का उपयोग Font के Size को Modify करने के लिए किया जाता है. आप Font की Size को Percentage मे भी दे सकते है. इसके अलावा कुछ Keywords जैसे की Small, x-small, xx-small, Medium, Large, x-large, xx-large या Units जैसे px, em आदि का भी उपयोग कर सकते है.

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 के द्वारा आप Webpage के Text को भी Design कर सकते है. इसके लिए CSS आपको बहुत सी Properties Provide करती है. कई बार Designers Font Properties और Text Properties के बीच भ्रमित हो जाते है. इसलिए Text Properties के बारे मे विस्तार से जानने से पहले आइये देखते है की इन दोनो मे क्या अंतर होता है.

Webpage मे Text को Style करने के लिए CSS में बहुत सी Properties दी गई है जिनको आप नीचे विस्तार से देख सकते है.

All CSS Text Properties

Property Description
Color

Color Property का उपयोग Text का Color Set करने के लिए किया जाता है.

Direction

इस Property का उपयोग Text की Direction Set करने के लिए किया जाता है.

letter-spacing

इस Property का उपयोग Text मे Letter-spacing Set करने के लिए किया जाता है.

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

इस Property से आप Text को Decorate करते हो जैसे की Text के नीचे Underline Define करना.

text-transform

इस Property का उपयोग Text का Case Set करने के लिये करते है.

white-space

इस Property का उपयोग Text के Flow और Formatting को Control करने के लिये किया जाता है.

text-shadow

इस Property के द्वारा आप Web Page मे Text की Shadow को प्रदशि॔त कर सकते है.

Text Color

इस Property से आप आसानी से Text मे Color Apply कर सकते है. जब आप किसी HTML Element पर इस Property को Apply करते है तो उस Element के अंदर के सभी Text पर यह Apply हो जाता है. यदि आपने अपने Web Page के सभी Text पर एक ही Color को Set करना है तो आप इस Property को Body Tag पर Apply करना होगा है और आप इसकी Value को तीन तरीके से Specify कर सकते है.

For Example

<!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

Text Direction Property का उपयोग Text की Direction को Set करने के लिए किया जाता है. निचे दी गयी चार Values मे से आप इस Property की कोई भी Value Set कर सकते है.

  • ltr - इस Value के द्वारा आप Text का Direction Left से Right Set करते है.

  • rtl - इस Property के द्वारा आप Text का Direction Right से Left Set करते है.

  • initial - इस Property के द्वारा आप Text का Default direction set कर सकते है.

  • inherit - जब आप ये Value Set करते है तो Text का Direction Parent Element जैसा ही होता है.

For Example

<!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

प्रत्येक Letter के बीच by Default Space को आप Modify कर सकते है. उनके बीच की Spacing कितनी होगी यह आप Letter-spacing Property से Define कर सकते है.

For Example

<!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

इस Property के द्वारा आप Paragraph की First Line का Indent Set कर सकते है. Indent Paragraph की First Line मे Extra Space होता है. जो उस Line को दूसरी Lines से अलग Show करता है. इस Property की Value आप Length मे या फिर Percentage मे दे सकते है. इसका उदाहरण नीचे दिया जा रहा है.

For 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

Text Alignment Property के द्वारा आप Text को Web Page में Alignment Set करने के लिये उपयोग किया जाता है. नीचे दी गयी चार Values मे से आप इस Property की कोई भी Value Set कर सकते है.

  • Left − इस Value से Text Left Side मे Align हो जाता है.

  • Right − इस Value के द्वारा Text Right Side मे Align हो जाता है.

  • Center − यह Text को Center मे Align करती है.

  • Justify − इस Value के द्वारा आप Text को Book की तरह Align कर सकते है.

For Example

<!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

Text Decoration Property से आप Text के Decoration को Control कर सकते हो जैसे की Strike Throughs, Underlining, Overlining आदि. नीचे दी गयी चार Values मे से आप इस Property की कोई भी Value Set कर सकते है.

  • None - इस Value से Text पर कोई भी Decoartion नही रहता है.

  • Underline - इस Value को Set करने से Text के नीचे Line Appear हो जाती है.

  • Overline - इस Value को Apply करने पर Text के ऊपर Line Appear हो जाती है.

  • Line-through - इस Value को उपयोग करने पर Text को काटती हुई बीच से Line खींच जाती है.

<!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

आप अपनी Website के Text के पीछे Shadow Add करके उसको और भी Attractive बना सकते हो. ऐसा करने के लिए आपको Text Shadow Property का उपयोग करना होता है. इसमे आपको चार Type की Values को एक साथ डालना होता है. जिसमे से पहली Value Horizontal Shadow की Size और दूसरी Verticle Shadow की Size और तीसरी blur-radius और चौथी Value Shadow की Color को Define करती है.

For Example

<!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 की Width, उसका Type Dotted, Dashed और उसका Color को Define कर सकते है. इन Attributes का उपयोग करके किसी भी Image अपने Web Page के लिये Optimize कर सकते है. Border की Width के बाद Border के Type को 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 होती है

Border का Type Define करने के बाद आप उसका Color Define करते है. Color का आप नाम भी दे सकते है और इसे Hex Code के रूप मे भी Define कर सकते है.

Images की Border से Related CSS आपको border-radius Property भी Provide करती है. जिसकी मदद से आप चाहे तो Images को Round बना सकते है. इस Property की Value आप % मे Define करते है.

<!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 कर सकते है. और Image की Height को आप Pixels मे भी Define कर सकते है और % में भी 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 कर सकते है. 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 की Sharpness और Clarity को 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

किसी भी Information को Structured Form मे Represent करने के लिए Tables का उपयोग किया जाता है. HTML आपको Table Create करने के लिए Tags प्रदान करती है. लेकिन अगर Designing Part की तरफ देखे तो आप HTML के द्वारा Tables को कुछ खास Design नही कर सकते है. लेकिन आपको Frustrated होने की कोई जरुरत नही है क्योंकि CSS के द्वारा आप Tables पर भी Styles Apply कर सकते है. इसके लिए CSS आपको पांच Properties प्रदान करती है.

  • border-collapse

  • border-spacing

  • caption-side

  • empty-cells

  • table-layout

इन Properties के साथ दूसरी Common Properties को उपयोग करके आप Tables को Design कर सकते है. आइये इन सभी Properties के बारे मे विस्तार से जानने का प्रयास करते है.

Border Collapse Property

HTML Tables मे सभी Cells की Borders Merged होती है. लेकिन अगर आप चाहे तो हर Table Cell को अलग करते हुए उनकी Borders को Separately Present कर सकते है. इसके लिए आप border-collapse Property उपयोग करते है. इस Property की दो Possible Values होती है.

पहली Value Collapse होती है. जब आप इस Value को Set करते है तो सभी Cells की Border Collapse हो जाती है और सभी Cells एक ही Border को उपयोग करते है. इस Property की दूसरी Value Separate होती है. जब आप इस Value को Set करते है तो हर Table Cell की Border Separately Represent होती है.

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

इस Property से आप किसी भी Table के Cells के बीच के Space को Define कर सकते है. इस Space को आप Horizontally और Vertically दोनो तरह से Define कर सकते है. इस Property की Value 1 और 2 हो सकती है. जब आप 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

इस Property के द्वारा आप Table का Caption कँहा Show होगा यह Define कर सकते है. लेकिन ये Property केवल तब ही काम करती है जब आप Table के अंदर <caption> Tag का उपयोग करते है. <caption> Tag Table का Caption Define करने के लिए उपयोग किया जाता है. इस Property की आप दो Values Define कर सकते है. पहली Value Top होती है. जिससे Caption Table के Top पर Show होता है. दूसरी Value आप Bottom दे सकते है इससे Caption Bottom मे Show होता है.

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

इस Property के द्वारा आप Define कर सकते है की Table का Layout सभी Browsers और Windows मे Same रहेगा या फिर Automatically Change होगा. इस Property की दो Values हो सकती है. एक Value आप Fixed Define कर सकते है. जब आप ये Value Define करते है तो Table का Layout सभी Browsers मे Fixed रहता है. दूसरी Value आप Auto Define कर सकते है जब आप ये Value Define करते है तो Table का Layout Browsers के According Automatically Change हो जाता है.

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

यदि आप पूरी Border का Color Change करना चाहते है तो ऐसा आप Border Color Property का उपयोग करके कर सकते है. इस Property की Value आप Plain English मे भी दे सकते है और Hex मे भी दे सकते है. यह एक Attractive Web Page को बनाने मे सहायता करता है.

अगर आप पूरे 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 की Default Width उपयोग नही करना चाहते है और उसे Change करना चाहते है तो ऐसा आप Border Width Property के द्वारा कर सकते है. इस Property के द्वारा आप अपने According Border की Width Customize कर सकते है. इस Property की Value आप Pixels मे देते है.

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 किया जाता है.

Elements की Padding Define करने के लिए CSS आपको चार Properties Provide करती है. इन Properties से हर Side की Padding आप Independently Define कर सकते है. यदि आप सभी Sides की Padding एक जैसी रखना चाहते है तो इसके लिए CSS आपको एक और Property Provide करती है. इस Property से आप सभी Sides की Padding एक Statement मे ही Define कर देते है. Padding को Pixels मे Define किया जाता है और Padding की Value Negative नहीं दी जा सकती है.

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

CSS Margin Properties Elements के चारो तरफ Space Create करने के लिए उपयोग की जाती है. Margin Properties Elements के बाहर की तरफ कितना Space रहेगा ये तय करती है. CSS आपको चार Margin Properties Provide करती है.

इन Properties से आप चारो Sides की Margin Define कर सकते है. CSS आपको एक Shorthand Property भी Provide करती है. जिससे आप इन सभी Properties के लिए Values एक ही Statement मे Define कर सकते है. इन सभी Properties की Value आप चार Type से Define कर सकते है.

यदि आप किसी भी 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 के द्वारा आप Element के Top का Margin Set करते है. यह Property Define करती है की Element के ऊपर Border की बाहर की तरफ कितना Space रहेगा.

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 के द्वारा आप Element के Bottom की तरफ का Margin Set करते है. आप जितनी 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 Element के Left की तरफ Margin Set करने के लिए उपयोग की जाती है. जब आप इस 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 के द्वारा आप Element के Right तरफ का Margin Set करते है. इससे 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 यह Specify करती है की जब किसी Element <body>,<div>,<p> और आदि का Content Text, Image और Video आदि उस Element मे Fit ना हो पाए तो क्या करना चाहिये. Overflow Property को समझने से पहले ये समझना अनिवार्य है की Overflow क्या होता है.

मान लीजिये आपने एक Div Create किया है. इस Div की Height 200px है और Width 400px है. अब आप इस Div मे एक ऐसी Image को Add करते है. जिसकी Height 400px है और Width 300px है. क्योंकि Image की Height Div की Height से अधिक है इसलिए इस परिस्थिति मे Image Div की Border को Overflow कर जायेगी और Border के बाहर दिखने लगेगी. यही परिस्थिति Overflow कहलाती है. इसी परिस्थिति को Handle करने के लिए CSS Overflow Property Provide करती है.

Overflow की Condition को कई प्रकार से Control किया जा सकता है. जैसे की जिस Element से Content Overflow हो रहा है उस पर Scroll Apply किया जा सकता है. यदि Overflow हो रहा Content Important नहीं है तो उसे Hide भी किया जा सकता है और Clipping करके सिर्फ Element की Border के अंदर के Cotent को ही Show किया जा सकता है. इसके लिए आप CSS Overflow Property की अलग अलग Values उपयोग करते है.

Value Description
visible

यह Content को इसके Element की सीमाओ को Overflow करने की अनुमति देता है.

hidden

जब Overflow Property की Value Hidden Define की जाती है तो जो Content Border के बाहर Overflow हो रहा है वो Hide हो जाता है. सिर्फ वही Content Show होता है जो Border के अंदर है.

scroll

जब Overflow Property की Value आप Scroll देते है तो जिस Element मे Content है उस Element मे Scroll Add हो जाता है. Content Border से बाहर नहीं जाता है बल्कि Content को पूरा देखने के लिए उपयोगकर्ता को Scrolling करनी पड़ती है.

auto

जब आप CSS Overflow Property की Value Auto Define करते है तो Scroll Value की तरह ही Element मे Scrolling Add हो जाती है.

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 Classes Elements की Special States को Design करने के लिए उपयोग की जाती है जो Document Tree मे Available नही है और जिन्हे Regular CSS Selectors द्वारा नही Target किया जा सकता है.

किसी भी HTML Document का Document Tree Web Browser द्वारा Automatically Create किया जाता है. यह Document Tree उस HTML Document मे Developer द्वारा Define किये गए सभी HTML Elements से बना होता है जिन्हे CSS द्वारा आसानी से Access और Design किया जा सकता है.

लेकिन कई बार कुछ ऐसी Conditions और States होती है. जिनके बारे मे Document Tree मे कोई Information नही होती है. इन्ही Conditions और States को Target करने के लिए Pseudo Classes उपयोग की जाती है.

उदाहरण के लिए अगर आप Mouse Hover किये जाने पर किसी Paragraph या Div के Color को Blue करना चाहते है. लेकिन ऐसा आप किसी Normal CSS Selector द्वारा नही कर सकते है. क्योंकि यह एक Special State जो User द्वारा Generate होती है और Document Tree मे इससे Related कोई Information नही होती है.

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 Box Model के अनुसार हर HTML Element एक Rectangular Box होता है. यह Rectangular Box उस Element के Content, Padding, Border और Margin से बना होता है. इसे CSS मे Box Model के नाम से जाना जाता है.

CSS Box Model Webpages मे Elements के Layout का Common Model है. आप जो भी Elements Webpage मे Add करते है जैसे की Links, Images, Paragraphs, Buttons, Text आदि सभी का Layout इस Model के अनुसार होता है.

जैसा की मैने आपको पहले बताया CSS Box Model Content, Padding, Border और Margin से मिलकर बना होता है. ये सभी Box Model की Properties कहलाती है. ये सभी Properties सभी HTML Elements के लिए Common होती है.

इन Properties की अलग अलग Values Define करके आप Element के Layout को Control कर सकते है. CSS Box Model का उपयोग Element की Width और Height को Control करने के लिए किया जाता है.

CSS Box Model Explanation

  • Margin − किसी Element का Margin Border के चारो तरफ Space के रूप मे Define किया जाता है. 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 एक साथ Define कर सकते है या फिर अलग अलग Sides के लिए अलग अलग Paddings भी Define कर सकते है.

  • Contents − किसी भी HTML Element का Content हमेशा Show होता है. बाकी Properties Hidden होती है. Content क्या होगा यह CSS द्वारा Control नही किया जा सकता है. Content HTML Elements द्वारा ही Define किया जाता है.

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>

Output