CSS in Hindi | सीएसएस क्या है | Cascading Style Sheets कैसे सीखे | CSS in Hindi | सीएसएस क्या है | Benefit of CSS in Hindi | सीएसएस के लाभ क्या - क्या है | सीएसएस कैसे सीखे - How to Learn CSS in Hindi | Selector Rules | The Element Selector | Declaration Rules
कुछ समय पहले इंटरनेट पर उपलब्ध बहुत से Web Documents बिना Formatting के प्रकाशित किये जाते थे. जिस समस्या के समाधान के लिए HTML Style Tag को विकसित किया गया. इन्ही Style Tags को विकसित करके W3C द्वारा एक अलग ही Language का निर्माण किया गया. जिसे CSS के नाम से जाना जाता है. तो चलिए जानते है - What is CSS in Hindi.
यह HTML Language के साथ ही उपयोग में ली जाती है. HTML से Web Document का Structure तैयार किया जाता है. इसी सरंचना को CSS Language के माध्यम से Formatting दी जाती है. जैसे Background , Text और Style आदि.
CSS in Hindi - सीएसएस क्या है
CSS का पूरा नाम Cascading Style Sheets होता है. यह Computer की एक प्रोग्रामिंग भाषा है. जिसे Web page अथवा Website को Design देने के लिए उपयोग में ली जाती है. जिसका पहला Version 1996 में प्रकाशित किया गया था.
CSS भाषा की खोज Hakon Wium Lie ने 17 दिसम्बर 1996 में की. जिसे World Wide Web Consortium द्वारा प्रकाशित किया गया. सीएसएस का सबसे Latest Version CSS-3 है.
यह HTML की तरह ही एक Independent Language है. जिसका उपयोग किसी भी Platform (Window , Linux , Macintosh) पर किया जा सकता है.
Web pages को Design देने के लिए एक Basic Text Editor प्रोग्राम जैसे - Notepad , Notepad ++ , Dream Weaver , Coffee Cup , Sublime Text आदि की जरूरत पड़ती है. वेब पेज को देखने के लिए एक Browser की जरूरत पड़ती है. Code लिखने के बाद Notepad या अन्य Basic Text Editor प्रोग्रामो की फाइल को .Htm या .Html नाम से Save करना पड़ता है.
Benefit of CSS in Hindi - सीएसएस के लाभ क्या - क्या है
CSS का सबसे बड़ा लाभ ये होता है की जब एक बार सीएसएस नियमो को लिख दिया जाता है. तो उन्हें बार बार लिखने की जरूरत नहीं होती. साथ ही एक Stylesheet को अलग अलग Web Pages पर Apply किया जा सकता है. जिससे समय की बचत होती है. तथा वेब पेज की Speed बढ़ जाती है.
सीएसएस में बदलाव करना आसान होता है. तथा Media Queries Rules से बने वेबपेज प्रत्येक उपकरण की Screen के अनुसार Set हो जाते है.
सीएसएस कैसे सीखे - How to Learn CSS in Hindi
CSS में Text को Design करने के लिए एक सूत्र का उपयोग किया जाता है - Syntax :- Selector { Declaration }
- Selector - यहाँ Selector का अर्थ जिस Html Tag पर Design लगाना हो उसका नाम लिखा जाता है
- Declaration - इसमें दो Points होते है एक Property - Color , Font-Size , Text-Align Etc. दूसरा Value - Color Name , Size Px (Pixel) या Vw (View-Port Width)
Note - ये Head Tag में Style Tag से Define होते है
Selector Rules (A) The Element Selector
- Paragraph - P {Declaration}
<P> Text </P>
- Heading - H1 To H6 {Declaration}
<H1 To H6> Text </H1 To H6>
- Background में Image लगाना
Body {Declaration}
- Highlight करना
Div {Declaration}
<Div> Text </Div>
- Shading लगाना
H1 To H6 , P , Div Style = "Declaration"> Text </H1 To H6 , P , Div>
- Link के नीचे Underline हटाना
A {Declaration}
<A href = "Url"> Text </A>
- Bullets लगाना
Ul {Declaration}
<Ul><Li> Text </Li></Ul>
- Numbering लगाना
Ol {Declaration}
<Ol><Li> Text </Li></Ol>
- Table बनाना
Table {Declaration}
टेबल की Heading बनाना
Th , Td {Declaration}
- Table को Break करना
Tr {Declaration}
<Table> <Th> <Tr> Text </Tr> </Th> </Table>
(B) Declaration Rules
- Property
- Value
Note - Property के बाद Value : लगाकर लिखी जाती है तथा ; से Declaration को Close किया जाता है
- Text पर छाया लगाना
Text-Shadow : 1 px 2 px ;
- Text को कलर देना
Color : कलर नाम ;
- Text को Size देना
Font-Size : साइज ;
- Text पर Alignment लगाना
Text-Align : एलाइनमेंट नाम ;
- Border बनाना व उसको Color लगाना
Border : साइज Solid कलर नाम ;
- Text को Line देना
Text-Decoration : Overline / Linethrough / Underline ;
- Indent लगाना
Text-Indent : साइज ;
- लाइन के बीच जगह छोड़ना
Letter-Spacing : साइज ;
- Words के बीच जगह छोड़ना
Word-Spacing : साइज ;
- Text को Style देना
Font-Style : Normal / Italic / Oblique ;
- Margin छोड़ना
Margin - Top / Bottom : साइज ;
- Background को कलर देना
Background - Color : कलर नाम ;
- नाम को स्पेशल बनाना
# नाम {
Color : कलर नाम ;
}
<नाम Id = "नाम"> Text </नाम>
- स्पेशल List बनाना
नाम . Error {
Color : कलर नाम ;
}
<नाम Class = "Error"> Text </नाम>
- Webpage को Device के अनुसार देखना
<Meta Name = "Viewpoint" Control = "Width = Device-Width , Initial-Scale = 1.0">
- Photo को Webpage के अनुसार देखना
<Img Src = "फोटो का यूआरएल " Alt = "फोटो का नाम" Style = "Width : 100%">
- पुरे Webpage पर एक जैसी Style लगाना
<Link Rel : "Stylesheet" Href = "Url.Css">
- Border को Style देना
नाम . Dotted / Dashes / Solid / Double / Groove / Ridge / Inset / Outset / None
<नाम Class = "बॉर्डर का नाम"> Text </नाम>
- Border के Corner को Style देना
# R Corners {
Border-Radius : साइज ;
}
<नाम Id = "R Corners"> Text </नाम>
- Border के Backgound को Style देना
# Grad{
Backgound - Image : Linear - Gradient / Repeating - Linear Gradient / Radial Gradients / Repeating - Radial Gradients ;
}
<Div Id = "नाम"> </Div>
- Animation बनाना
# Mydiv{
Webkit - Animation :नाम साइज S Infinite ; Animation :नाम साइज S Infinite ;
}
@-Webkit - Keyframe My Name {ऑप्शन }
<Div Id = "Mydiv"> </Div>