How to add CSS ? CSS kaise use karen

📔 : CSS 🔗

पिछले topic में आपने CSS में Syntax के बारे में पढ़ा और समझा , इस topic में हम बात करेंगे कि web pages में CSS कितने तरीके से use कर सकते हैं।


HTML document में CSS use करने के 3 तरीके होते हैं -

  1. Inline CSS
  2. Internal CSS
  3. External CSS

Inline CSS

directly किसी HTML element पर apply करते हैं।

Inline CSS Example
Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Inline CSS Example</title>
  <body style="background-color:black">
    <h2 style="color:red">Hello Learners</h2>
    <p style="color:green">This is paragraph</p>
  </body>
</html>

हो सके तो Inline CSS को कम ही use करें , यह professional way नहीं है , because आपको हर element में style define करना होता है , जिससे code भी काफी बढ़ जाता है और complexity भी।

Internal CSS

Internal CSS को HTML document के <head></head> section में <style></style> tag में define किया जाता है। यहां आप एक से ज्यादा elements पर style apply कर सकते हैं।

Internal CSS Example

File : test.html

Copy Fullscreen Close Fullscreen Run
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Internal CSS Example</title>
    <style>
      /*change page background color:black*/
      body {
      background-color: black;
      }
      
      /*all h2 headings color : red*/
      h2 {
        color: red;
      }
      
      /*it will apply on all paragraps */
      p {
        font-family: verdana;
        font-size: 20px;
        color: green;
      }</style>
  </head>
  <body>
    <h2>Hello Learners</h2>
    <p>This is paragraph</p>
  </body>
</html>

Inline CSS use न करके आप Internal CSS को आप use कर सकते हैं अगर आपको थोड़ी ज्यादा style apply करनी है।

External CSS

External CSS use का use करके आप पूरी website की design manage कर सकते हैं।

external CSS use करने के लिए हमें .css extension file बनाकर उसमे CSS code लिखते हैं फिर इस file को <head></head> section में link करते हैं।


CSS file को link करने के लिए <link rel="stylesheet" href="css-filepath"> लिखना पड़ता है।

External CSS Example

File : my_style.css

Copy
body {
  background-color: black;
}

/*all h2 headings color : red*/
h2 {
  color: red;
}

/*it will apply on all paragraps */
p {
  font-family: verdana;
  font-size: 20px;
  color: green;
}

File : test.html

Copy Fullscreen Close Fullscreen
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>External CSS Example</title>
    <link rel="stylesheet" href="my_style.css">
  </head>
  <body>
    <h2>Hello Learners</h2>
    <p>This is paragraph</p>
  </body>
</html>

Which one should use ?

  1. अगर आपको simply कोई minor change करना है तो Internal CSS use कर सकते हैं।

  2. और अगर common style apply करनी है, जो सभी pages पर एक जैसी रहेगी तो आप External CSS use कर सकते हैं ।

Related Topics :

Rahul Kumar

Rahul Kumar

Hi ! My name is Rahul Kumar Rajput. I'm a back end web developer and founder of learnhindituts.com. I live in Uttar Pradesh (UP), India and I love to talk about programming as well as writing technical tutorials and tips that can help to others.

Get connected with me. :) LinkedIn Twitter Instagram Facebook

b2eprogrammers