HTML डॉक्यूमेंट्स में CSS शामिल करना

HTML डॉक्यूमेंट्स में CSS को शामिल करने के लिए, हम या तो उन्हें इंटरनली, इंलाइन शामिल कर सकते हैं या एक एक्सटर्नल फाइल लिंक कर सकते हैं।

सिंटैक्स

HTML में CSS फाइल्स को शामिल करने का सिंटैक्स निम्नलिखित है:

/*inline*/ <element style="/*declarations*/"></element> /*internal*/ <head> <style> /*declarations*/ </style> </head> /*external*/ <head> <link rel="stylesheet" href="#location"> </head>

उदाहरण

निम्नलिखित उदाहरण HTML डॉक्यूमेंट्स में CSS फाइल की लिंकिंग दिखाते हैं:

इंलाइन CSS

<!DOCTYPE html> <html> <head> </head> <body> <p style="font-family: Forte;">Demo text</p> <p style="background-color: lightblue;">This is Demo text</p> <img src="https://www.tutorialspoint.com/memcached/images/memcached.jpg" style="border: 3px groove orange;"> </body> </html>

आउटपुट

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

उदाहरण

इंटरनल लिंकिंग

<!DOCTYPE html> <html> <head> <style> div { margin: auto; padding: 15px; width: 33%; border: 2px solid; border-radius: 5%; } div > div { border-color: transparent; box-shadow: inset 0 0 6px red; } div > div > div { border-color: red; } </style> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>

आउटपुट

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

उदाहरण

एक्सटर्नल लिंकिंग

CSS में, आप एक एक्सटर्नल CSS फाइल भी शामिल कर सकते हैं और उसमें CSS स्टाइल्स रख सकते हैं। इसे नीचे दिए गए उदाहरण में दिखाए अनुसार HTML फाइल से रेफर किया जा सकता है:

<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <p>Demo text</p> <p>Demo text again</p> </body> </html>

आउटपुट

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

निम्नलिखित style.css है:

p { text-decoration: overline; text-transform: capitalize; }