HTML CSS In Hindi | Mayank Salvi

CSS का मतलब कैस्केडिंग स्टाइल शीट है। CSS बहुत काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।
Mayank Salvi

 

HTML Styles - CSS

CSS का मतलब कैस्केडिंग स्टाइल शीट है।

CSS बहुत काम बचाता है। यह एक साथ कई वेब पेजों के लेआउट को नियंत्रित कर सकता है।

What is CSS?

कैस्केडिंग स्टाइल शीट्स (CSS) का उपयोग वेबपेज के layout को format करने के लिए किया जाता है।

CSS के साथ, आप color, font, the size of text, elements के बीच की दूरी, elements को कैसे तैनात(laid) और निर्धारित(positioned) किया जाता है, background images या background colors का उपयोग करने के लिए, विभिन्न devices और screen sizes के लिए अलग-अलग displays को नियंत्रित कर सकते हैं, और बहुत कुछ!

Tip: कैस्केडिंग शब्द का अर्थ है कि parent element पर applied style parent element के भीतर के सभी children elements पर भी लागू होगी। इसलिए, यदि आप body के text का रंग "नीला" सेट करते हैं, तो सभी headings, paragraphs, और body के अन्य text elements को भी एक ही रंग मिलेगा (जब तक कि आप कुछ और specify नहीं करते)!

Using CSS

HTML documents में CSS को 3 तरीकों से add किया जा सकता है:

Inline – HTML elements के अंदर style attribute का उपयोग करके

Internal  -  <head> section में एक <style> element का उपयोग करके

External - external CSS फ़ाइल से लिंक करने के लिए एक <link> element का उपयोग करके

CSS add करने का सबसे common तरीका है, styles को external CSS files में रखना। हालाँकि, इस tutorial में हम inline और internal styles का उपयोग करेंगे, क्योंकि यह प्रदर्शित करना आसान है, और आपके लिए इसे स्वयं आज़माना आसान है।

Inline CSS

एक inline CSS का उपयोग एक HTML element में एक unique style को apply करने के लिए किया जाता है।

एक inline CSS एक HTML element की style attribute का उपयोग करता है ।

निम्न उदाहरण <h1> element के  text color को नीला और <p> element के text color को लाल रंग में सेट करता है :

Example


<h1 style="color:blue;">A Blue Heading</h1>

<p style="color:red;">A red paragraph.</p>
Copy Code

Internal CSS

एक HTML page के लिए style को define करने के लिए एक internal CSS का उपयोग किया जाता है।

एक <head> element के भीतर, एक HTML page के <style> section में एक internal CSS को define किया गया है ।

निम्न उदाहरण सभी <h1> elements (उस page पर) के text color को blue और सभी <p> elements के text color को red color में सेट करता है। इसके अलावा, page "powderblue" background color के साथ displaye किया जाएगा: 

Example


<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1   {color: blue;}
p    {color: red;}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Copy Code

External CSS

कई HTML pages के लिए style को define करने के लिए एक external style sheet का उपयोग किया जाता है।

external style sheet का उपयोग करने के लिए, प्रत्येक HTML page के <head> section में एक लिंक जोड़ें :

Example


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Copy Code

External style sheet को किसी भी text editor में लिखा जा सकता है। file में कोई HTML कोड नहीं होना चाहिए, और इसे .css extension के साथ saved किया जाना चाहिए।

यहाँ द‍ेखिये "styles.css" फ़ाइल कैसी दिखती है:

"styles.css":


body {
  background-color: powderblue;
}
h1 {
  color: blue;
}
p {
  color: red;
}
Copy Code

Tip: external style sheet के साथ, आप एक फ़ाइल को बदलकर, पूरी वेब साइट का रूप बदल सकते हैं!

CSS Colors, Fonts and Sizes

यहां, हम कुछ commonly उपयोग किए जाने वाले CSS properties को प्रदर्शित करेंगे। आप उनके बारे में बाद में जानेंगे।

CSS color property उपयोग किए जाने वाले text color को define करता है।

CSS font-family property उपयोग किए जाने वाले font को define करता है।

CSS font-size property उपयोग किए जाने वाले text size को define करता है।

Example

CSS के color, font-family और font-size properties का उपयोग:


<!DOCTYPE html>
<html>
<head>
<style>
h1 {
  color: blue;
  font-family: verdana;
  font-size: 300%;
}
p {
  color: red;
  font-family: courier;
  font-size: 160%;
}
</style>
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
Copy Code

CSS Border

CSS border property HTML element के चारों ओर एक border को define करता है।

Tip: आप लगभग सभी HTML elements के लिए एक border define कर सकते हैं।

Example

CSS border property का उपयोग:


p {
  border: 2px solid powderblue;
}
Copy Code

CSS Padding

Example

CSS padding property text और border के बीच एक padding (स्पेस) को define करता है।


p {
  border: 2px solid powderblue;
  padding: 30px;
}
Copy Code

Example

CSS बॉर्डर और मार्जिन गुणों का उपयोग:


p {
  border: 2px solid powderblue;
  margin: 50px;
}
Copy Code

Link to External CSS

External style sheets को एक full URL या current web पेज के relative path के साथ reference किया जा सकता है।

Example

यह उदाहरण style sheet से लिंक करने के लिए एक full URL का उपयोग करता है:


<link rel="stylesheet" href="https://www.mayanksalvi.blogspot.com/html/styles.css">
Copy Code

Example

यह उदाहरण current web site पर html folder में स्थित style sheet से लिंक करता है:


<link rel="stylesheet" href="/html/styles.css">
Copy Code

यह उदाहरण current web site पर html folder  में स्थित style sheet से लिंक करता है: 

Example

यह उदाहरण current page के समान folder में स्थित style sheet से लिंक करता है:


<link rel="stylesheet" href="styles.css">
Copy Code

Chapter Summary

  • inline styling के लिए HTML Style attribute का उपयोग करें
  •  internal CSS को define करने के लिए HTML <style> element का प्रयोग करें
  • external CSS file को refer करने के लिए HTML <link> element का उपयोग करें
  • <style> और <link> elements को store करने के लिए HTML <head> element का उपयोग करें
  • text colors के लिए CSS Color property का उपयोग करें
  • text fonts के लिए CSS font-family property का उपयोग करें
  • text sizes के लिए CSS font-size property का इस्तेमाल करें
  • बॉर्डर के लिए CSS border property का उपयोग करें
  • borders के अंदर space के लिए CSS Padding property का प्रयोग करें
  • borders के बाहर space के लिए CSS margin property का उपयोग करें

 Also Read: 

Complete HTML Series In Hindi:  Click Here