आज इस आर्टिकल में हम आपको CSS Insert StyleSheet into Project Tutorial in Hindi – Part 2 के बारे में बताने जा रहे है. यह बहुत ही important tutorial है जिसको समझना ज्यादा मुश्किल भी नही है.
CSS की फाइल को हम 3 तरीकों से अपने HTML document में apply या attach कर सकते है.
- Inline Method
- Internal Method
- 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>>>>>>
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>>>>>
Leave a Reply