সিএসএস সিম্ফোনীর ৪র্থ পর্বে সবাইকে স্বাগতম। গত পর্বে আমরা জেনেছিলাম, CSS এর ডিক্লেয়ার করার পদ্ধতি সম্পর্কে, এবং CSS নিয়ে আলোচনা এবং ধারণাকে আরো ঝালাই বা পরিষ্কার করে নিয়েছি। আজ আমরা আরেকটি নতুন বিষয় নিয়ে জানব। কি সেই বিষয়? নাহ, এখন বলব না, তার আগে গত পর্বের কোডের মত আরেকটি কোড একবার দেখে নিই।
<html>
<head>
</head>
<body>
<p> Hi friends, how are you all ? </p><br>
<p> Once upon a time there lived a king called miron </p><br>
<p> Do you know how to swim ? </p><br>
<p> When do you have your meal ? </p>
</body>
</html>
এখানে চারটি লাইনকে <p> ট্যাগের মাধ্যমে প্যারাগ্রাফের আকারে লেখা হয়েছে। <p> হল HTML ট্যাগ যা যেকোনো লেখাকে প্যারাগ্রাফ হিসেবে ডিফাইন করে। এখন এই লাইন তথা প্যারা চারটিকে যদি আপনি লাল রঙের করতে চান এবং ফন্ট সাইজও চেঞ্জ করতে চান তাহলে কি করা যায় বলতে পারেন ?
নিচে দেখুন।
<head>
<style type=”text/css”>
p {color:blue;text-align:center;font:12}
</style>
</head>
<head> ট্যাগের মধ্যে সি এস এস এর এই অংশটুকু লিখলেই হয়ে যাবে। এর ফলে নিচের মত রেজাল্ট পাবেন।
এর
কারণ হল, সি এস এস এর কোডে আপনি ডিক্লেয়ার করে দিয়েছেন, সকল <p>
ট্যাগবিশিষ্ট লেখাকে যেনো নীল রঙের ১২ ফন্টের মাঝ সারিবিশিষ্ট লেখা হিসেবে
মডিফাই করা হয়।কিন্তু এমন যদি হয় যে, আপনি এই লেখাটুকুর মধ্যে শুধুমাত্র প্রথম ও শেষ লাইনটাকেই নীল রঙের এবং মাঝ সারি বিশিষ্ট লেখা হিসেবে সেট করতে চান,অন্য লাইনগুলো যেন সাধারণভাবেই থাকে সেক্ষেত্রে কি করবেন ? নিচে দেখুন।
<html>
<head>
<style type=”text/css”>
#sam {color:blue;text-align:center;font:12}
</style>
</head>
<body>
<p id=”sam”> Hi friends, how are you all ? </p><br>
<p> Once upon a time there lived a king called miron </p><br>
<p> Do you know how to swim ? </p><br>
<p id=”sam”> When do you have your meal ? </p>
</body>
</html>
উপরের কোডে দেখতে পাচ্ছেন, <body> ট্যাগের মধ্যে যে সকল লেখা রয়েছে তার মধ্যে প্রথম ও চতুর্থ লাইনে <p> ট্যাগের id এট্রিবিউটের মান “sam ” নির্ধারণ করা হয়েছে। এট্রিবিউট হল ট্যাগের নিজস্ব কিছু বৈশিষ্ট্য। প্রতিটি মানুষের যেমন নাম,বয়স, উচ্চতা ইত্যাদি বৈশিষ্ট্য আছে প্রতিটি ট্যাগেরও তেমনি কিছু বৈশিষ্ট্য আছে। এসকল বৈশিষ্ট্যকে এট্রিবিউট বলা হয়। এমনই একটি এট্রিবিউট হল “id” যার মাধ্যমে ঐ ট্যাগের নিজস্ব নাম বা পরিচয় নির্ধারণ করা হয় যে নামের মাধ্যমে ব্রাউজার ঐ ট্যাগকে চিনতে পারে। প্রথম ও চতুর্থ <p> ট্যাগে “id” এট্রিবিউটের মান “sam” নির্ধারণ করার মাধ্যমে এই দুটি ট্যাগের নাম দেয়া হয়েছে “sam” ।
এবার নিচের কোডটি দেখি।
<style type=”text/css”>
#sam {color:blue;text-align:center;font:12}
</style>
এখানে স্টাইল অর্থাৎ #sam {color:blue;text-align:center;font:12} অংশে #sam এর মাধ্যমে জানানো হয়েছে সি এস এস কোডের মাধ্যমে “sam” idবিশিষ্ট সকল ট্যাগের পরিবর্তন ঘটানো হবে। আর
{ color:blue;text-align:center;font:12} এই অংশের মাধ্যমে এই পরিবর্তন ঘটানো হয়েছে, এর ফলে সকল “sam” নামবিশিষ্ট ট্যাগের মধ্যবর্তী লেখাগুলো রঙ নীল,ফন্ট ১২ এবং সারি মাঝসারি বিশিষ্ট হয়েছে।
<body> অংশে প্রথম ও চতুর্থ <p> ট্যাগ ছাড়া বাকি দুটি <P> ট্যাগের নাম “sam” নির্ধারণ করা হয়নি। তাই এদের মধ্যবর্তী লেখাকে ব্রাউজারে সাধারণভাবেই দেখাবে ঠিক নিচের মত।
বন্ধুরা,আজ এ পর্যন্তই। ভালো থাকবেন সবাই। ধন্যবাদ।
No comments:
Post a Comment