Table of Contents
CSS introduction
Css का full form cascading style sheets है वह एक style sheet language है| css का इस्तेमाल html document का design set करने के लिए किया जाता है|| हम देख सकते है की सभी websites का desing जो होती है वह अलग-अलग होती है ये सभी website का different design set करने के लिए css का इस्तेमाल हुवा होता है||
Css के इस्तेमाल से हम device के अनुसार website का layout को set कर सकते है जैसे की माँन लीजिये एक website है जो laptop की screen में उसका view अलग दिखेगा और notepad और mobile में उसका view अलग होगा मतलब की हम css के इस्तेमाल से website responsive view में set कर सकते है||
Css एक frontent side style sheet language है| css हमारी website का look ज्यादा अच्छा और attractive दिखे इसलिए हम css के इस्तेमाल से attractive desing set कर सकते है|| मान लीजिए हमे हमारी website में color set करना , text का font-size , font-family , font-color , text-alignment set हम css की मदद से कर सकते है||
css syntax:
selector
{
property:value;
}
Example:
p
{
color:green;
font-size:3px;
}
css को लिखने के लिए सामान्य rules ऊपर में देख सकते है||
Selector : selector यानि की webpage का element name, class , id name ये सभी हो सकते है|| perticuler element पे css की effect set करने के लिए class , id name और खुद element का selector की तोर पर इस्तेमाल कर सकते है|
Property : property जो है वह perticuler element को effected करने के लिए है property जैसे की color, padding , margin , background , alignment, display ये सभी css में खास इस्तेमाल होनेवाली property है||
Value : किसी बी property को define करने के बाद property के related value का इस्तेमाल किया जाता है || example की तोर पर property font-size , color , background है और उसकी value हम कुछ इस तरह से लिख सकते है||
font-size:15px; , color:green; , background:white;
property और value की combination को हम declaration कह सकते है || एक selector के लिए हम multiple declaration define कर सकते है||
For example :
h1{
font-size:15px;
color:green;
font-family:roman;
bottom-border:1px solid #000;
}
ऊपर के example में देख सकते है की h1 selector है और उसके लिए हमने multiple declaration define किये है जैसे की font-size:15px; , color:green; , font-family:roman; , bottom-border:1px solid #000; declaration है||
Css syntax example
निचे के example से हम समझेंगे selector के लिए css property और उसकी value की कैसे declaration कर सकते है|
div{
width:50px;
height:50px;
color:green;
border-radius:5px;
border:1px solid #0f0f0f;
text-align:center;
font-size:15px;
}
ऊपर के example में देख सकते है की div selector है और multiple declaration define किये है| width:50px और height:50px declaration perticuler div की width और height set करने के लिए इस्तेमाल की गए है|| background-color:green; declaration div के background में background color set करने के लिए इस्तेमाल किया गया है || border:1px solid #0f0f0f; declaration div के चारो और से border set करने के लिए इस्तेमाल किये गया है ||
Css set करने के लिए css selectors
Css style add करने के लिए html elements या element के class और id का इस्तेमाल से किया जाता है ||
classes का इस्तेमाल कब कर सकते है
webpage में multiple एक से ज्यादा element के लिए same css style add करनी पड जाये तब हम elements में classes का इस्तेमाल से set कर सकते है |
Example से समजते है webpages में four section है उसमे से पहले दो section का background color red का set करना हो और उसके बाद के दो section का background color yellow set करना हो तो पहले दो section में same class name redclass set करेंगे और उसके बाद दूसरे दो section के लिए बी same class name yellowclass set करेंगे| और इस section के same class name के इस्तेमाल करके सभी same class name वाले section element के लिए background color set कर सकते है ||
css के लिए class name dote ( . ) के साथ define कर सकते है document में dot ( . ) का मतलब वह class define करने के लिए है ||
Example :
//first two section
.redclass{
background-color: red;
}
//after two section
.yellowclass{
background-color: yellow;
}
ids का इस्तेमाल कब कर सकते है
id webpage के element में एक बार ही इस्तेमाल की जाती है id को element के opening tag में define कर सकते है ||css style के लिए id name ( # ) के साथ define कर सकते है| # का मतलब वह id name define करने के लिए है ||
Type of CSS in Hindi
css style को document में तीन तरीके से add कर सकते है|
- inline css
- internal css
- external css
1.Inline css
Inline css में css को हम element के opening tag में style attribute का इस्तेमाल करके css set कर सकते है ||
2.Internal css
Internal css में एक ही document में element का इस्तेमाल करके उसमे css style add कर सकते है || </p>
3.External css
External css में css की अलग file होती है और हमे सभी css style इस में लिखनी होती है और इस file को हम document page में externally link कर सकते है||
