CSS हमें बाहरी स्टाइल शीट को हमारी फाइलों से जोड़ने की अनुमति देता है। यह हमें सीएसएस में अलग से बदलाव करने में मदद करता है और पेज लोड समय में सुधार करता है। बाहरी फ़ाइलें दस्तावेज़ के
के अंदर टैग में निर्दिष्ट हैं।सिंटैक्स
बाहरी सीएसएस को शामिल करने का सिंटैक्स इस प्रकार है।
<link rel="stylesheet" href="#location">
उदाहरण
निम्नलिखित उदाहरण बताते हैं कि कैसे CSS फाइलें एम्बेड की जाती हैं &miuns;
एचटीएमएल फ़ाइल
<!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>
सीएसएस फ़ाइल
h2 {
color: red;
}
div {
background-color: lightcyan;
} आउटपुट
यह निम्न आउटपुट देता है -
उदाहरण
एचटीएमएल फ़ाइल
<!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>
सीएसएस फ़ाइल
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;
} आउटपुट
यह निम्न आउटपुट देता है -
