Learn CSS
Introduction to CSS in Hindi
CSS एक designing language है। इसका इस्तेमाल webpages को और भी beautiful बनाने के लिए किया जाता है। CSS के द्वारा आप HTML tags पर designing apply कर सकते है। CSS आप 3 तरह से apply कर सकते है।
* Inline - इस method में आप CSS को HTML tag में ही define कर देते है। ऐसा आप style attribute के द्वारा करते है।
* Internal - इस method में आप CSS को HTML tag में define करने की बजाए HTML file के <head> tag में script tag की मदद से define करते है।
* External - इस method में आपकी CSS file और HTML file अलग अलग होती है। HTML file में आप CSS file को <link> attribute के द्वारा add करवाते है।
CSS से आप webpages के presentation को control कर सकते है। CSS आपको webpage की design पर पूरा control देती है। CSS से आप webpage का text color, font family, background, margin, padding और position आदि set कर सकते है।
CSS बहुत ही powerful technology है। इसकी मदद से आप complete HTML page की presentation control कर सकते है। CSS property और value के context में काम करती है। जैसे की यदि आप web page का background-color change करना चाहते है तो background-color property है और जो आप value देंगे वो इसकी value होगी।
property:value
जैसा की मैने ऊपर बताया inline style sheet में आप style attribute यूज़ करते है और internal और external CSS के लिए <script> tag के साथ selector यूज़ किये जाते है। Selector उस tag का नाम होता है जिस पर आप CSS apply करना चाहते है।
Advantages of CSS (Cascading Style Sheet)
* CSS को यूज़ करने से आपका time बचता है। आप एक CSS file बना कर उसे कई HTML documents पर apply कर सकते है। आप हर HTML tag के लिए एक style fix कर सकते है और इसे जितने चाहे उतने webpages पर apply कर सकते है।
* जब आप HTML attributes के द्वारा webpage को decorate करते है तो हर element के लिए अलग से attribute और value define करनी पड़ती है। ऐसा करने से code बहुत अधिक हो जाता है और pages धीरे load होते है। लेकिन जब आप CSS यूज़ करते है तो उस webpage में यूज़ होने वाले सभी tags के लिए आप एक बार ही styles define करते है। ऐसा करने से code कम रहता है और आपके pages fast load होते है।
* CSS के द्वारा webpage को maintain करना बहुत ही आसान होता है। उदहारण के लिए आप सभी headings का यदि color change करना चाहते है तो सिर्फ CSS में change कीजिये और ये सभी headings पर apply हो जायेगा।
* CSS आपको HTML से अधिक style options provide करती है। HTML के comparison में आप CSS से अधिक attractive webpages design कर सकते है।
* CSS के द्वारा आप एक ही webpage को multiple devices के लिए configure कर सकते है। जैसे की mobile phones के लिए अलग styles यूज़ की जा सकती है।
* अब HTML attributes का उपयोग बहुत कम हो चूका है। CSS को यूज़ करना अब एक global standard बन चूका है।
Applying CSS (Cascading style sheet)
1. Inline style sheet
निचे दिए गए उदाहरण को देखिये इसमें body tag के अंदर style attribute define किया गया है। इसके बाद style attribute में property और value define की गई है। इसे inline style sheet कहते है।
2. Internal style sheet
Internal style sheet में आप styles को HTML के अंदर define नहीं करते है। Head section में <script> tag define किया जाता है। इसके बाद selectors को यूज़ करते हुए आप styles को define करते है। इसमें HTML code और CSS code को एक ही document में define किया जाता है।
3. External style sheet
External style sheet के concept में CSS किसी दूसरी file में होती है। उस file को <link> tag द्वारा HTML file पर apply किया जाता है। External style sheet से आपको बार बार CSS लिखने की जरुरत नहीं होती है। आप एक ही CSS file को कई HTML files पर apply कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
Introduction to CSS selectors
CSS के syntax में selectors का important role होता है। आप किस element के ऊपर कौनसी style apply करना चाहते है ये आप selectors के द्वारा ही define करते है। ये CSS के selectors ही है जो इसे इतनी powerful और efficient language बनाते है। Selectors आपको HTML के किसी भी element को select करके उसकी presentation को change करने की ability provide करते है। इससे पहले की में आपको selectors के बारे में और बताऊँ आइये पहले CSS के syntax को समझ लेते है।
ऊपर दिए गए उदाहरण में h1 एक selector है। ये selector HTML के h1 tag पर apply हो रहा है इस तरह के selectors को element type selectors कहा जाता है। यँहा पर HTML tag को ही selector की तरह यूज़ किया गया है। Selector के बाद curly brackets में color property और उसकी value को define किया गया है। ये property heading के text को red में change कर देती है।
1. Types of selectors
CSS के द्वारा कई तरह के selectors provide किये गए है जिन्हें यूज़ करके आप और भी accurately काम कर सकते है। इन selectors के बारे में detail से निचे दिया जा रहा है।
2. Element type selectors
इस तरह के selectors किसी एक HTML tag पर apply होते है। इन selectors का नाम उसी HTML tag का नाम होता है। जब आपको किसी एक particular HTML tag पर कोई style apply करने की आवश्यकता हो तो आप इस तरह के selectors को यूज़ कर सकते है। इसका उदाहरण निचे दिया जा रहा है।
3. Universal selector
Universal selector को * से represent किया जाता है। इस selector में define की गई styles सभी HTML elements पर apply हो जाती है। लेकिन याद रहे ये तभी काम करता है जब उस element के लिए style अलग से define न की गई हो। यदि उस element के लिए अलग से style define की गई है या फिर वह element inline style sheet यूज़ करता है तो इस selector का कोई effect उस element पर नहीं होगा। इसका उदाहरण निचे दिया गया है।
यँहा पर universal selector h1 और p दोनों ही tags पर apply होगा और इनका color blue होगा।
4. Sub-element selector
यदि आप किसी element पर तब CSS apply करना चाहते है जब वह किसी दूसरे element के अंदर आये तो इसके लिए आप sub-element selector यूज़ कर सकते है। सबसे पहले आप element का नाम देते है इसके बाद space देकर उस element का नाम लिखते है जिस पर आप styles apply करना चाहते है। इसका उदाहरण निचे दिया जा रहा हैं।
इस उदाहरण में <p> के sub-element <span> tag पर style apply हो रही है और उसका color orange हो रहा है।
5. Class selectors
हर HTML element एक class attribute define कर है। इसमें में class का नाम दिया जाता है। आप चाहे तो styles class attribute के base पर भी apply की जा सकती है। इसके लिए आप (.) operator लगाकर class का नाम selector की तरह लिखते है। जो जो elements उस class से belong करते है उन सभी पर define की गई styles apply हो जाती है। आइये इसे एक उदाहरण से समझते है।
6. ID selectors
Class attribute की तरह ही आप styles को किसी particular ID के लिए भी define कर सकते है। जिन HTML elements की ID इस ID से match करती है दी गई styles उन्हीं पर apply हो जाती है। किसी भी id पर styles apply करने के लिए आप # का उपयोग करते है। इसका उदाहरण निचे दिया जा रहा है।
7. Attribute selectors
HTML tags के जैसे ही आप चाहे तो किसी HTML tag के attribute पर भी styles apply कर सकते है। इन selectors का उपयोग form tag के sub-elements के लिए किया जाता है। आप input type के according दूसरे attributes को छोड़ते हुए किसी एक attribute को target कर सकते है। इसका उदाहरण निचे दिया गया है।
ऊपर दी गई CSS style सिर्फ उसी image tag पर apply होगी जिसमे alt attribute की value myPic है।
8. Group Selectors
आप चाहे तो एक साथ एक से ज्यादा selectors भी use कर सकते है। इसके लिए आप सभी selectors को comma से separate करते है। Curly brackets में define की गयी styles सभी selectors पर apply होती है। आइये इसे एक उदाहरण से समझते है।
Setting backgrounds with CSS (color & Image)
Introduction to CSS background properties
CSS के द्वारा किसी भी HTML element का background set किया जा सकता है। उदाहरण के लिए आप headings को highlight करना चाहते है ऐसी situation में आप CSS के द्वारा सभी headings का background set कर सकते है।
Background 2 तरह से set किया जा सकता है। आप चाहे तो background में कोई solid color set कर सकते है या फिर कोई image भी set कर सकते है। Background को set करने के लिए CSS आपको बहुत सी properties provide करती है। आइये इनके बारे में जानने का प्रयास करते है।
1. Setting background color
CSS के द्वारा background color set करने के लिए आप background-color property यूज़ करते है। इस property की value आप color का नाम या hex code दे सकते है। आइये इसे एक उदाहरण से समझते है।
<html>
<head>
<title>Setting background color</title>
</head>
<head>
<title>Setting background color</title>
</head>
<body>
<h1>Indian economy </h1>
<p> Indian economy is growing very fast. India is 7th richest country in the world</p>
<p> Indian economy is growing very fast. India is 7th richest country in the world</p>
</body>
</html>
ऊपर दिए गए उदाहरण में paragraph का background color CSS के द्वारा change किया गया है। इसी प्रकार दूसरे HTML elements का background color भी आप change कर सकते है। आइये अब CSS के द्वारा background में image set करना सीखते है।
2. Setting image background
CSS के द्वारा image को background के रूप में set किया जा सकता है। इसके लिए background-image property यूज़ की जाती है। इस property की value के रूप में image का url दिया जाता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>setting image background with css </title>
</head>
<head>
<title>setting image background with css </title>
</head>
<body>
<h1>Image background</h1>
<p>There is an image behind this text. </p>
</body>
</html>
कई बार ऐसा हो सकता है की आपकी image बहुत छोटी हो और उससे पूरा background fill नहीं हो रहा हो। ऐसी situation में आप background-image property के बाद background-repeat property यूज़ कर सकते है। इस property की repeat और no-repeat 2 values होती है। जब आप repeat value define करते है तो आपकी image repeat हो जाती है और pure background को fill कर देती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>background repeat property</title>
</head>
<head>
<title>background repeat property</title>
</head>
<body>
<h1>Image background repeat example </h1>
<p> This is an example of background image repeating. Background this text
is an image and it is repeating it self so it can fill the entire background</p>
is an image and it is repeating it self so it can fill the entire background</p>
</body>
</html>
Background image repeat करने के अलावा आप चाहे तो image को background में किसी certain position पर set कर सकते है। उदाहरण के लिए आप image को left से 50px छोड़कर set करना चाहते है तो ऐसा करना possible है। ऐसा background-position property के द्वारा किया जाता है। में आपको बता दू की इस property को आप background-image property के साथ यूज़ करते है।
Background position property की आप 2 values दे सकते है। पहली value left side से image की दुरी define करती है। और दूसरी value top से image की दुरी define करती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
CSS file
h1
{
background-image(/images/flowers/rose.jpg');
background-position:100px 50px;
}
{
background-image(/images/flowers/rose.jpg');
background-position:100px 50px;
}
* HTML file
<html>
<head>
<title>Background position demo</title>
</head>
<head>
<title>Background position demo</title>
</head>
<body>
<h1> Rose </h1>
<p>Roses are most amazing flowers according to me. I gave my mother rose on mother's day.</p>
</body>
</html>
एक और property CSS के द्वारा provide की गई है जिसे आप background images के साथ यूज़ कर सकते है। इस property के द्वारा आप background image को fixed या scroll-able बना सकते है। ये property background-attachment है। इस property की fixed और scroll 2 values हो सकती है। Fixed value से image fixed रहती है उसे scroll नहीं किया जा सकता है। और scroll value से image को scroll-able बनाया जा सकता है। इसका उदाहरण निचे दिया जा रहा है।
* CSS file
p
{
background-image(/images/flowers/orchid.jpg);
background-attachment:scroll;
}
{
background-image(/images/flowers/orchid.jpg);
background-attachment:scroll;
}
* HTML file
<html>
<head>
<title>Background attachment demo</title>
</head>
<head>
<title>Background attachment demo</title>
</head>
<body>
<h1> This is a heading </h1>
<p> This is a paragraph. And behind this paragraph there is an image background. This image background is scroll enabled.</p>
</body>
</html>
Styling fonts
Introduction to CSS font properties
CSS के द्वारा आप fonts की size, style, weight, line-height आदि को change कर सकते है। इन सभी changes के लिए अलग से एक एक property बनायीं गई है। आइये इन properties के बारे में जानते है।
1. font-family property
किसी भी HTML element के font की family set करने के लिए आप font-family property को यूज़ करते है। इस property की value के रूप में आप किसी भी font family का नाम देते है। निचे कुछ font families की list दी जा रही है जिन्हें आप value के रूप में इस्तेमाल कर सकते है।
* Times New Roman
* Verdana
* Arial
* Courier
* serif
आइये font family property को एक उदाहरण से समझने का प्रयास करते है।
1. CSS file
p
{
font-family:Arial;
}
{
font-family:Arial;
}
* HTML file
<html>
<head>
<title>Font Family Property Demo</title>
</head>
<head>
<title>Font Family Property Demo</title>
</head>
<body>
<p>This is an example of CSS font-family property. This font will be shown in Arial. </p>
</body>
</html>
* HTML file
<html>
<head>
<title>Font Family Property Demo</title>
</head>
<head>
<title>Font Family Property Demo</title>
</head>
<body>
<p>This is an example of CSS font-family property. This font will be shown in Arial. </p>
</body>
</html>
2. font-style property
CSS की मदद से font style change करने के लिए आप font-style property यूज़ करते है। इस property की values normal, italic और oblique हो सकती हैं। इसका उदाहरण निचे दिया जा रहा है।
CSS file
h1
{
font-style:italic;
}
{
font-style:italic;
}
* HTML file
<html>
<head>
<title>Font style Property Demo </title>
</head>
<head>
<title>Font style Property Demo </title>
</head>
<body>
<h1>This heading will be in italic</h1>
<p>This is an example of font style property and this is a paragraph</p>
<p>This is an example of font style property and this is a paragraph</p>
</body>
</html>
3. font-variant property
इस property की मदद से आप font के variants define कर सकते है। इस property की मदद से आप fonts को capital letters में show कर सकते है। इस property की values normal और small-caps हो सकती है। इसका उदाहरण निचे दिया गया है।
CSS file
p
{
font-variant:small-caps;
}
{
font-variant:small-caps;
}
* HTML file
<html>
<head>
<title>font variant property example</title>
</head>
<head>
<title>font variant property example</title>
</head>
<body>
<p> This paragraph will be in capital letters. This is an example of font-variant</p>
</body>
</html>
4. font-weight property
इस property से आप font का weight define कर सकते है। ये property define करती है की font कितना bold होगा। इस property की values bold, bolder और lighter हो सकती है। आप कोई custom font weight भी define कर सकते है। इसका उदाहरण आगे दिया गया है।
CSS file
table
{
font-weight:600px;
}
{
font-weight:600px;
}
* HTML file
<html>
<head>
<title>font-weight property</title>
</head>
<head>
<title>font-weight property</title>
</head>
<body>
<table>
<tr>
<td>Hello</td><td>World!</td>
</tr>
</table>
<tr>
<td>Hello</td><td>World!</td>
</tr>
</table>
</body>
</html>
5. font-size property
इस property के द्वारा आप किसी भी HTML element के font का size change कर सकते है। इस property की value आप pixels में भी दे सकते है और % में भी दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
* CSS file
h1
{
font-size:20px;
}
{
font-size:20px;
}
p
{
font-size:12px;
}
{
font-size:12px;
}
* HTML file
<html>
<head>
<title>font size property demo </title>
</head>
<head>
<title>font size property demo </title>
</head>
<body>
<h1> This is heading and its size will be more than paragraph</h1>
<p>This is a paragraph and its size will be less than heading</h1>
</body>
</html>
6. font-size-adjust property
इस property के द्वारा आप font की size को adjust कर सकते हैं। इस property के द्वारा font की height ज्यादा किया जा सकता है। इस property की value कोई भी number हो सकता है। इसका उदाहरण निचे दिया जा रहा है।
* CSS file
p
{
font-size-adjust:1;
}
{
font-size-adjust:1;
}
* HTML file
<html>
<head>
<title>font size adjust property demo</title>
</head>
<head>
<title>font size adjust property demo</title>
</head>
<body>
<p> This is a paragraph and its font height will be 1</p>
</body>
</html>
7. font-stretch property
इस property के द्वारा आप font को stretch कर सकते है। इस property की value normal, wider, narrower और condensed आदि हो सकती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
* CSS file
p
{
font-stretch:wider;
}
{
font-stretch:wider;
}
* HTML file
<html>
<head>
<title>font stretch property demo</title>
</head>
<head>
<title>font stretch property demo</title>
</head>
<body>
<p>This font is stretched wider than normal fonts</p>
</body>
</html>
CSS Text Properties
Introduction to CSS text properties
CSS के द्वारा आप webpage के text को भी design कर सकते है। इसके लिए CSS आपको बहुत सी properties provide करती है। कई बार designers font properties और text properties के बीच confuse हो जाते है। इसलिए text properties के बारे में detail से जानने से पहले आइये देखते है की इन दोनों में क्या difference होता है।
Fonts shape को represent करते है, जैसे की अलग अलग font families (Times New Roman आदि) की shapes अलग अलग होती है। अलग अलग shapes के साथ जो आप character draw करते है वे text(a,b,c,d @,# आदि) कहलाते है।
Webpage में text को style करने के लिए CSS आपको निचे दी गयी properties provide करती है।
* color
* text-align
* text-decoration
* text-transform
* text-indent
* text-direction
* text-shadow
* word-spacing
* letter-spacing
आइये अब इन properties के बारे में detail से जानने का प्रयास करते है।
1. color property
ये property text का color set करने के लिए यूज़ की जाती है। इसे different HTML elements पर apply कर सकते है। यदि आप इसे <body> tag पर apply करते है तो जो value आप इस property की देते है वही color webpage के सारे text का हो जाता है। इस property की value के रूप में आप color का नाम या उसकी hex value दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
p { color:blue; }
ऊपर दिए गए उदाहरण में सभी paragraph text का color blue set किया गया है।
ऊपर दिए गए उदाहरण में सभी paragraph text का color blue set किया गया है।
2. text-align
इस property के द्वारा आप text का webpage में alignment set करते है। इन property की आप निचे दी गयी 4 में से कोई भी एक value define कर सकते है।
* left - इस value से text left side में align हो जाता है।
* right - इस value के द्वारा text right side में align हो जाता है।
* justify - इस value के द्वारा आप text को book की तरह align कर सकते है।
* center - ये text को center में align करती है।
* right - इस value के द्वारा text right side में align हो जाता है।
* justify - इस value के द्वारा आप text को book की तरह align कर सकते है।
* center - ये text को center में align करती है।
इसका उदाहरण निचे दिया जा रहा है।
p {text-align:center}
ऊपर दिए गए उदाहरण में webpage के सभी paragraphs का alignment center set किया गया है।
ऊपर दिए गए उदाहरण में webpage के सभी paragraphs का alignment center set किया गया है।
3. text-decoration
इस property के द्वारा आप text को decorate कर सकते है। जैसे की text के निचे underline define करना आदि। निचे दी गयी 4 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 खींच जाती है।
निचे इसका उदाहरण दिया जा रहा है।
p {text-decoration:underline;}
ऊपर दिए गए उदाहरण में सभी paragraphs के text को underline किया गया है।
4. text-transform
इस property के द्वारा आप text का case set कर सकते है। आप चाहे तो text को upper case में show कर सकते है या फिर lower case में show कर सकते है। निचे दी गयी 4 values में से आप कोई भी value इस property की set कर सकते है।
* none
* uppercase
* lowercase
* capitalize
इस property का उदाहरण निचे दिया जा रहा है।
p {text-transform:uppercase;}
ऊपर दिए गए उदाहरण में सभी paragraphs के text को underline किया गया है।
ऊपर दिए गए उदाहरण में सभी paragraphs के text को underline किया गया है।
5. text-indent
इस property के द्वारा आप paragraph की first line का indent set कर सकते है। Indent paragraph की first line में extra space होता है जो उस line को दूसरी lines से अलग show करता है। इस property की value आप length में या फिर percentage में दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
p {text-indent:20px;}
ऊपर दिए गए उदाहरण में webpage के सभी paragraph की first line का indent 20 pixels set किया गया है।
ऊपर दिए गए उदाहरण में webpage के सभी paragraph की first line का indent 20 pixels set किया गया है।
6. text-direction
इस property के द्वारा आप text का direction set करते है। यानी की आप text को किस तरफ से लिखना शुरू करना चाहते है। ये बाँयी और से दाँयी और भी हो सकता है और दाँयी और से बाँयी और भी हो सकता है। निचे दी गयी 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 जैसा ही होता है।
इसका उदाहरण निचे दिया जा रहा है।
p {text-direction:rtl;}
ऊपर दिए गए उदाहरण में webpage के paragraphs का direction right से left set किया गया है।
ऊपर दिए गए उदाहरण में webpage के paragraphs का direction right से left set किया गया है।
7. text-shadow
इस property के द्वारा आप webpage में text की shadow display कर सकते है। इस property की value के तौर पर आप सबसे पहले horizontal shadow की size define करते है। ये size आप pixels में define करते है। इसके बाद आप vertical shadow define करते है। और आखिर में वो color आप define करते है जिसकी shadow आप display करना चाहते है। इसका उदाहरण निचे दिया गया है।
h1 { text-shadow: 5px 3px blue;}
ऊपर दिए गए उदाहरण में webpage की headings की shadow blue color के द्वारा set की गयी है।
ऊपर दिए गए उदाहरण में webpage की headings की shadow blue color के द्वारा set की गयी है।
Styling images with CSS
Introduction to CSS image properties
CSS आपको कुछ properties provide करती है जिनकी मदद से आप images को optimize कर सकते है। ये properties images की height, width, border और opacity आदि define करती है।
* image border
* image height
* image width
* image opacity
* image radius
आइये इन सभी properties के बारे में detail से जानने का प्रयास करते है।
1. Image border property
Border property के द्वारा आप किसी भी image की border की चौड़ाई, उसका type (dotted, dashed आदि) और उसका color define कर सकते है। इन attributes को define करके आप किसी भी image को अपने webpage के लिए optimize कर सकते है।
Border property define करने का syntax नीचे दिया जा रहा है।
border : width | type | color;
Border की चौड़ाई आप pixels में देते है। जैसे की
border:2px;
Border की चौड़ाई के बाद border का type define किया जाता हैं। CSS में borders के 4 basic types होते है।
* dotted - Border dotes की form में represent होती है।
* dashed - Border dashes की form में represent होती है।
* double - Border double lines के रूप में show होती हैं।
* solid - Border एक solid line के रूप में show होती है।
* double - Border double lines के रूप में show होती हैं।
* solid - Border एक solid line के रूप में show होती है।
Border का type define करने के बाद आप उसका color define करते है। Color का आप नाम भी दे सकते है और इसे hex code के रूप में भी define कर सकते है।
Images के border से related CSS आपको एक और property provide करती है जिसकी मदद से आप चाहे तो images को round बना सकते है। इस property की value आप % में define करते है। यदि आप images बनाना चाहते है तो आपको value 50% देनी चाहिए। जैसे की
border-radius:50%;
Border property का उदाहरण निचे दिया जा रहा है।
* CSS file
img
{
border : 1px solid blue;
border-radius:50%; //it will make the image round than square.
}
{
border : 1px solid blue;
border-radius:50%; //it will make the image round than square.
}
h1{color:red;}
HTML file
<html>
<head>
<title>Image border property demo</title>
</head>
<head>
<title>Image border property demo</title>
</head>
<body>
<h1> Lotus is my favorite flower.</h1>
<img src="/images/flowers/lotus.jpg">
<img src="/images/flowers/lotus.jpg">
</body>
</html>
2. Image height property
Height property के द्वारा आप image की height define करते है। Image की height आप pixels में भी define कर सकते है और % में भी define कर सकते है। जब आप % में height define करते है तो image container के according उतनी % height ले लेती है। जैसे की यदि 50% height define करते है तो image window की 50% height ले लेगी।
Image height property का उदाहरण नीचे दिया जा रहा है।
* CSS file
h1{color:red;}
img
{
height:200px;
//height:50%; Height define in Percentage
}
{
height:200px;
//height:50%; Height define in Percentage
}
* HTML file
<html>
<head>
<title>Image height property demo</title>
</head>
<head>
<title>Image height property demo</title>
</head>
<body>
<h1>Life is not bed of roses</h1>
<img src="images/flowers/rose.jpg">
<img src="images/flowers/rose.jpg">
</body>
</html>
3. Image width property
Width property के द्वारा आप images की width define करते है। Width आप pixels में भी define कर सकते है और % में भी define कर सकते है। जैसा की मैने ऊपर बताया जब आप % में width define करते है तो image container की उतनी % width में show होती है।
Image width property का उदाहरण निचे दिया जा रहा है।
* CSS file
h1{color:pink;}
img
{
height:200px;
width:300px;
//width:50%; width defined in percentage
{
height:200px;
width:300px;
//width:50%; width defined in percentage
}
* HTML file
<html>
<head>
<title>Image width property demo</title>
</head>
<head>
<title>Image width property demo</title>
</head>
<body>
<h1>Horses are faster than men</h1>
<img src="images/animals/horse.jpg">
<img src="images/animals/horse.jpg">
</body>
</html>
4. Image opacity property
Opacity property के द्वारा आप images की sharpness और clarity define कर सकते है। इस property की value 0.1 से लेकर 1 तक हो सकती है। जैसे जैसे आप value को बढ़ाते जाते है तो images उतनी है clear visible होती जाती है। 0.1 value में images सबसे दुँधली और 1 value से images सबसे clear show होती है। Opacity property का उदाहरण निचे दिया जा रहा है।
* CSS file
h1{color:green;}
img
{
opacity:0.6;
}
{
opacity:0.6;
}
* HTML file
<html>
<head>
<title>image opacity property</title>
</head>
<head>
<title>image opacity property</title>
</head>
<body>
<h1>Lion is king of all animals.</h1>
<img src="/images/animals/lion.jpg">
<img src="/images/animals/lion.jpg">
</body>
</html>
Styling tables with CSS
Introduction to CSS table properties
किसी भी information को structured form में represent करने के लिए tables का प्रयोग किया जाता है। HTML आपको table create करने के लिए tags provide करती है। लेकिन अगर designing part की तरफ देखे तो आप HTML के द्वारा tables को कुछ खास design नहीं कर सकते है। लेकिन आपको निराश होने की कोई जरुरत नहीं है क्योंकि CSS के द्वारा आप tables पर भी styles apply कर सकते है। इसके लिए CSS आपको 5 properties provide करती है।
* border-collapse
* border-spacing
* caption-side
* empty-cells
* table-layout
इन properties के साथ दूसरी common properties को यूज़ करके आप tables को design कर सकते है। आइये इन सभी properties के बारे में जानने का प्रयास करते है।
1. border-collapse property
जैसा की आप देखते है HTML tables में सभी cells की borders merged होती है। लेकिन आप चाहे तो हर table cell को separate करते हुए उनकी borders को separately represent कर सकते है। इसके लिए आप border-collapse property यूज़ करते है। इस property की 2 possible values होती है। पहली value collapse होती है। जब आप इस value को set करते है तो सभी cells की border collapse हो जाती है और सभी cells एक ही border को यूज़ करते है। इस property की दूसरी value separate होती है। जब आप इस value को set करते है तो हर table cell की border separately represent होती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
* CSS file
table
{
border-collapse:separate;
}
* HTML file
{
border-collapse:separate;
}
* HTML file
<html>
<head>
<title>Border collapse property demo </title>
</head>
<head>
<title>Border collapse property demo </title>
</head>
<body>
<table>
<tr>
<th>Name</th>
<th>Age of Death</th>
</tr>
<th>Name</th>
<th>Age of Death</th>
</tr>
<tr>
<td>Mahatma Gandhi</td>
<td>78</td>
</tr>
<td>Mahatma Gandhi</td>
<td>78</td>
</tr>
<tr>
<td>Swami Vivekananda</td>
<td>39</td>
</tr>
<td>Swami Vivekananda</td>
<td>39</td>
</tr>
</table>
</body>
</html>
2. border-spacing property
इस property के द्वारा आप किसी भी table के cells के बीच का space define कर सकते है। इस space को आप horizontally और vertically दोनों तरह से define कर सकते है। इस property की value एक भी हो सकती है और 2 भी हो सकती है। जब आप एक value define करते है तो यह horizontal और vertical दोनों तरह से apply हो जाती है। जब आप दो values define करते है तो पहली value horizontally apply होती है और दूसरी value vertically apply होती है। इसका उदाहरण निचे दिया जा रहा है।
* CSS file
table
{
border-spacing:50px 30px;
}
* HTML file
{
border-spacing:50px 30px;
}
* HTML file
<html>
<head>
<title>Border spacing property demo</title>
</head>
<head>
<title>Border spacing property demo</title>
</head>
<body>
<table>
<tr>
<th>Mobile</th>
<th>Prices</th>
</tr>
<th>Mobile</th>
<th>Prices</th>
</tr>
<tr>
<td>Samsung</td>
<td>15,000</td>
</tr>
<td>Samsung</td>
<td>15,000</td>
</tr>
<tr>
<td>Apple</td>
<td>53,000</td>
</tr>
<td>Apple</td>
<td>53,000</td>
</tr>
</table>
</body>
</html>
3. caption-side property
इस property के द्वारा आप table का caption (शीर्षक) कँहा show होगा ये define कर सकते है। लेकिन ये property केवल तब ही काम करती है जब आप table के अंदर <caption> tag यूज़ करते है। <caption> tag table का शीर्षक define करने के लिए यूज़ किया जाता है। इस property की आप 2 values define कर सकते है। पहली value top होती है जिससे caption table के top पर show होता है। दूसरी value आप bottom दे सकते है इससे caption bottom में show होता है। इसका उदाहरण निचे दिया जा रहा है।
* CSS file
table
{
caption-side:bottom;
}
{
caption-side:bottom;
}
* HTML file
<html>
<head>
<title>caption-side property demo</title>
</head>
<head>
<title>caption-side property demo</title>
</head>
<body>
<table>
<caption>My Table</caption>
<caption>My Table</caption>
<tr>
<th>Position</th>
<th>Salary</th>
</tr>
<th>Position</th>
<th>Salary</th>
</tr>
<tr>
<td>CEO</td>
<td>20,000</td>
</tr>
<td>CEO</td>
<td>20,000</td>
</tr>
<tr>
<td>Content Writer</td>
<td>2,000</td>
</tr>
<td>Content Writer</td>
<td>2,000</td>
</tr>
</table>
</body>
</html>
4. empty-cells property
इस property के द्वारा आप define कर सकते है की जिन cells में content नहीं है उनकी borders शो करनी है या नहीं। इस property की 2 values हो सकती है। पहली value hide हो सकती है। जब आप इस value को set करते है तो जिन cells में कोई content नहीं होता है उनकी borders hide हो जाती है। दूसरी value show हो सकती है जब आप ये value define करते है तो जिन cells में content नहीं होता उनकी borders show होती है। आइये इसे एक उदाहरण से समझने का प्रयास करते है।
* CSS file
table
{
empty-cells:hide;
}
* HTML file
{
empty-cells:hide;
}
* HTML file
<html>
<head>
<title>empty-cells property demo</title>
</head>
<head>
<title>empty-cells property demo</title>
</head>
<body>
<table>
<tr>
<th>Country</th>
<th>Population</th>
</tr>
<th>Country</th>
<th>Population</th>
</tr>
<tr>
<td>India</td>
<td>250000000</td>
</tr>
<td>India</td>
<td>250000000</td>
</tr>
<tr>
<td>Nepal</td>
<td>250000</td>
</tr>
<td>Nepal</td>
<td>250000</td>
</tr>
</table>
</body>
</html>
5. table-layout property
इस property के द्वारा आप define कर सकते है की table का layout सभी browsers और windows में same रहेगा या फिर automatically change होगा। इस property की 2 values हो सकती है। एक value आप fixed define कर सकते है। जब आप ये value define करते है तो table का layout सभी browsers में fixed रहता है। दूसरी value आप auto define कर सकते है जब आप ये value define करते है तो table का layout browsers के according automatically change हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
* CSS file
table
{
table-layout:auto;
width:100%;
}
{
table-layout:auto;
width:100%;
}
* HTML file
<html>
<head>
<title>table layout border property</title>
</head>
<head>
<title>table layout border property</title>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<td>3</td>
<td>4</td>
</tr>
</table>
</body>
</html>
इनके अलावा आप CSS की common properties जैसे की background-color, color आदि भी tables पर apply कर सकते है।
Styling lists with CSS
Introduction to CSS list properties
Lists किसी भी topic से related important points को आसानी से present करने के लिए useful होती है। HTML के द्वारा आप 2 प्रकार की lists create कर सकते है। जिन्हें ordered lists और unordered lists कहा जाता है। HTML में lists create करने के लिए आप निचे दिए गए HTML tags यूज़ करते है।
* <ul> - Ordered list
* <ol> - Unordered list
* <li> - list Item
ऊपर दिए गए HTML tags पर आप CSS apply करके lists को style कर सकते है। Lists को style करने के लिए CSS में आपको 4 important properties provide की गयी है। इन properties की list निचे दी जा रही है।
* list-style-type
* list-style-position
* list-style-image
* list-style (short hand)
इन सभी properties के बारे में निचे detail से दिया जा रहा है।
1. list-style-type
list-style-type property के द्वारा आप lists की numbering और bullets को control कर सकते है। Unordered lists के case में इस property के द्वारा आप अलग अलग तरह के bullets यूज़ कर सकते है। और Ordered lists के case में इस property के द्वारा आप अलग अलग numbering यूज़ कर सकते है।
यदि आप इस property को unordered list (<ul> tag) पर apply करना चाहते है तो निचे दी गयी 4 values को आप यूज़ कर सकते है।
* none - इस value से कोई भी marker show नहीं होता है।
* none - इस value से कोई भी marker show नहीं होता है।
* disc - इस value से marker के रूप में एक भरा हुआ dark circle show होता है।
* circle - इस value से एक empty circle show होता है।
* square - इस value से एक भरा हुआ dark square show होता है।
यदि आप इस property को order lists (<ol> tag) पर apply करना चाहते है तो आप निचे दी values यूज़ कर सकते है।
* none - इस value से किसी भी प्रकार की numbering show नहीं होती है।
* decimal - इस value से decimal (1,2,3,4,5,6 ) numbering होती है।
* lower-roman - इस value से roman numbers lower case में show होते है।
* none - इस value से किसी भी प्रकार की numbering show नहीं होती है।
* decimal - इस value से decimal (1,2,3,4,5,6 ) numbering होती है।
* lower-roman - इस value से roman numbers lower case में show होते है।
* upper-roman - इस value से roman numbers upper case में show होते है।
* lower-alpha - इस value से alphabets lower case में show होते है।
* upper-alpha - इस value से alphabets upper case में show होते है।
इनके अलावा और भी values होती है जिन्हें आप यूज़ कर सकते है। आइये अब list-style-type property को एक उदाहरण से समझने का प्रयास करते है।
<html>
<head>
<title>list-style-type demo</title>
</head>
<head>
<title>list-style-type demo</title>
</head>
<body>
<h1>Ordered List Example</h1>
<ol style="list-style-type:lower-alpha;">
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ol>
<ol style="list-style-type:lower-alpha;">
<li>HTML</li>
<li>CSS</li>
<li>XML</li>
</ol>
<h1> Un-ordered List Example</h1>
<ul style="list-style-type:disc;">
<li>Java</li>
<li>PHP</li>
<li>JQuery</li>
</ul>
<ul style="list-style-type:disc;">
<li>Java</li>
<li>PHP</li>
<li>JQuery</li>
</ul>
</body>
</html>
2. list-style-position
इस property के द्वारा आप numbering और bullets की position define कर सकते है। इस property की आप 2 values define कर सकते है।
* outside - जब आप इस value को define करते है तो bullets/numbers और text के बीच में काफी space रहता है। इससे text अलग से show होता है।
* inside - जब आप इस value को define करते है तो bullets/numbers और text के बीच में space कम रहता है और दोनों एक साथ दिखाई देते है।
इस property को निचे उदाहरण के द्वारा समझाया गया है।
<html>
<head>
<title>list-style-position demo</title>
</head>
<head>
<title>list-style-position demo</title>
</head>
<body>
<h1>inside example</h1>
<ul style="list-style-position:inside;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<ul style="list-style-position:inside;">
<li>One</li>
<li>Two</li>
<li>Three</li>
</ul>
<h1>outside example</h1>
<ul style="list-style-position:outside;">
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
<ul style="list-style-position:outside;">
<li>Four</li>
<li>Five</li>
<li>Six</li>
</ul>
</body>
</html>
3. list-style-image
यदि आप चाहे तो lists में marker के रूप में bullets और numbers को यूज़ करने के बजाय आप किसी image को भी यूज़ कर सकते है। ये property उन situations में बहुत useful होती है जब आप lists को अपनी website की design के according configure करना चाहते है। इस property का basic syntax निचे दिया जा रहा है।
list-style-type:url('url-of-image');
आइये अब इस property को उदाहरण के माध्यम से समझने का प्रयास करते है।
<html>
<head>
<title>list-style-image demo</title>
</head>
<head>
<title>list-style-image demo</title>
</head>
<body>
<h1>Example of CSS list Image marker</h1>
<ul style="style-type-image:url('/images/flower.gif');">
<li>ONE</li>
<li>TWO</li>
</ul>
</body>
<h1>Example of CSS list Image marker</h1>
<ul style="style-type-image:url('/images/flower.gif');">
<li>ONE</li>
<li>TWO</li>
</ul>
</body>
</html>
4. list-style (shorthand) property
यदि आप ऊपर define की गयी सभी properties को एक बार में define करना चाहते है तो इसके लिए आप list-style (shorthand) property यूज़ कर सकते है। इस property में सबसे पहले आप list-style-type property की value देते है। इसके बाद आप list-style-position property की value देते है। और इसके बाद आप list-style-image property की value define करते है। इस property का general syntax निचे दिया जा रहा है।
list-style:<list-style-type> <list-style-position> <list-style-image>
list-style property का उदाहरण निचे दिया जा रहा है।
<html>
<head>
<title>list-style demo</title>
</head>
<head>
<title>list-style demo</title>
</head>
<body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</body>
</html>
5. Applying CSS on list items
आप चाहे तो list items पर भी CSS apply कर सकते है। इसके लिए आप इस प्रकार selectors यूज़ कर सकते है।
For unordered list
ul li
{
//CSS rules here
}
{
//CSS rules here
}
For ordered list
ol li
{
//CSS rules here
}
{
//CSS rules here
}
CSS Links
Introduction to CSS Links
World Wide Web एक links के collection के अलावा कुछ नहीं है। Links के माध्यम से ही आप एक page से दूसरे page तक travel करते है। CSS के माध्यम से आप links को design कर सकते है और अपने page के according customize कर सकते है। Links पर आप सभी basic properties apply कर सकते है। लेकिन इसके लिए आपको selectors different यूज़ करने पड़ते है। Links की हर condition के लिए एक अलग selector provide किया गया है। इन selectors की list निचे दी गयी है।
World Wide Web एक links के collection के अलावा कुछ नहीं है। Links के माध्यम से ही आप एक page से दूसरे page तक travel करते है। CSS के माध्यम से आप links को design कर सकते है और अपने page के according customize कर सकते है। Links पर आप सभी basic properties apply कर सकते है। लेकिन इसके लिए आपको selectors different यूज़ करने पड़ते है। Links की हर condition के लिए एक अलग selector provide किया गया है। इन selectors की list निचे दी गयी है।
* a : link - इस selector को link की normal state की designing करने के लिए use किया जाता है। ये वो state होती है जब link को एक बार भी visit नहीं किया गया है।
* a : visited - इस selector को link की visited state को design करने के लिए यूज़ किया जाता है। ये वो state होती जब link visit की जा चुकी है।
* a : hover - इस selector को links की hover state को design करने के लिए यूज़ किया जाता है। ये वो state होती है जब link पर mouse ले जाया जाता है।
* a : active - इस selector से links की active state को design करने के लिए यूज़ किया जाता है। ये वो state होती है जब link active होती है।
इन selectors को यूज़ करके आप links की advanced designing कर सकते है। आइये इन selectors के बारे में detail से जानने का प्रयास करते है।
1. a : link
जैसा की मैने आपको ऊपर बताया इस selector के द्वारा आप link की normal state के लिए rules define करते है। ये वो state होती है जब links को आप किसी webpage पर पहली बार देखते है। और अभी तक उस link को visit नहीं किया गया है। आइये देखते है की इस selector को आप किस प्रकार यूज़ कर सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title> a : link demo</title>
<head>
<title> a : link demo</title>
<style>
a : link {
color:blue;
}
</style>
a : link {
color:blue;
}
</style>
</head>
<body>
<a href="ww.besthinditutoials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में link की normal state का color blue define किया गया है।
ऊपर दिए गए उदाहरण में link की normal state का color blue define किया गया है।
2. a : visited
इस selector के द्वारा आप link की उस state के लिये rules define करते है जब link को visit किया जा चूका है। ये एक important selector है। जब आप इसे यूज़ करते है तो users को पता लग जाता है की वे कौनसी links visit कर चुके और कौनसी अभी तक नहीं visit की है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title> a : visited </title>
<head>
<title> a : visited </title>
<style>
a : visited{
color:yellow;
}
</style>
a : visited{
color:yellow;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब list एक बार visit की जा चुकी होगी तो उसको color yellow show होगा।
3. a : hover
जब user mouse cursor को link पर ले जाये तो उसमे कौनसे changes होने चाहिए, उन्हें define करने के लिए आप a : hover selector यूज़ करते है। उदाहरण के लिए यदि आप जब user mouse cursor ले जाये तो आप link का color red show करना चाहते है। इस selector के use करने से एक link highlight हो जाती है और वह से अलग दिखती है। इससे simple text में भी आसानी से पता चल जाता है की ये link है। इसे निचे एक उदाहरण के माध्यम से समझाया गया है।
<html>
<head>
<title> a : hover demo</title>
<head>
<title> a : hover demo</title>
<style>
a : hover{
color:red;
}
</style>
a : hover{
color:red;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com>Best Hindi Tutorials</a>
</body>
<a href="http://www.besthinditutorials.com>Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब visitor mouse cursor को link पर लेकर जाता है तो उस link का color red हो जाता है।
4. a : active
इस selector के द्वारा आप link को उस state के लिए design करते है जब link को click किया जा रहा होता है। इस state में आप link का color change कर सकते है या फिर और भी दूसरे rules apply कर सकते है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>a : active demo</title>
<style>
a : active{
color:green;
}
</style>
</head>
<head>
<title>a : active demo</title>
<style>
a : active{
color:green;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
<a href="http://www.besthinditutorials.com">Best Hindi Tutorials</a>
</body>
</html>
ऊपर दिए गए उदाहरण में जब user link पर click करता है तो उसको color green हो जाता है।
ऊपर दिए गए उदाहरण में जब user link पर click करता है तो उसको color green हो जाता है।
5. Removing underline from links
यदि आप links के निचे by default आने वाली line को remove करना चाहते है तो इसके लिए आप CSS की text-decoration property यूज़ कर सकते है। इसी property के द्वारा आप वापस underline show भी कर सकते है। इस property की आप 2 values दे सकते है। एक तो none और दूसरी underline होती है। इसे निचे एक उदाहरण के माध्यम से समझाया जा रहा है।
<html>
<head>
<title>text-decoration demo</title>
<style>
a{
text-decoration : none;
}
</style>
</head>
<head>
<title>text-decoration demo</title>
<style>
a{
text-decoration : none;
}
</style>
</head>
<body>
<a href="http://www.besthinditutorials.com>Best Hindi Tutorials</a>
</body>
<a href="http://www.besthinditutorials.com>Best Hindi Tutorials</a>
</body>
</html>
CSS Padding & Margin
Introduction to padding & margin
किसी webpage की design में padding और margin का बहुत महत्व होता है। Padding और margin को किसी HTML element (<div>,<h1> और <p> आदि) की border के संदर्भ में define किया जाता है। Padding border की अंदर की तरफ space के रूप में define की जाती है और margin border के बाहर की तरफ space के रूप में define की जाती है। इसे निचे diagram के द्वारा समझाया जा रहा है।
ऊपर दिए गए diagram में DIV के text और border के बीच जो green area है वह padding कहलाता है। जैसा की मैने आपको बताया padding border के अंदर की तरफ के space को कहते है। Border के बाहर की तरफ जो blue area है वह DIV का margin है। Margin एक element से दूसरे element के बीच space define करने के लिए यूज़ किया जाता है।
आपको हमेशा ध्यान रखना चाहिए की हर HTML element की border होती है जो की by default hidden रहती है। किसी भी element की border show करने के लिए आप उसमे border property set कर सकते है।
1. CSS padding properties
Elements की padding define करने के लिए CSS आपको 4 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 properties के बारे में जानने का प्रयास करते है।
2. padding-left property
ये property left side की padding define करने के लिए यूज़ की जाती है। इस property की आप जितनी value देते है उतना ही space element के अंदर left side में create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
padding-left:20px;
3. padding-right property
इस property के द्वारा आप किसी element की right padding define करते है। जितनी आप इस property की value देते है उतना ही space border के अंदर right side में create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
padding-right:30px;
4. padding-top property
ये property element के ऊपर की तरफ border के अंदर padding define करने के लिए यूज़ की जाती है। इसका उदाहरण निचे दिया जा रहा है।
padding-top:10px;
5. padding-bottom property
इस property के द्वारा आप किसी भी element में निचे की तरफ padding define कर सकते है। इस property की आप जितनी value देते है उतना ही space element के निचे की तरफ border के अंदर create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
padding-bottom:10px;
आइये इन properties का यूज़ एक उदाहरण के माध्यम से समझने का प्रयास करते है।
<html>
<head>
<title>padding-left-property-example</title>
<head>
<title>padding-left-property-example</title>
<style type="text/css">
#MyDIV
{
padding-left:20px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
}
</style>
#MyDIV
{
padding-left:20px;
padding-right:30px;
padding-top:10px;
padding-bottom:10px;
}
</style>
</head>
<body>
<div id="MyDIV">
Padding makes your text appear in a structure. It is important to set good padding for your webpage to look beautiful.
</div>
Padding makes your text appear in a structure. It is important to set good padding for your webpage to look beautiful.
</div>
</body>
</html>
ऊपर दिए गए उदाहरण में एक DIV create गया है जिसकी id MyDIV है। <head> tag में CSS के माध्यम से सभी sides की padding set की गयी है। यदि आप चाहे तो इन चार अलग अलग properties को इस्तेमाल करने की बजाय एक short hand property यूज़ कर सकते है। इस short hand property में आप सभी sides के लिए padding define कर सकते है। इसका syntax निचे दिया जा रहा है।
ऊपर दिए गए उदाहरण में एक DIV create गया है जिसकी id MyDIV है। <head> tag में CSS के माध्यम से सभी sides की padding set की गयी है। यदि आप चाहे तो इन चार अलग अलग properties को इस्तेमाल करने की बजाय एक short hand property यूज़ कर सकते है। इस short hand property में आप सभी sides के लिए padding define कर सकते है। इसका syntax निचे दिया जा रहा है।
padding:top right bottom left;
इस property में सबसे पहले आप element के top की padding define करते है। इसके बाद right, फिर bottom और आखिर में left side की padding define की जाती है। इसका उदाहरण निचे दिया जा रहा है।
padding:20px 10px 20px 10px;
यदि इस property के साथ सिर्फ एक value define करते है तो सभी sides पर वही padding apply हो जाती है। जैसे की
padding:10px;
ऊपर दिया गया statement सभी sides की padding 10px set करता है।
> 6. CSS margin properties
CSS margin properties elements के चारों तरफ space create करने के लिए यूज़ की जाती है। Margin properties elements के बाहर की तरफ कितना space रहेगा ये decide करती है। CSS आपको चार margin properties provide करती है। इन properties से आप चारों sides की margin define कर सकते है।
साथ ही CSS आपको एक shorthand property भी provide करती है। जिससे आप इन सभी properties के लिए values एक ही statement में define कर सकते है। इन सभी properties की value आप चार type से define कर सकते है।
1. auto - जब आप auto value देते है तो browser automatically appropriate margin set कर देता है।
2. length - इस तरह की value में आप margin की length pixels में define करते है।
3. % - आप चाहे तो जिस element की आप margin set कर रहे है उसको contain करने वाले element की width का कुछ percent भी margin के रूप में set कर सकते है।
4. inherit - यदि आप margin parent element से inherit करना चाहते है तो इसके लिए आप ये inherit value pass कर सकते है।
7. margin-top property
इस property के द्वारा आप element के top का margin set करते है। ये property define करती है की element के ऊपर border की बाहर की तरफ कितना space रहेगा। इसका उदाहरण निचे दिया जा रहा है।
इस property के द्वारा आप element के top का margin set करते है। ये property define करती है की element के ऊपर border की बाहर की तरफ कितना space रहेगा। इसका उदाहरण निचे दिया जा रहा है।
margin-top:20px;
* margin-right property
इस property के द्वारा आप element के दाँयी तरफ का margin set करते है। इससे element के दाँयी और border के बाहर की तरफ specified space create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
margin-right:10px;
* margin-bottom property
इस property के द्वारा आप element के नीचे की तरफ का margin set करते है। आप जितनी value इस property की देते है उतना ही space element के bottom में border के बाहर की तरफ create हो जाता है। इसका उदाहरण निचे दिया जा रहा है।
margin-bottom:20px;
* margin-left property
ये property element के बाँयी तरफ margin set करने के लिए यूज़ की जाती है। जब आप इस property को value के साथ set करते है तो element के बाँयी तरफ border के बाहर space create हो जाता है।
margin-left:20px;
आइये अब इन margin properties को एक उदाहरण के माध्यम से समझने का प्रयास करते है।
आइये अब इन margin properties को एक उदाहरण के माध्यम से समझने का प्रयास करते है।
<html>
<head>
<title> CSS margin properties demo</title>
<style type="text/css">
#MyDIV
{
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
}
</style>
</head>
<head>
<title> CSS margin properties demo</title>
<style type="text/css">
#MyDIV
{
margin-top:20px;
margin-right:10px;
margin-bottom:20px;
margin-left:10px;
}
</style>
</head>
<body>
<div id="MyDIV">
Margin creates space between elements. It makes them look organised. It is important to know the use of CSS margin properties for better website design.</div>
</div>
</body>
<div id="MyDIV">
Margin creates space between elements. It makes them look organised. It is important to know the use of CSS margin properties for better website design.</div>
</div>
</body>
</html>
जैसा की आप देख सकते है ऊपर दिए गए उदाहरण में चारों properties के माध्यम से सभी sides का margin set किया गया है। यदि आप चाहे तो चार properties यूज़ करने की बजाय इसकी जगह एक single shorthand property use कर सकते है। इस property को margin property कहा जाता है। इसका syntax निचे दिया जा रहा है।
जैसा की आप देख सकते है ऊपर दिए गए उदाहरण में चारों properties के माध्यम से सभी sides का margin set किया गया है। यदि आप चाहे तो चार properties यूज़ करने की बजाय इसकी जगह एक single shorthand property use कर सकते है। इस property को margin property कहा जाता है। इसका syntax निचे दिया जा रहा है।
* margin: top right bottom left;
आइये अब इस property का example देखते है।
आइये अब इस property का example देखते है।
* margin 20px 10px 20px 10px;
यदि आप इस property की एक single value देते है तो सभी sides का margin उसी value के द्वारा set कर दिया जाता है।
No comments: