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 कहते हैं।
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% होगी|