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.
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 में <style> tag की मदद से define करते है।
External – इस method में आपकी CSS file और HTML file अलग अलग होती है। HTML file में आप CSS file को <link>
attribute के द्वारा add करवाते है।
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 के अंदर रहते हैं।
<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%;
}
Introduction to CSS Text Properties
CSS के द्वारा आप web page के text को भी design कर सकते है। इसके लिए CSS आपको बहुत सी properties
provide करती है।
कई बार designers font properties और text properties के बीच confuse हो जाते है। इसलिए text properties के बारे में detail से जानने से पहले आइये देखते है की इन दोनों में क्या difference
होता है।
color Property
ये property text का color set करने के लिए यूज़ की जाती है। इसे आप different HTML elements पर apply कर सकते है। यदि आप इसे <body> tag पर apply करते है तो जो value आप इस property की देते है वही color webpage के सारे text का हो जाता है।
इस property की value के रूप में आप color का नाम या उसकी hex value दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
|
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 करती है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
|
text-decoration
इस property के द्वारा आप text को decorate कर सकते है। जैसे की text के निचे underline define करना आदि। निचे दी गयी 4 values में से आप इस property की कोई भी value set कर सकते है।
none – इस value से text पर कोई भी decoration नहीं रहता है।
underline – इस value को set करने से text के नीचे line appear हो जाती है।
overline – इस value को apply करने पर text के ऊपर line appear हो जाती है।
line-through – इस value को यूज़ करने पर text को काटती हुई बीच से line खींच जाती है।
निचे इसका उदाहरण दिया जा रहा है।
<html>
|
text-transform
इस property के द्वारा आप text का case set कर सकते है। आप चाहे तो text को upper case में show कर सकते है या फिर lower case में show कर सकते है। निचे दी गयी 4 values में से आप कोई भी value इस property की set कर सकते है।
none
uppercase
lowercase
capitalize
इस property का उदाहरण निचे दिया जा रहा है।
<html>
|
text-indent
इस property के द्वारा आप paragraph की first line का indent set कर सकते है। Indent paragraph की first line में extra space होता है जो उस line को दूसरी lines से अलग show करता है। इस property की value आप length में या फिर percentage
में दे सकते है। इसका उदाहरण निचे दिया जा रहा है।
<html>
|
direction
इस property के द्वारा आप text का direction set करते है। यानी की आप text को किस तरफ से लिखना शुरू करना चाहते है। ये बाँयी और से दाँयी और भी हो सकता है और दाँयी और से बाँयी और भी हो सकता है। निचे दी गयी values में से आप कोई भी value इस property की 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 जैसा ही होता है।
इसका उदाहरण निचे दिया जा रहा है।
<html>
|
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 करती है। आइये इनके बारे में जानने का प्रयास करते है।
Setting Background Color
CSS के द्वारा background color set करने के लिए आप background-color property यूज़ करते है। इस property की value आप color का नाम या hex code दे सकते है। आइये इसे एक उदाहरण से समझते है।
<html>
|
Setting Image Background
CSS के द्वारा image को background के रूप में set किया जा सकता है। इसके लिए background-image property यूज़ की जाती है। इस property की value के रूप में image का url दिया जाता है। इसका उदाहरण निचे दिया जा रहा है।
<html>
|
Very helpful
ReplyDelete