Learn CSS in Hindi - Web Development: Part-5

एक अच्छी Design की Website ही आज के समय में सभी चाहते है। Market में एक से एक Better quality design की website मौजूद है। जब भी कोई visitor website पे आता है। तो वो सबसे पहले website की Designs को ही देखता है। पहला Impression Visitor पे Website की design से ही पड़ता है। अगर website की Design अच्छी नहीं है तो काफी visitor वापस लौट जाते है। तो एक Website developer को Design की बेहतरीन जानकारी होना काफी आवश्यक है। 

किसी भी Website को Design करने के लिए CSS की आवश्यकता होती है Without CSS किसी भी website को Design नहीं किया जा सकता है। इसलिए Web Development Part -5 Article CSS Learning पे है। इससे पहले हम Web development के चार Article create कर चुका हूँ। अगर आप Web development सीख रहे है। तो सभी article को Series by read करे। तभी Web development समझ में आएगी।


Article LinkTopics
1. Learn Web Development in Hindi Learn Basics Web Development 
2. Learn Web Development in Hindi: Part-2 Which is Web Development Language
3. Learn Web Development in Hindi: Part-3 How to Learn Web Development Language
4. Learn HTML in Hindi - Web Development: Part-4 Learn HTML Language 

Learn CSS in Hindi

CSS का पूरा नाम  Cascading Style Sheets है। Web Pages को Design करने के लिए CSS का Use किया जाता है। CSS की basic जानकारी Part -2 में दी जा चुकी है। इसलिए इसकी यहाँ पे Basic जानकारी नहीं देंगे।तो अब इसे सीखना शुरू करते है।

CSS Syntax

एक CSS Syntax में Selector और Declaration Block होता है।

Selector --   किसी भी  HTML Tag Element को डिज़ाइन करने के लिए उसे Select करना होता है। उसी को                      Selector कहते है। CSS Selector के नियम (Rule ) से उससे select किया जाता है।

Declaration-  CSS Declaration के अंतर्गत हम Style करते है। किसी भी Selector में Multiple Declaration                        create कर सकते है। ये Curly bracket { से स्टार्ट होता है और } इससे end होता है। इसी में                              Property और Value होती है।

CSS Comments

जब कोई भी CSS File create करते है। तब उसको समझना इतना आसान नहीं है की कहाँ पे कौन-सा Syntax है। इसलिए CSS file में comments को create किया जाता है। जो की Run नहीं होता है। उसे file में देख सकते है। जिसके माध्यम से आसानी से पूरी File के source code को समझा जाता है।

इसे developer को जरुरत पड़ता है। जब File को edit करना होता है। तो चलिए जानते है। CSS में Comments कैसे create करते है।
CSS Comments  /*  इससे शुरू होती है end */ इससे होती है।


/* This is a single-line comment */
p {
  color: red; text-align:left;
} 
इसे Single line comment कहते है। 

CSS Color

CSS में Color create करना काफी आसान है। इसके लिए CSS property Color लेते है। उसकी value Color name लेते है जैसे-   color: red;
लेकिन जब हमें Advance color create करना होता है। तो उसके कई Different तरीके है। जिनके माध्यम से color create करते है। यहाँ पे वो सभी तरीके बताये गए है।
1. Color नाम के द्वारा 
2. RGB value के द्वारा 
3. Hexadecimal Value के द्वारा 

Color Name - Color name के द्वारा CSS में color कैसे add करते है। ये तो आप ऊपर जान चुके है।

RGB Value -   RGB Value में Color create करने का एक फार्मूला है। जिसे RGB Formula के नाम से जाना                           जाता है। 
                                                                        rgb (Red, Green, Blue)
                           इसमें हम Code को इस्तेमाल करते है। प्रत्येक code की intensity 0 से 255 तक होती है। 
                                                                        rgb(0,255,0) 
                           इसमें Green की Value full है बाकि सभी की 0 तो ये green show होगा। rgb color value                               create करने के लिए कई website है जहा से आप मुफ्त में कुछ ही second में अच्छा सा                                    अच्छा code generate कर सकते है। यहाँ पे आपको Code की practice भी हो जाएगी। और                               इसकी practice काफी जरुरी है। तभी आप एक better code create कर पाएंगे। 
                                                                            RgbColorcode.com

Hexadecimal Value - ये भी rgb की तरह ही है। इसमें red green blue को rrggbb में create करते है। इसमें                                         सभी को mixing करके बनाया जाता है।  Hexadecimal में तीनो color की full value                                       ff और सबसे काम 00 होती है। इन तीनो को mix करके देखते है। ff0000 तो आप                                           देखेंगे सबसे पहले red आता है। और यहाँ red की value ff यानि full है और सबकी                                          00 तो ये red show होगा।             
                                       इसके बारे में ज्यादा जानने के लिए live practice यहाँ से कीजिये। Click Here  

CSS Background

अब आप जानेगे CSS में background कैसे create करते है। CSS में Background एक property होती है। जिसके माध्यम से element पे Background Effect create करते है।Background property में कई Property होती है। जिनके बारे में नीचे बताया गया है। 
1. Background-color
2. Background-image

1. Background-Color 

Background Color Property के माध्यम से HTML Page पे background Color create कर सकते है जैसे-

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
अभी ये सिर्फ एक HTML है जो की इस तरह का show हो रहा है।
अब इसमें हम background create करेंगे। जो की कुछ इस तरह होगा।


<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

<style>

body {

  background-color:red;

}

</style>
</head>

<body>

<h1>Hello World</h1>

</body>

</html>
आप देख सकते है background color में हमने उसकी value red दी है। तो इसका background red होगा।
अब आप Background-color property को अच्छे से समझ चुके है।

2.Background-image

Background-image के द्वारा हम background में image add कर सकते है। इसकी property को इस प्रकार लिखते है।
 {background-image: url("bgdesert.jpg");}



<!DOCTYPE html>
<html>
<head>
<style>
body {
  background-image: url("bgdesert.jpg");
}
</style>
</head>
<body>

<h1>Hello World!</h1>
<p>This text is not easy to read on this background image.</p>

</body>
</html>

Output 


CSS Text

इसमें हम CSS Text के बारे में जानेगे | CSS के द्वारा Text को किस प्रकार Design किया जाता है, इसके माध्यम से एक Better Quality का Text कैसे Create कर सकते है।  Web pages पे Text कैसे Create करते है।  इसके आलावा और भी बहुत कुछ जानेगे जो नीचे बता रहा हूँ। 

  1. Text को Color कैसे करते है। 
  2. Text की Position कैसे Set करते है। 
  3. Text Decoration कैसे करते है। 
  4. Text Shadow कैसे Create करते है। 
  5. Text transformation कैसे करते है। 

1. Text-Color

Text Color Set ऊपर हमने Color set करके दिखाया था।   उसी तरह से Text में Color set किया जाता है।  फिर भी हम एक बार दुबारा Text पे Color Set करते है।  और समझने का प्रयास करते है।  

1. इसके लिए सबसे पहले वो text आपके पास HTML का होना चाहिए जिसे आप Design करना चाहते है। 

<!DOCTYPE html>
<html>
<head>

</head>
<body>

<h1> Great Go Tips </h1>
<p> Great Go Tips is a Online Learning website Where you can learn Web Development, Application Development, and More Tech</p>
</body>
</html>

2. हमने एक Text Create किया है।  जिसमे Heading और Paragraph है।  हम इसको अब Design करेंगे। 

3. सबसे पहले हम उस Element को Select करेंगे।  जिसे हम Design करना चाहते है।  हम Heading को Select करेंगे।  <h1>  इसको Select करने के लिए  h1 {} ले लगे।  

h1 {
  color: blue;
}

4. अब हमको Property और उसकी Value डालनी होगी।  
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
}
</style>
</head>
<body>

<h1> Great Go Tips </h1>
<p> Great Go Tips is a Online Learning website 
Where you can learn
Web Development, Application Development,
and More Tech</p>
</body>
</html>

Output



HTML में CSS <Style> tag के अंदर add की जाती है।  

2. Text-Alignment

Text Alignment Property के द्वारा Text को Horizontal Align किया जाता है। इसके द्वारा Text को Left, Right, Center Justify में Text को Align कर सकते है।  

left- ये एक Default value है।  इसके द्वारा text को left side में set कर सकते है।  

Right- इसके द्वारा Text को Right में set कर सकते है।  

Center- इसके अनुसार text को Left side और Right side के बीच में Set कर सकते है।  लेकिन text में हर जगह space बराबर होता है।  

Justify- Justify के द्वारा Text को बिलकुल fit line में set किया जाता है।  यानि पहला text हमारा left से सुरु होगा और अंतिम शब्द right में रहेगा।  बीच में space ज्यादा हो सकता है।  



<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-align: left;
}

h2 {
  text-align: right;
}

h3 {
  text-align: center;
}
p {
  text-align: justify;
}

</style>
</head>
<body>

<h1>Heading 1 </h1>
<h2>Heading 2 </h2>
<h3>This is Center Text alignment   </h3>

<p>किसी भी Website को Design करने के लिए CSS की आवश्यकता होती है 
Without CSS किसी भी website को Design नहीं किया जा सकता है।
इसलिए Web Development Part -5 Article CSS Learning पे है। 
इससे पहले हम Web development के चार Article create कर चुका हूँ। 
अगर आप Web development सीख रहे है। तो सभी article को 
Series by read करे। तभी Web development समझ में आएगी। </p>

</body>
</html>

Output 

3. Text-Decoration

Text-decoration Property के द्वारा Decorative lines text पर create कर सकते है।  

Text Decoration Other Property 

text-decoration-color
text-decoration-line
text-decoration-style
text-decoration-thickness

हम Text decoration property को समझते है।  इससे क्या - क्या कर सकते है।  इससे text पर line कैसे create करते है।  

text-decoration: overline;  इसके द्वारा text के ऊपर line create कर सकते है।  
text-decoration: line-through;  इसके द्वारा text के बीच में line create कर सकते है।
text-decoration:underline;  इसके द्वारा text के नीचे line create कर सकते है। 


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  text-decoration: overline;
}

h2 {
  text-decoration: line-through;
}

h3 {
  text-decoration: underline;
}
</style>
</head>
<body>

<h1>Great Go Tips</h1>
<h2>Great Go Tips</h2>
<h3>Great Go Tips</h3>

</body>
</html>
Output 


4. Text-Transformation

इस Property का प्रयोग Text में Uppercase और Lowercase letter create करने के लिए किया जाता है। इसके द्वारा किसी भी text को बड़ा कर सकते है, छोटा कर सकते है, या फिर सभी word के पहले अछर को बड़ा कर सकते है। 
नीचे example में आप देख सकते है। 


<!DOCTYPE html>
<html>
<head>
<style>
p.uppercase {
  text-transform: uppercase;
}

p.lowercase {
  text-transform: lowercase;
}

p.capitalize {
  text-transform: capitalize;
}
</style>
</head>
<body>

<p class="uppercase">This is some text.</p>
<p class="lowercase">This is some text.</p>
<p class="capitalize">This is some text.</p>

</body>
</html>



Keep Visiting for advance learn 

Post a Comment