কিভাবে HTML <link> ব্যবহার করতে হয় তা জানুন উপাদান।
HTML <link> উপাদানটি প্রাথমিকভাবে বহিরাগত CSS ফাইল আমদানি করতে ব্যবহৃত হয় যা আপনার ওয়েবসাইটে শৈলী যোগ করে।
<link> উপাদানটি <head> এর ভিতরে থাকে উপাদান, এবং বিভিন্ন ধরণের বৈশিষ্ট্য গ্রহণ করে:
<!DOCTYPE html>
<html>
<head>
<title>Document 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>
<!-- Embedded (internal) styles -->
<style>
h1 {
color: red;
}
p {
color: green;
}
</style>
<!-- Import external style sheet -->
<link href="/styles/main.css" rel="stylesheet" />
</head>
<body>
<h1>This is a red heading</h1>
<p>This is a green paragraph</p>
</body>
</html>
সুতরাং উদাহরণস্বরূপ যদি বাহ্যিক স্টাইলশীট h1-এ একটি রঙের সম্পত্তির মান নির্ধারণ করে এবং p নির্বাচক, যেমন এটিকে একটি blue দিয়ে রঙের মান, তারপর red এবং green ওভাররাইট করা হবে, কারণ <link> উপাদানটি <style> এর পরে আসে উপরের মার্কআপ উদাহরণে উপাদান।
এটি মিশ্রিত করা খুবই সহজ, তাই আমি পরামর্শ দিচ্ছি যে আপনি সাধারণত <link> ব্যবহার করতে থাকুন শৈলী আমদানি করতে উপাদান — এবং শুধুমাত্র <style> ব্যবহার করুন অত্যন্ত নির্দিষ্ট ব্যবহারের ক্ষেত্রে উপাদান।
