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; }
আউটপুট
উপরোক্ত কোডের আউটপুট:
