image not found

Inline Internal External Css Difference With Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Code karne do</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- external css link click and check this path-->
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- end External css -->

<!-- external css -->
<style type="text/css">
.internal_css {
background: #ededed;
width: 50%;
margin: auto;
position: relative;
text-align: center;
font-size: 20px;
box-shadow: 0px 0px 27px #06d9ac inset;
padding: 12px;
top: 10vh;
margin-bottom: 20px;
border: 5px solid #06d9ac;}
</style>
<!-- end internal css -->

</head>
<body>
<!-- inline Css us in style add in same div like this example -->
<div style="background: #ededed; width: 50%;margin: auto;position: relative;text-align: center; font-size: 20px;box-shadow: 0px 0px 27px #00a61d inset; padding: 12px;top: 10vh;margin-bottom: 20px;border: 5px solid #00a61d;">
<img src="https://codekarnedo.com/malinLogo.png" width="150">
<p>Manish Gurjar</p>
</div>
<!-- End inline Css -->

<!-- --------------------------------------------------------------------------------------------------------------------------------- -->

<!-- start internal Add class name in same page & write same page in css example <style> </style> css -->
<div class="internal_css">
<img src="https://codekarnedo.com/malinLogo.png" width="150">
<p>Raghav Choudhary</p>
</div>
<!-- end Internal Css -->

<!-- --------------------------------------------------------------------------------------------------------------------------------- -->

<!-- write Class Name & add link and write there css -->
<div class="external_css">
<img src="https://codekarnedo.com/malinLogo.png" width="150">
<p>Ram Singh Yadav</p>
</div>
<!-- EXternal Css END-->

<h2>inline internal external css difference</h2>

</body>
</html>

<!-- --------------------------------------------------------------------------------------------------------------------------------- -->

1. इनलाइन CSS (Inline CSS)

इनलाइन CSS का उपयोग तब किया जाता है जब आप किसी HTML एलिमेंट में सीधे स्टाइल जोड़ना चाहते हैं। इसका उपयोग विशेष एलिमेंट्स के लिए विशेष स्टाइल्स को निर्दिष्ट करने के लिए किया जाता है।


उदाहरण:

<p style="color: red; font-size: 20px;">यह एक इनलाइन स्टाइल है।</p>

<!-- --------------------------------------------------------------------------------------------------------------------------------- -->


<!-- --------------------------------------------------------------------------------------------------------------------------------- -->

2. इंटरनल CSS (Internal CSS)

इंटरनल CSS का उपयोग एक HTML पेज के हेड सेक्शन में <style> टैग के अंदर स्टाइल जोड़ने के लिए किया जाता है। यह एक ही पेज के लिए स्टाइल्स को लागू करता है।


उदाहरण:

<!DOCTYPE html>

<html>

<head>

<style>

p {

color: blue;

font-size: 18px;

}

</style>

</head>

<body>

<p>यह एक इंटरनल स्टाइल है।</p>

</body>

</html>

<!-- --------------------------------------------------------------------------------------------------------------------------------- -->


<!-- --------------------------------------------------------------------------------------------------------------------------------- -->


3. एक्सटर्नल CSS (External CSS)

एक्सटर्नल CSS का उपयोग एक अलग CSS फाइल में स्टाइल्स को रखने के लिए किया जाता है और HTML डॉक्यूमेंट में <link> टैग का उपयोग करके उसे जोड़ा जाता है। इसका उपयोग कई HTML पेजों के लिए एकसमान स्टाइल्स को लागू करने के लिए किया जाता है।


उदाहरण:

style.css:

p { color: green; font-size: 16px; }


<!DOCTYPE html>

<html>

<head>

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

</head>

<body>

<p>यह एक एक्सटर्नल स्टाइल है।</p>

</body>

</html>

<!-- --------------------------------------------------------------------------------------------------------------------------------- -->


मुख्य अंतर:


  1. इनलाइन CSS: सीधे HTML एलिमेंट में स्टाइल जोड़ता है। यह केवल उसी एलिमेंट पर लागू होता है।
  2. इंटरनल CSS: HTML डॉक्यूमेंट के हेड सेक्शन में <style> टैग का उपयोग करता है और पूरे पेज पर लागू होता है।
  3. एक्सटर्नल CSS: अलग CSS फाइल का उपयोग करता है और कई HTML पेजों पर एकसमान स्टाइल लागू कर सकता है।

इन तीनों का उपयोग उनकी आवश्यकता और विशेष परिस्थितियों के आधार पर किया जाता है।


empty

empty

Comments (0 )

Leave A Comment

Click for Ad