हम HTML पेजेस में CSS को तीन तरीकों से शामिल कर सकते हैं। ये हैं:
- इंलाइन
यहां हम एलिमेंट के स्टाइल एट्रिब्यूट में CSS स्टाइल्स स्पेसिफाई करते हैं। हालांकि, फाइल्स को मॉड्यूलराइज़ करने के लिए इंटरनल या एक्सटर्नल लिंकिंग की सिफारिश की जाती है।
- इंटरनल
हम HTML डॉक्यूमेंट के <head> के अंदर <style> टैग में अपने CSS स्पेसिफिकेशन्स शामिल कर सकते हैं।
- एक्सटर्नल
हम <link> टैग का उपयोग करके .css फाइल्स को लिंक कर सकते हैं जो स्थानीय रूप से या सर्वर पर रखी हो सकती हैं। एक्सटर्नल लिंकिंग का उपयोग करके फाइल्स को रीफैक्टर करने से हमें एक कॉमन 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> <div style="background-color:mistyrose; height: 50px;"></div> <p style="letter-spacing: 16px; font-size: 1.3em;"> <u>Demo text here</u> </p> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
इंटरनल लिंकिंग
<!DOCTYPE html> <html> <head> <style> table, table *{ border: 5px double green; margin: auto; padding: 20px; } tr { box-shadow: 0 0 0 3px red; } td { border-color: blue; } </style> </head> <body> <table> <tr> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html>आउटपुट
यह निम्नलिखित आउटपुट देता है:
उदाहरण
एक्सटर्नल लिंकिंग
HTML फाइल
<!DOCTYPE html> <html> <head> <link rel=”stylesheet” type=”text/css” href=”style.css”> </head> <body> <div> <div></div> <div> <div></div> </div> <div></div> </div> </body> </html>CSS फाइल
div { margin: auto; padding: 15px; width: 33%; border: 2px solid; border-radius: 50%; } div > div { border-color: green; } div > div > div { border-color: red; }आउटपुट
यह निम्नलिखित आउटपुट देता है:
