HTML-এ CSS লিংক করে মার্কআপ আরও পঠনীয় করা

নতুন কোডাররা হিসেবে, আমরা প্রথমে CSS আমাদের ওয়েব পেজে ইনলাইন-স্টাইলিং হিসেবে ইনকর্পোরেট করি। আমরা style অ্যাট্রিবিউট ব্যবহার করে সরাসরি আমাদের HTML এলিমেন্টে CSS ইনজেক্ট করি: 

<!DOCTYPE html> <html> <head> <title>Inline Style</title> </head> <body> <h1 style="color:blue;text-align:center;">Star Wars</h1> <h4 style="color:red;text-align:center;">Return of the Jedi</h4> </body> </html>

আমরা আরও জটিল সাইটের দিকে যাওয়ার সাথে সাথে, আমরা আমাদের CSS ইন্টারনাল CSS হিসেবে ইনকর্পোরেট করতে শুরু করি। এখানে আমরা আমাদের সকল CSS <style> ট্যাগের মাঝপথে লিখি HTML ডকুমেন্টের <head> সেকশনে:

<!DOCTYPE html> <html> <head> <title>Internal CSS</title> <style> h1, h4 { text-align: center; } h1 { color: blue; } h4 { color: red; } </style> </head> <body> <h1>Star Wars</h1> <h4>Return of the Jedi</h4> </body> </html>

এটি আমাদের HTML কে ভালো করে ক্লিন আপ করে। যাইহোক, যদি আমাদের ৫০০ লাইন CSS থাকত? এই ফাইলটি খুব দ্রুত পড়া কঠিন হয়ে যেত। যাইহোক, আমাদের এক্সটার্নাল স্টাইলশিট তৈরি করে এবং সেটিকে আমাদের HTML ফাইল দিয়ে লিংক করার ক্ষমতা আছে!  

সেটআপ:

1. আপনার মেইন প্রজেক্ট ফোল্ডারে যেখানে আপনার index.html ফাইল আছে, সেখানে একটি নতুন ফাইল তৈরি করুন যাকে index.css. বলে। index.css ফাইলটি আমাদের index.html ফাইলের সকল CSS ধারণ করবে। আমি আমার CSS ফাইলগুলোর নাম HTML ফাইলগুলোর নামের ওপর রাখি যাতে জিনিসগুলো অর্গানাইজড থাকে, কিন্তু আপনি নিশ্চিত করে যেকোনো নাম দিতে পারেন যতক্ষণ না আপনি জানেন কোন ফাইল কোনটি স্টাইল করছে। 
2. আপনার HTML ফাইলের <head>-এ <style> ট্যাগের মাঝপথে CSS থাকলে, শুধু CSS কোডটি (ট্যাগ না) কাটে আপনার সংশ্লিষ্ট CSS ফাইলে পেস্ট করুন। 
3. আপনার HTML ফাইলের <head>-এ, আপনি একটি <link> ট্যাগ তৈরি করবেন যা আপনার CSS ফাইলকে পয়েন্ট করবে: 

       <link rel="stylesheet" type="text/css" href="./index.css">

লিংকটি তিনটি অংশ দিয়ে গঠিত:

1. The rel attribute: এটি বলে আমাদের এই ফাইল এবং অন্য একটি ফাইলের মধ্যে একটি রিলেশনশিপ আছে, এবং এই লিংকটি আমাদের বলবে সেই রিলেশনশিপ কী। 
2. The type attribute: লিংক করা ফাইলের HTML ফাইলের সাথে সম্পর্কের টাইপ বর্ণনা করে। 
3. The href attribute: HTML ফাইলটি থেকে ফাইলটির রিলেটিভ পাথ—ফাইলটির লোকেশন।

মনে রাখবেন যে যদিও আমরা CSS ফাইলকে HTML ফাইল থেকে আলাদা করছি, CSS-এর ক্যাসকেডিং প্রকৃতি এখনো সുപ്രീম। এর মানে যদি আপনার একাধিক CSS ফাইল থাকে, তবে আপনাকে:

1. প্রতিটি ইন্ডিভিজুয়াল CSS ফাইলে পয়েন্ট করে একটি <link> থাকতে হবে।

2. নিশ্চিত করতে হবে সেই ফাইলগুলো সেই অর্ডারে আছে যেন প্রপার স্টাইলিং দেখায়। যদি সেগুলো প্রপার অর্ডারে না থাকে, তবে স্টাইলিং কাজ নাও করতে পারে।

এটিই সব। আপনি এখন আপনার প্রজেক্টের জন্য এক্সটার্নাল স্টাইলশিট তৈরি করার পথে ভালোভাবে আছেন!