CSS में एक्सटर्नल स्टाइल शीट्स लिंक करना

CSS हमें हमारी फाइल्स में एक्सटर्नल स्टाइल शीट्स लिंक करने की अनुमति देता है। यह हमें CSS में अलग से बदलाव करने में मदद करता है और पेज लोड समय में सुधार करता है। एक्सटर्नल फाइल्स को डॉक्यूमेंट के <head> के अंदर <link> टैग में निर्दिष्ट किया जाता है।

सिंटैक्स

एक्सटर्नल CSS को शामिल करने का सिंटैक्स निम्नलिखित है।

<link rel="stylesheet" href="#location">

उदाहरण

निम्नलिखित उदाहरण दर्शाते हैं कि CSS फाइल्स कैसे एम्बेड की जाती हैं:

HTML फाइल

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Text</h2> <div> <ul> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> <li>This is demo text.</li> </ul> </div> </body> </html>

CSS फाइल

h2 {    color: red; } div {    background-color: lightcyan; }

आउटपुट

यह निम्नलिखित आउटपुट देता है:

एक और उदाहरण

HTML फाइल

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h2>Demo Heading</h2> <p>This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. This is demo text. </p> </body> </html>

CSS फाइल

p {    background: url("https://www.tutorialspoint.com/images/QAicon.png");    background-origin: content-box;    background-size: cover;    box-shadow: 0 0 3px black;    padding: 20px;    background-origin: border-box; }

आउटपुट

यह निम्नलिखित आउटपुट देता है: