CSS (Cascading Style Sheet)
CSS एक
language हैं जिससे हम किसी HTML Document को एक आकर्षक रूप दे सकते हैं। जहाँ
HTML से हम किसी वेबपेज को आकार देते हैं, वहीं CSS से हम उस पेज को एक आकर्षक रूप
देते हैं। HTML की तरह CSS को लिखने के लिए भी हमें एक text editor (जैसे notepad,
या notepad ++) की जरूरत होती हैं और पेज में जो बदलाव होते हैं वो बेब ब्राउजर पर
दिखते हैं।
CSS के द्वारा हम
HTML Elements को विभिन्न Properties दे सकते हैं जिनके बारे में हम आगे चर्चा करेंगे।
CSS लिखने के तीन अलग-अलग
तरीके हैं, हम इनमें से कोई भी एक तरीका उपयोग कर सकते हैं –
Inline CSS.
Internal CSS.
External CSS.
1. Inline CSS
जब हम किसी HTML tag के
अंदर ही CSS लिखते हैं तो उसे Inline CSS बोलते हैं। इस तरीके में CSS की
Properties “style” attribute के अंदर लिखी जाती हैं। उदाहरण के लिए
<div style =
“color:red;height:50px;width:50px;background-color:blue;”>Test</div>
ऊपर दिए e.g. में हमने
div element की CSS उसके अंदर ही लिखी हैं। इस CSS से हमें एक बाक्स मिलेगा जिसकी
height और width दोनों 50px होगीं, background color blue होगा और text का color
red होगा।
2.Internal CSS
इस तरीके में CSS किसी
HTML पेज में ही लिखते हैं जिसका effect भी केवल उसी पेज पर पड़ता हैं। इस तरीके में
CSS style tags के अंदर लिखते हैं तथा style tags head tags के अंदर रहते हैं।
नोट :- यहाँ हमने
#box का use किया हैं। हमने div को एक id दी हैं “box”, और हम उस div को उसकी id के
आधार पर ही Properties दे रहे हैं। जब हम किसी element को उसकी id के आधार पर
Select करते हैं तो id के पहले # का use करते हैं। इसे id selector बोलते हैं (जैसे
यहाँ #box)।
अगर हमें दो या दो से
ज्यादा elements पर एक जैसी Properties apply करनी हों, तो हम Class Selector का
use करते हैं।
For e.g.
<html>
<head>
<title></title>
<style>
.myboxes
{
color:red;
height:50px;
width:50px;
background–color:blue;
}
</style>
</head>
<body>
<div class =
“myboxes”>Test 1</div>
<div class =
“myboxes”>Test 2</div>
</body>
</html>
यहाँ हमने दोनों ही
div को एक जैसी class दी हैं और उनकी class के आधार पर CSS लिखी हैं। यह CSS इन दोनों
पर apply होगी। अगर हमारे पास दो से ज्यादा div हैं जिन सभी की class “myboxes” हैं
तो यह CSS उन सभी पर apply होगी। यहाँ हमने element की class के पहले .(डॉट) लगाया
हैं। .myboxes को हम class selector कहेंगे।
हम किसी एक element को
उसके नाम के आधार पर भी CSS दे सकते हैं।
For e.g.
<html>
<head>
<style>
p{ color: red; }
</style>
<body>
<p> This is a
test </p>
</body>
</html>
यहाँ हमने p element को
उसके नाम के आधार पर select करके CSS दी हैं। इसे element selector कहते हैं।
3.External CSS
इस तरीके में हम एक अलग
CSS file बनाते हैं। और उसे html file में link करते हैं। उदाहरण के लिए अगर हमारे
पास basic.html नाम की फाईल हैं और उसकी CSS की एक अलग style.css नाम की फाइल हैं।
basic.html
<html>
<head>
<title></title>
<link rel
=“stylesheet” href =“style.css” type = “text/css”>
</head>
<body>
<p>This is a
test<p>
</body>
</html>
style.css
p{ color: red; }
हमने हमारी
stylesheet को html पेज में link tag के द्वारा include किया हैं।
CSS की कुछ बेसिक प्रापर्टीज
height :- किसी
element को एक निश्चित हाईट देने के लिए यह प्रापर्टी use करते हैं।
width :- किसी
element को एक निश्चित width (चौड़ाई) देने के लिए इस प्रापर्टी को use करते हैं।
color :- किसी
element के text को color देने के लिए यह प्रापर्टी use करते हैं।
background-color :- किसी
element के background का color change करने के लिए यह प्रापर्टी use करते हैं।
border :- किसी
element की बार्डर बनाने के लिए इसे use करते हैं।
इसमें हम तीन चीजे
define करते हैं। बार्डर की मोटाई, उसकी स्टाइल और उसका रंग।
For e.g. हमारे पास एक
div हैं जिनकी id “mybox” हैं। इसमें हम समझते हैं कि कितने तरीके से हम बार्डर दे
सकते हैं।
<div id =
“mybox”>This is a test</div>
इस div पर हम
internal CSS apply कर रहे हैं।
<style>
#mybox
{
border: 1px solid
black;
}
</style>
इस caseमें 1px
border की मोटाई होगी, solid उसकी स्टाइल होगा और रंग black होगा। हम बार्डर की मोटाई
को pixels (px) के द्वारा बढ़ा या घटा सकते हैं। जैसे 1px, 5px, 2px, 10px, etc. और
बार्डर की स्टाईल व रंग भी विभिन्न दे सकते हैं। जैसे –
2px solid blue;
5px dotted red;
4px dotted green;
10px double gray;
“border” property से
हम एक बार में बार्डर की मोटाई, स्टाईल व रंग दे सकते हैं। परन्तु यदि हम चाहें तो
बार्डर की अलग-अलग प्रापर्टी भी दे सकते हैं –
border–width:– बार्डर
की मोटाई देने के लिए।
border–style:– बार्डर
की स्टाइल देने के लिए।
border–color:– बार्डर
का रंग देने के लिए।
For e.g.
#mybox
{
border -width : 2px;
border–style :
solid;
border–color : red;
}
हम किसी element को चारों
तरफ अलग-अलग border भी दे सकते हैं। उदाहरण के लिए यदि हमें हमारी div को सिर्फ
top border देनो हो तो हम लिखेंगे।
#mybox
{
border–top : 2px
solid black;
}
हम चारो तरफ अलग-अलग बार्डर
भी दे सकते हैं।
For e.g.
#mybox
{
border-top: 1px
solid red;
border-left: 2px
dotted green;
border-bottom: 2px
double blue;
border-right: 4px
solid black;
}
6. margin:- इस
property का उपयोग elements के चारों तरफ space create करने के लिए होता हैं।
किसी भी element की
margin adjust करने के लिए विभिन्न प्रापट्रीज होती हैं।
margin–top
margin–right
margin–bottom
margin–left
margin प्रापट्रीज की
निम्न वैल्यूज हो सकती हैं –
auto:- यदि हम किसी
element की margin auto देते हैं तो वह margin ब्राऊजर कैल्कुलेट करता हैं।
length:- किसी
element की margin, px, pt, या cm के form में भी दे सकते हैं।
%:- किसी element की
margin % form में भी दे सकते जो कि उस element के parent element की height/width
के हिसाब से कैल्कुलेट होती हैं।
Inherit:- इसके द्वारा
कोई element अपने parent element की margin स्वंय पर apply कर सकता हैं।
निम्नलिखित उदाहरण में
हम एक <div> element के चारों तरफ की margin अलग-अलग सेट कर रहे हैं –
div{
margin–top: 100px;
margin–bottom:
100px;
margin–right: 150px;
margin–left: 80px;
}
margin–short hand
property :
हम किसी element की चारों
तरफ की margin एक ही प्रॉपर्टी से भी दे सकते हैं। top, bottom, left, right के लिए
अलग-अलग margin प्रॉपर्टी देने की बजाए हम एक सिंगल margin property में चारों तरफ
की margin का उल्लेख कर सकते हैं। देखते हैं कैसे –
अगर margin प्रॉपर्टी
में चार वैल्यूज हैं –
margin: 20px 34px
50px 70px;
तो,
top margin 20px होगी।
right margin 34px होगी।
bottom margin 50px होगी।
left margin 70px होगी।
div{
margin: 20px 34px
50px 70px;
}
* अगर margin प्रापर्टी
में तीन वैल्यूज हों –
जैसें, margin: 10px
15px 25px;
तो, top margin 10px होगी,
right margin और left margin, दोनों 15px होगी, bottom margin 25px होगी।
* अगर margin प्रापर्टी
में दो वैल्यूज हों –
जैसे margin: 10px
20px;
तो,
top और bottom margin
10px होगीं और left और right margin 20px होगी।
* अगर margin प्रापर्टी
में केवल एक वैल्यू हो,
जैसे margin: 45px;
तो, चारों तरफ की
margin 45px होगी।
* margin auto
value:- किसी element को उसके container के अंदर horizontally center में करने के लिए
इस property को use किया जाता हैं। ऐसा करने से element को जो width और height specify
की गई है वह वो occupy करेगा और बचा हुआ space left और right margins में equally
distribute हो जाएगा।
Padding:-
Padding को हम किसी
element के border के अंदर के space के रूप में define कर सकते हैं। ध्यान रखने वाली
बात हैं कि हर एक html element की border होती हैं जिसे हम उसकी border property के
द्वारा show कर सकते हैं। किसी element की padding set करने के लिए CSS की चार प्रापर्टीज
होती हैं जिनसे आप हर एक side की padding स्वतंत्र रूप से दे सकते हैं। ये चार प्रापर्टीज
हैं –
padding–top,
padding–right, padding–bottom, padding–left.
यदि हम चारों तरफ एक जैसी
padding देना चाहते तो वो हम एक सिंगल property ‘padding’ से दे सकते हैं।
Padding की वैल्यू
pixels में define की जाती हैं और हम padding की negative वैल्यू नहीं दे सकते।
* padding–left
property :- यह प्रापर्टी किसी element की left side की padding define करती हैं।
For e.g.
p{
padding–left : 25px;
}
इस e.g. में p
element के left side 25px का extra space create हो जाएगा।
* padding–right
property :- यह property किसी element की right side की padding define करती हैं।
For e.g.
p{
padding-right: 20px;
}
इस e.g. में p
element के right side 20px का extra space create हो जाएगा।
नोट :- किसी भी
padding property में जो space create होता हैं वह उस element के border के अंदर ही
होता हैं।
* padding-top :- यह
property किसी element के border के अंदर ही ऊपर की तरफ space create करती हैं।
For e.g.
p{
Padding-top: 50px;
}
इस e.g. में p
element के border के अंदर ऊपर की तरफ 50px का extra space create हो जाएगा।
* padding-bottom :- यह
property किसी element के border के अंदर ही नीचे की तरफ space create करती हैं।
For e.g.
p{
padding-bottom:
40px;
}
इस e.g. में p
element के border के अंदर नीचे की तरफ 40px का extra space create हो जाएगा।
*‘padding’-shorthand
property :- हम किसी element के चारों तरफ की padding एक सिंगल property ‘padding’
से भी adjust कर सकते हैं।
अगर padding की चार
values हों
div{
padding: 20px 25px
30px 35px;
}
तो –
top-padding 20px हैं।
right-padding 25px हैं।
bottom-padding 30px हैं।
left-padding 35px;
* यदि padding की तीन
value हों –
div {
padding: 20px 30px
40px;
}
तो –
top padding 20px होगी।
right और left
paddings 30px होगी।
bottom padding 40px होगी।
* यदि padding की दो
values हों –
div {
padding: 10px 20px;
}
तो,
top और bottom
paddings 10px होगी
right और left
paddings 20px होगी।
* यदि padding की एक
value हो –
div{
padding:40px;
}
तो चारों तरफ की
padding 40px होगी।
*Height और Width:- किसी
element की height और width set करने के लिए ‘height’ और ‘width’ properties का
use करते हैं।
height और width की
value हम px, cm, या % में दे सकते हैं।
For e.g.
div{
height: 200px;
width: 50%;
}
ऊपर दिए गए उदाहरण में
width:50% का मतलब हैं div के parent element की width का 50% होगी|
हैलो दोस्तों Hindi Tutorial में आपका स्वागत है। आज की पोस्ट में हम आपको बताने जा रहे है Web Design Kya Hai क्या आप भी...
help full hindi tutorial
ReplyDelete