HTML <link> এলিমেন্ট কীভাবে ব্যবহার করবেন তা শিখুন।
HTML <link> এলিমেন্টটি প্রায়শই এক্সটার্নাল CSS ফাইল ইম্পোর্ট করার জন্য ব্যবহৃত হয় যা আপনার ওয়েবসাইটে স্টাইল যোগ করে।
<link> এলিমেন্টটি <head> এলিমেন্টের ভিতরে থাকে এবং এটির বেশ কিছু অ্যাট্রিবিউট থাকে:
<!DOCTYPE html> <html> <head> <title>ডকুমেন্ট টাইটেল</title> <link href="/styles/main.css" rel="stylesheet" /> </head> <body></body> </html>সবচেয়ে কমন <link> এলিমেন্টের অ্যাট্রিবিউট দুটি হলো href এবং rel:
hrefআপনার লিংকড ফাইলটির লোকেশন নির্দিষ্ট করে, এখানেmain.cssনামে একটি স্টাইলশীটrelমানে রিলেশনশিপ, এটি ডকুমেন্ট এবং লিংকড CSS ফাইলের মধ্যে সম্পর্ক নির্দিষ্ট করে
ওয়েবসাইট স্টাইল করার আরেকটি পদ্ধতি হলো <style> এলিমেন্ট ব্যবহার করা, যা CSS স্টাইল সরাসরি ডকুমেন্টের ভিতরে এম্বেড করার অনুমতি দেয় (একেও ইনলাইন CSS বলে)।
তবে আধুনিক পদ্ধতিতে <link> ব্যবহার করে স্টাইল ইম্পোর্ট করা হয়, আপনার প্রজেক্ট ফোল্ডার থেকে your-project/styles/main.css বা এক্সটার্নাল প্রোভাইডার থেকে (অন্য ডোমেন)।
জানা দরকার:
একই ডকুমেন্টে <style> এবং <link> উভয়েই ব্যবহার করলে ভুলে স্টাইল ওভাররাইড হয়ে যাওয়ার সম্ভাবনা থাকে।
উদাহরণস্বরূপ, নিচের উদাহরণে দুটি পদ্ধতিই ব্যবহৃত হয়েছে:
<!DOCTYPE html> <html> <head> <!-- এম্বেডেড (ইন্টারন্যাল) স্টাইল --> <style> h1 { color: red; } p { color: green; } </style> <!-- এক্সটার্নাল স্টাইলশীট ইম্পোর্ট --> <link href="/styles/main.css" rel="stylesheet" /> </head> <body> <h1>এটি একটি লাল হেডিং</h1> <p>এটি একটি সবুজ প্যারাগ্রাফ</p> </body> </html>তাই যদি এক্সটার্নাল স্টাইলশীটে h1 এবং p সিলেক্টরের জন্য কালার প্রপার্টি ভ্যালু ডিফাইন করা থাকে (যেমন blue), তবে উপরের মার্কআপে <link> এলিমেন্ট <style> এলিমেন্টের পরে रहने के कारण red এবং green ওভাররাইড হয়ে যাবে।
এটা খুব সহজে গুলিয়ে ফেলা যায়, তাই আমার পরামর্শ হলো সাধারণত <link> এলিমেন্ট ব্যবহার করে স্টাইল ইম্পোর্ট করুন — এবং <style> এলিমেন্ট শুধু খুব নির্দিষ্ট কেসের জন্য রাখুন।
