How To Add CSS

CSS को HTML में कैसे जोड़ते हैं?

CSS को HTML document में जोड़ने के तीन तरीके होते हैं:

  • Inline CSS
  • Internal CSS
  • External CSS

इन तरीकों से browser को पता चलता है कि CSS कहाँ से load करनी है।

1. Inline CSS

Inline CSS directly HTML element के अंदर style attribute के जरिए लिखी जाती है।

Example

<p style="color: red; font-size: 18px;">
  This is a paragraph
</p>

Points

  • सिर्फ उसी element पर apply होती है
  • Quick testing के लिए useful
  • Reusable नहीं होती

2. Internal CSS

Internal CSS same HTML file के अंदर <style> tag में लिखी जाती है।
<style> tag हमेशा <head> section के अंदर होता है।

Example

<!DOCTYPE html>
<html>
<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>
<body>

<p>This is a paragraph</p>

</body>
</html>

Points

  • Single page styling के लिए सही
  • Multiple elements पर apply होती है
  • Large project के लिए suitable नहीं

3. External CSS

External CSS सबसे recommended तरीका है।
इसमें CSS को अलग .css file में लिखा जाता है।

Step 1: CSS File बनाएँ

/* style.css */
p {
  color: green;
  font-size: 18px;
}

Step 2: CSS File को HTML से जोड़ें

<link rel="stylesheet" href="style.css">

<link> tag हमेशा <head> section के अंदर लिखा जाता है।

CSS File का Path

Same Folder

<link rel="stylesheet" href="style.css">

CSS Folder के अंदर

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

Multiple CSS Files जोड़ना

एक HTML file में एक से ज्यादा CSS files जोड़ सकते हैं।

<link rel="stylesheet" href="layout.css">
<link rel="stylesheet" href="colors.css">

Browser ऊपर से नीचे CSS read करता है।

CSS Apply Order

अगर एक ही element पर multiple CSS rules apply हों, तो priority ऐसे काम करती है:

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

अगर same type की CSS है, तो last rule apply होती है।

Common Mistakes

CSS File Link गलत जगह लिखना

गलत:

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

सही:

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

File Name या Path गलत होना

अगर CSS apply नहीं हो रही:

  • File name check करें
  • Path सही है या नहीं देखें

Summary

  • CSS जोड़ने के 3 तरीके होते हैं
  • Inline CSS element-specific होती है
  • Internal CSS page-specific होती है
  • External CSS reusable और best practice है

Share your love

Related Posts