Introduction of CSS3 in Hindi

Posted on by

Cascading Style Sheets (CSS)  का use, HTML document या Web Pages को Design करने के लिए किया जाता हैं | जैसे हम HTML का use कर के web pages create करते हैं, ठीक वैसे ही हम CSS का use कर के उस web pages को design कर के एक अच्छा look दे सकते हैं | CSS3, CSS language का updated version हैं | CSS3 का use कर के हम अपने HTML page को और भी dynamic look दे सकते हैं | यदि आप को CSS language या CSS3 language का बिलकुल भी knowledge नहीं हैं, तो फ़िक्र न करे हमारे इस CSS3 Hindi Tutorial को regular follow करते रहेंगे तो आप CSS3 Language में expert हो जाएंगे और आप बड़ी आसानी से web pages की design कर पाएंगे|

CSS Editor या CSS3 Editor

HTML Editor की तरह CSS या CSS3 को भी किसी भी Text Editor जैसे की Notepad या Notepad++ का use कर के edit कर सकते हैं और CSS का output, web pages पर दिखेगा जिस के लिए हमें web browser की जरुरत पड़ेगी |

Contents hide
1 CSS को हम तीन अलग-अलग तरीके से लिख सकते हैं |
2 1. Inline CSS Method
3 2) Internal CSS Method
4 3. External CSS Method

CSS को हम तीन अलग-अलग तरीके से लिख सकते हैं |

  1. Inline
  2. Internal
  3. External

1. Inline CSS Method

किसी भी HTML Tag के line के अंदर ही CSS Code का use कर के उस HTML Tag या Element को style (Design)  देने की method को Inline CSS method बोला जाता हैं |Inline CSS Method में की गयी coding की effect सिर्फ HTML के उसी Tag तक सिमित रहती हैं |

इसे हम उदाहरण की help से ज्यादा deep में समझने की कोशिश करते हैं, मान लीजिये हमें HTML Tag <div > को width,height  और background colour देना हैं तो Inline CSS method में कुछ इस तरह coding line लिखेंगे |

<div style=”width:50px; height:50px; background-color:#ff00dd;”></div>

ऊपर दीगयी line का output कुछ किस तरत आएगा |


2) Internal CSS Method

CSS की इस internal method में CSS का code web page के head section में लिखा जाता हैं | CSS के internal method में की गयी CSS coding की effect सिर्फ उसी web page पर देखा जा सकता हैं|

यदि हमें web page में multiple HTML elements पर same style effect देनी होती हैं, तब हम CSS की इस method का use कर सकते हैं|

दो या दो से ज्यादा different HTML Tag में same style लाने के लिए हमें HTML Tag में Class Define करना होगा और यदि हमें एक ही type के multiple HTML tag पर same style देना हो तो CSS में उस tag को select कर के बिना class के भी style दे सकते हैं |

For Example

<html>
  <head>
    <style>
      .mytest
      {
        Width:50px;
        Height:40px;
        Background-color:#ffdd99;   
      }
      H1
      {
         Width:30px;
         Height:15px;
         Background:#ffdd99;  
      }
    </style> 
  </head>
  <body>
    <div class=”mytest”>Test</div> 
    <p class=”mytest”>Test</p>
    <h1>Test</h1> 
    <h1>Test1</h1>   
  </body>
</html>

ऊपर दिए गए example में हमने कुछ HTML tag define किये हैं, जिसमे हमने div tag और p tag में class define कर के style दिया हैं और h1 tag को बिना class के style दिया हैं |

CSS में HTML tag के class को select करने के लिए class के name के आगे .(DOT ) लगाना होता हैं और HTML tag को select करने के लिए tag को बिना .(DOT) के define करना होता हैं, जैसे की हमने ऊपर के example में किया हैं |

3. External CSS Method

CSS की इस external method का use कर के हम एक ही CSS file के जरिये website पर multiple HTML web pages में style दे सकते हैं |जब हमें बार बार एक ही style को अलग-अलग web pages में देने की जरुरत होती हैं तब हमारे लिए external css method बहुत ही helpful होती हैं | CSS file का extension .css होता हैं | means CSS file को save करने के लिए file के name के पीछे .css लगाना होता हैं |

External CSS Method का use कर के web page में CSS file को कैसे define करते हैं यह समझने के लिए निचे दिए गए उदहारण को देखे|

<!DOCTYPE html>
<html>
  <head>
    <title>Test Page</title>
    <link rel =“stylesheet” href =“test.css” type = “text/css”>
  </head>
  <body>
    <Div class=”test”></div>  
  </body>  
</html>