CSS क्या है? –
CSS stands for Cascading Style Sheets
CSS बताता है कि HTML तत्वों को स्क्रीन पर कैसे प्रदर्शित किया जाए।
सीएसएस का उपयोग क्यों करें? –
CSS का Use वेब Page की Style को Define करने के लिए किया जाता है, जिसमें अलग-अलग Device और स्क्रीन Size के लिए Design, Layout और Display में विविधताएं शामिल हैं।
CSS Syntax –
एक CSS Syntax में एक Selector और एक Declaration Block होता है।
Selector उस HTML Element को Point करता है जिसे आप Style देना चाहते हैं।
Declaration Blockमें Semicolons द्वारा अलग किए गए एक या अधिक Declaration होते हैं।
प्रत्येकDeclarationमें एक CSS Property का Name और एक Value शामिल होता है, जिसे एक Colon द्वारा अलग किया जाता है।
एक CSS Declaration हमेशा Semicolons के साथ समाप्त होती है, औरDeclaration BlockCurly Braces जैसे ( { } ) से घिरे होते हैं।
CSS Selectors
CSS Selectors का use उन HTML Elements को Select या Point करने के लिए किया जाता है जिन्हें आप Style करना चाहते हैं।
CSS Element Selector –
Element Selector Element name के आधार पर HTML Element का चयन करता है।
p {color: red; text-align: center;}
यहाँ P एक Paragraph Element ( HTML Tag ) है।
CSS Class Selector –
Class Selector एक Specific Class Attribute वाले HTML Element का चयन करता है।
एक Specific Class वाले Elements का चयन करने के लिए, एक Dot (.) Character लिखें, उसके बाद Class का name लिखें।
.center { text-align: center; color: red;}
हम यह भी Specify कर सकते हैं कि किसी Class द्वारा केवल Specific HTML Element प्रभावित होने चाहिए।
Following example –
p.center { text-align: center; color: red; }
केवल
elements Center Class के साथ Center Align होंगे।
CSS Id Selector –
Id Selector एक Specific Element का चयन करने के लिए एक HTML Element की Id Attribute का Use करता है।
एक Element की ID एक Page के अंदर यूनिक है, इसलिए Id Selector का Use एक यूनिक Element का चयन करने के लिए किया जाता हैं।
किसी Specific ID वाले Element का चयन करने के लिए, एक हैश (#) Character लिखें, उसके बाद Element की ID लिखें।
id = “one”
#one { text-align: center; color: red;}
CSS Universal Selector –
Universal Selector (*) Page पर सभी HTML Element का चयन करता है।
* {text-align: center; blue color;}
CSS Grouping Selector –
Grouping Selector समान Style परिभाषाओं वाले सभी HTML Elements का चयन करता है।
Code को कम करने के लिए Selectors को Group करना बेहतर होगा।
Selectors को Group करने के लिए, प्रत्येक Selector को Comma से अलग करना होगा।
निम्नलिखित CSS Code को देखें –
h1, h2, p {text-align: center; color: red;}
HTML फ़ाइल के साथ CSS कैसे जोड़ें –
CSS को HTML फ़ाइल से लिंक करने के तीन तरीके
- Inline CSS
- Internal CSS
- External CSS
Inline CSS –
एक Element के लिए एक Unique Style Apply करने के लिए एक Inline Css Style का Use किया जा सकता है।
style = “color: blue; text-align: center;”>This is a title
इनलाइन CSS का Use HTML फ़ाइल में Element के साथ उसी लाइन में किया जाता है।
Internal CSS –
एक internal style sheet का Use किया जा सकता है। यह एक One Single HTML Page की एक Unique Style है।
Internal Style को
External CSS –
External Style Sheet File को HTML से लिंक कर के पूरी वेबसाइट की Style को बदल सकते हैं।
प्रत्येक HTML Page में Element के अंदर, Head Section के अंदर External Style Sheet File का Reference शामिल होना चाहिए।
External Style Sheet को HTML Page के
Section के अंदर Element के अंदर defined किया गया है।rel =”stylesheet” type =”text/css” href =”mystyle.css”>
CSS फ़ाइल का नाम mystyle.css