What is CSS in Hindi | CSS क्या है | Cascading Style Sheets कैसे सीखे

by

कुछ समय पहले इंटरनेट पर उपलब्ध बहुत से 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 आदि.

What is 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 है.

What is CSS in Hindi , CSS क्या है - Cascading Style Sheets कैसे सीखे
What is CSS in Hindi , CSS क्या है – Cascading Style Sheets कैसे सीखे

यह 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 }

  1. Selector – यहाँ Selector का अर्थ जिस Html Tag पर Design लगाना हो उसका नाम लिखा जाता है
  2. 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>

Join Our Telegram

CSS FAQ in Hindi

CSS क्या है ?

सीएसएस कम्प्यूटर की एक प्रोग्रामिंग भाषा है. जिसे वेब पेज अथवा वेबसाइट को Design देने के लिए उपयोग में ली जाती है. जिसका पहला Version 1996 में प्रकाशित किया गया था.

CSS का Full Form क्या होता है ?

सीएसएस का पूरा नाम Cascading Style Sheets होता है.

CSS की खोज किसने की ?

सीएसएस भाषा की खोज Hakon Wium Lie ने 17 दिसम्बर 1996 में की. जिसे World Wide Web Consortium द्वारा प्रकाशित किया गया. सीएसएस का सबसे Latest Version CSS-3 है.

CSS के लाभ क्या – क्या है ?

सीएसएस का सबसे बड़ा लाभ ये होता है की इसे बार बार लिखने की जरूरत नहीं होती. साथ ही एक Stylesheet को अलग अलग Web Pages पर Apply किया जा सकता है. जिससे समय की बचत होती है. तथा वेब पेज की Speed बढ़ जाती है. सीएसएस में बदलाव करना आसान होता है. तथा Media Queries Rules से बने वेबपेज प्रत्येक उपकरण की Screen के अनुसार Set हो जाते है.

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).

Know More for Information Click Below Links

Leave a Comment

error: Content is protected !!