এক্সএইচটিএমএল (XHTML) ডকুমেন্টে স্টাইলশীট (CSS) ব্যবহারের জন্য সাধারণত এক্সটারনাল স্টাইলশীট (external stylesheet) লিঙ্ক করা হয়। এর মাধ্যমে আপনি HTML অথবা XHTML পেজের ডিজাইন (স্টাইল) একটি আলাদা ফাইল থেকে লোড করতে পারেন। <link> ট্যাগ ব্যবহার করে এই এক্সটারনাল স্টাইলশীট লিঙ্ক করা হয়।
১. <link> ট্যাগের ব্যবহার
<link> ট্যাগটি মূলত HTML বা XHTML ডকুমেন্টের <head> সেকশনে ব্যবহৃত হয় এবং এটি এক্সটারনাল রিসোর্স (যেমন CSS ফাইল) যুক্ত করতে সাহায্য করে। <link> ট্যাগের মাধ্যমে আপনি স্টাইলশীট ফাইলের অবস্থান (URL) নির্দেশ করতে পারেন।
২. <link> ট্যাগের গঠন
এক্সএইচটিএমএল ডকুমেন্টে <link> ট্যাগটি অবশ্যই বন্ধনসহ ব্যবহার করতে হয়। যেমন: <link />। <link> ট্যাগের জন্য কয়েকটি গুরুত্বপূর্ণ অ্যাট্রিবিউট রয়েছে, যার মধ্যে rel, type, এবং href প্রধান।
মূল অ্যাট্রিবিউটগুলি:
rel: এই অ্যাট্রিবিউটটি রিসোর্সের সম্পর্ক নির্ধারণ করে, যেমন"stylesheet"যদি এটি স্টাইলশীট হয়।type: এই অ্যাট্রিবিউটটি স্টাইলশীট ফাইলের MIME টাইপ নির্দেশ করে, যা সাধারণত"text/css"হয়।href: এই অ্যাট্রিবিউটটি স্টাইলশীট ফাইলের অবস্থান (URL) বা পাথ নির্ধারণ করে।
৩. এক্সটারনাল স্টাইলশীট লিঙ্ক করার উদাহরণ
একটি সাধারণ <link> ট্যাগের মাধ্যমে এক্সটারনাল স্টাইলশীট লিঙ্ক করা হয় নিচের মতো:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
এখানে:
rel="stylesheet": এটি জানায় যে এটি একটি স্টাইলশীট ফাইল।type="text/css": এটি ফাইলের টাইপ নির্দেশ করে, যা স্টাইলশীট ফাইলের জন্যtext/css।href="styles.css": এটি ফাইলের পাথ বা URL যা ব্রাউজারকে স্টাইলশীট ফাইলটি কোথায় খুঁজতে হবে তা বলে।
৪. এক্সটারনাল স্টাইলশীট ফাইলের লিঙ্ক করা
যদি আপনি একটি CSS ফাইল ব্যবহার করেন যা এক্সটারনাল (অর্থাৎ, আলাদা ফাইলে) রাখা হয়েছে, তাহলে সেই ফাইলটির পাথ (URL) বা অবস্থান href অ্যাট্রিবিউটে প্রদান করতে হবে। যদি স্টাইলশীট ফাইলটি একই ডিরেক্টরিতে থাকে, তাহলে সহজেই ফাইলের নাম উল্লেখ করা যেতে পারে। যদি অন্য কোনো ডিরেক্টরি থেকে লোড করতে হয়, তবে সম্পূর্ণ পাথ (অথবা URL) দিতে হবে।
উদাহরণ ১: একই ডিরেক্টরিতে ফাইল
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
উদাহরণ ২: ভিন্ন ডিরেক্টরিতে ফাইল
<head>
<link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
উদাহরণ ৩: ওয়েব লিঙ্কের মাধ্যমে ফাইল
<head>
<link rel="stylesheet" type="text/css" href="https://example.com/styles.css" />
</head>
৫. একাধিক স্টাইলশীট লিঙ্ক করা
একাধিক এক্সটারনাল স্টাইলশীট ফাইলও একই ডকুমেন্টে যুক্ত করা সম্ভব। এই ক্ষেত্রে, প্রতিটি স্টাইলশীটের জন্য আলাদা <link> ট্যাগ ব্যবহার করতে হয়।
উদাহরণ:
<head>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="responsive.css" />
</head>
এখানে, styles.css এবং responsive.css দুইটি আলাদা স্টাইলশীট ফাইল লোড হবে।
৬. স্টাইলশীট লিঙ্ক করার নিয়ম
৬.1 <link> ট্যাগ <head> সেকশনে
<link> ট্যাগটি সবসময় ডকুমেন্টের <head> সেকশনে থাকতে হবে। এর মাধ্যমে, ব্রাউজারটি পেজ লোড হওয়ার সময়ই স্টাইলশীটটি লোড করে এবং পেজের রেন্ডারিং শুরু করে।
৬.2 বন্ধনসহ ব্যবহার
XHTML ডকুমেন্টে সব ট্যাগ (এবং তাদের অ্যাট্রিবিউট) বন্ধনসহ ব্যবহার করতে হয়। যেমন: <link />।
৬.3 এক্সটারনাল স্টাইলশীট
স্টাইলশীট ফাইলটি ব্রাউজারে অপ্রয়োজনীয় লোডিং এড়াতে ক্যাশ করা যেতে পারে। তাই এক্সটারনাল স্টাইলশীট ফাইলটি ব্যবহার করা সবচেয়ে ভালো।
XHTML ডকুমেন্টে স্টাইলশীট যুক্ত করার জন্য <link> ট্যাগ একটি গুরুত্বপূর্ণ উপাদান। এটি এক্সটারনাল CSS ফাইল লোড করতে ব্যবহৃত হয়, যার মাধ্যমে আপনি পেজের ডিজাইন এবং লেআউট নিয়ন্ত্রণ করতে পারেন। <link> ট্যাগের মাধ্যমে একাধিক স্টাইলশীট যোগ করা সম্ভব এবং এটি XHTML ডকুমেন্টের <head> সেকশনে থাকা উচিত।
Read more
