HTML CSS



HTML CSS क्या है?

CSS का Full Form Cascading Style Sheet हैं।

CSS एक language हैं।

CSS Language के जरिये आप web page के style को change कर सकते हो।

यानि की आप web page को colored बना सकते हो और elements को अच्छे से structure form में display करवा सकते हैं।

CSS का यही काम होता है की यह web page और website को attractive बनाए।

हमने HTML में style tag का use किया है और यह CSS की properties हैं।

CSS के जरिये आप अपना काफी समय बचा सकते हैं।

इसका मतलब यह है कि जब भी आप web page को design करें तो आपको CSS का code बार- बार नहीं लिखना होगा।

आप एक ही CSS file से बाकी सब web page को connect कर सकते हैं।

HTML CSS के प्रकार

CSS can be added to HTML documents in 3 ways:
  1. Inline CSS
  2. Internal CSS
  3. External CSS
CSS को जोड़ने का सबसे आम तरीका है, Styles को External CSS फाइलों में रखना। परन्तु, इस Tech में हम Inline और Internal Styles का उपयोग करेंगे, क्योंकि यह प्रदर्शित करना आसान हैं।

Inline CSS क्या है?

Inline CSS का उपयोग हर HTML Element को एक-एक करके unique style में change किया जाता हैं।

इनका use हमने अपने पिछले बहुत से आर्टिकल में किया हैं।

Inline CSS का प्रयोग style attribute में किया जाता हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS in English</title>
</head>
 <body>
    <h1 style="color: blue;">Heading Blue Color in Inline CSS</h1>
    <p style="color: red;">Paragraph Red Color in Inline CSS</p>
 </body>
 </html>

Output:

Heading Blue Color in Inline CSS

Paragraph Red Color in Inline CSS



Internal CSS क्या है?

HTML में Internal CSS को Single HTML Page में Define किया जा सकता है।

Internal CSS के लिए हम head tag का इस्तेमाल करते हैं।

Head tag में हम style attribute के साथ CSS को लिखते हैं।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>Inline CSS in English</title>
    <style>
    h1{
          color: aqua;
    }
    p{
          color: purple;
    }
    </style>
</head>
<body>
    <h1>Heading aqua Color in Internal CSS</h1>
    <p>Paragraph purple Color in Internal CSS</p>
</body>
</html>

Output:

Heading aqua Color in Internal CSS

Paragraph purple Color in Internal CSS



External CSS क्या है?

HTML में External CSS का use हम बहुत से HTML Page के style को एक साथ बनाने के लिए करते हैं।

इसके जरिये आप पूरी Website के Look को एक ही फाइल से change कर सकते हो।

External style sheet को प्रयोग करने के लिए आपको HTML Page के में file link करनी होगी।

उदाहरण:

<!DOCTYPE html>
<html>
<head>
    <title>External CSS in English</title>

    <link rel="stylesheet" type="text/css" href="style.css">

</head>
 <body>
    <h1>Heading Orange Color in External CSS</h1>
    <p>Paragraph Blue Color in External CSS</p>
 </body>
 </html>

Output:

Heading Orange Color in External CSS

Paragraph Blue Color in External CSS

NOTE:

आप External style sheet को किसी भी Text editor से create कर सकते हो।

यह आपकी नई file होनी चाहिए।

बस आपको इतना ध्यान रखना है कि नई file को save करते समय .html की जगह .css से file save होनी चाहिए।

अब .css file पर नजर डाल लेते हैं कि यह कैसी होगी।

New File Name is style.css

  1.     h1{
  2.               color: orange;
  3.     }
  4.     p{
  5.               color: blue;
  6.    }





हमने h1 को red color दिया हैं।

और अंत में paragraph को orange color दिया हैं।

External style sheet में फर्क इतना है कि यह दूसरी फाइल में save होती हैं।

External फाइल को html के साथ link करना पड़ता हैं।

HTML में link करने की प्रक्रिया case sensitive हैं।

इसका मतलब यह है की अगर आपने file का नाम index.css है तो आपको वही लिखना पड़ेगा।

आप इसे Index.css नहीं लिख सकते हैं।