মার্কআপকে আরও পঠনযোগ্য করে তুলতে কিভাবে HTML-এর সাথে CSS লিঙ্ক করবেন

নতুন কোডার হিসাবে, আমরা প্রথমে আমাদের ওয়েব পৃষ্ঠাগুলিতে ইনলাইন-স্টাইলিং হিসাবে 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 হিসাবে অন্তর্ভুক্ত করতে চলে যাই। এখানেই আমরা <style> এর মধ্যে আমাদের সমস্ত CSS লিখি <head> -এ ট্যাগ HTML নথির বিভাগ:

<!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 পরিষ্কার করে। যাইহোক, যদি আমরা সিএসএস এর 500 লাইন থাকতাম? এই ফাইলটি খুব দ্রুত পড়া কঠিন হবে। যাইহোক, আমাদের বাহ্যিক স্টাইলশীট তৈরি করার ক্ষমতা আছে এবং তারপরে আমাদের HTML ফাইলের সাথে লিঙ্ক করার ক্ষমতা আছে!

সেটআপ:

মার্কআপকে আরও পঠনযোগ্য করে তুলতে কিভাবে HTML-এর সাথে CSS লিঙ্ক করবেন

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

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

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

rel অ্যাট্রিবিউট: এটি আমাদের বলে যে এই ফাইল এবং অন্য ফাইলের মধ্যে একটি সম্পর্ক হতে চলেছে, এবং এই লিঙ্কটি সেই সম্পর্কটি কী তা আমাদের বলবে৷
টাইপ অ্যাট্রিবিউট: HTML ফাইলের সাথে লিঙ্ক করা ফাইলটির সম্পর্কের ধরন বর্ণনা করে।
href বৈশিষ্ট্য: ফাইলের আপেক্ষিক পাথ যেখান থেকে HTML ফাইল আছে – ফাইলের অবস্থান।

মনে রাখবেন যে যদিও আমরা HTML ফাইল থেকে CSS ফাইল আলাদা করছি, CSS এর ক্যাসকেডিং প্রকৃতি এখনও সর্বোচ্চ রাজত্ব করে। এর মানে হল আপনার যদি একাধিক CSS ফাইল থাকে, তাহলে আপনাকে করতে হবে:

1. প্রতিটি পৃথক CSS ফাইলের দিকে নির্দেশ করে একটি রাখুন।

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

৷

81% অংশগ্রহণকারী বলেছেন যে তারা বুটক্যাম্পে যোগ দেওয়ার পরে তাদের প্রযুক্তিগত কাজের সম্ভাবনা সম্পর্কে আরও আত্মবিশ্বাসী বোধ করেছেন। আজই একটি বুটক্যাম্পের সাথে মিলিত হন৷

৷

গড় বুটক্যাম্প গ্র্যাড একটি বুটক্যাম্প শুরু করা থেকে শুরু করে তাদের প্রথম চাকরি খোঁজা পর্যন্ত ক্যারিয়ারের পরিবর্তনে ছয় মাসেরও কম সময় ব্যয় করেছে।

এখানেই শেষ এটা পেতে ওখানে যাও. আপনি এখন আপনার প্রজেক্টের জন্য বাহ্যিক স্টাইলশীট তৈরির পথে আছেন!