If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.
पिछले topic में आपने CSS में Syntax के बारे में पढ़ा और समझा , इस topic में हम बात करेंगे कि web pages में CSS कितने तरीके से use कर सकते हैं।
HTML document में CSS use करने के 3 तरीके होते हैं -
directly किसी HTML element पर apply करते हैं।
<!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 को HTML document के <head></head> section में <style></style> tag में define किया जाता है। यहां आप एक से ज्यादा elements पर style apply कर सकते हैं।
File : test.html
<!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 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"> लिखना पड़ता है।
File : my_style.css
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
<!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>
अगर आपको simply कोई minor change करना है तो Internal CSS use कर सकते हैं।
और अगर common style apply करनी है, जो सभी pages पर एक जैसी रहेगी तो आप External CSS use कर सकते हैं ।
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
