CSS Insert StyleSheet into Project Tutorial in Hindi – Part 2

CSS Insert StyleSheet into Project Tutorial in Hindi – Part 2
CSS Insert StyleSheet into Project Tutorial in Hindi - Part 2

आज इस आर्टिकल में हम आपको CSS Insert StyleSheet into Project Tutorial in Hindi – Part 2 के बारे में बताने जा रहे है. यह बहुत ही important tutorial है जिसको समझना ज्यादा मुश्किल भी नही है.

CSS Insert StyleSheet into Project Tutorial in Hindi - Part 2
CSS Insert StyleSheet into Project Tutorial in Hindi – Part 2

CSS की फाइल को हम 3 तरीकों से अपने HTML document में apply या attach कर सकते है.

  1. Inline Method
  2. Internal Method
  3. External Method

इन 3 method से हम किसी भी HTML डॉक्यूमेंट में style अप्लाई करके उसका default layout चेंज कर सकते है. इसमें से सबसे ज्यादा External method का इस्तेमाल किया जाता है. हमने आपको inline के बारे में HTML के style attribute में बताया था जिसको आप आगे दिए गए लिंक से चेक कर सकते है. HTML Style Tutorials in Hindi – Part 5

Internal Stylesheet Method

इसके लिए आपको HTML डॉक्यूमेंट में ही <style> element का इस्तेमाल HTML डॉक्यूमेंट में ही रखना होता जिसको आप head element के अन्दर रख कर किसी भी element, id और classname को target कर सकते है जिसके बारे में हमने आपको पिछले tutorial में बताया था और इसका एक डेमो हम आपको नीचे दे रहे है.

Example

<!DOCTYPE html>
<html>
 <head>
  <style>
   body {
    background-color: skyblue;
    }
  h1 {
    color: green;
    margin-left: 40px;
    }
  </style>
</head>
<body>

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

</body>
</html>

Output>>>>>>

Internal Stylesheet Method
Internal Stylesheet Method

External Stylesheet Method

इसका इस्तेमाल अलग से बनी CSS को html डॉक्यूमेंट में attach करने के लिए किया जाता है. इसके लिए आपको css की फाइल .css के extension name से सेव करनी होती है जैसे की- style.css

CSS की फाइल में आपको style element का इस्तेमाल करने की जरूरत नही होती है आप इस फाइल में डायरेक्ट css element को target करके उस पर property अप्लाई कर सकते है.

Style.css

body{
  background-color: red;
}
h1{
  text-align: center;
}
p{
  color: yellow;
}

HTML File

<!DOCTYPE html>
<html>
 <head>
  <link rel=”stylesheet” type=”text/css” href=”style.css”>
 </head>
 <body>
  <h1>This is a heading</h1>
  <p>This is a paragraph.</p>
  </body>
</html>

Output>>>>>

External Stylesheet Method
External Stylesheet Method

CSS Color Name, RGB & Hex Code Tutorials in Hindi – Part 3>>>>>>>>>>

इसे भी पढ़े – HTML Course in Hindi | Hindi Alerts Pro Tutorials in Hindi

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *