XHTML ডকুমেন্টে CSS (Cascading Style Sheets) ব্যবহার করার জন্য বেশ কিছু পদ্ধতি রয়েছে। তার মধ্যে একটি হল ইনলাইন স্টাইলিং, যেখানে প্রতিটি HTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে স্টাইল নির্ধারণ করা হয়। এটি একটি সহজ এবং দ্রুত পদ্ধতি, তবে সাধারণত এটি বড় এবং জটিল ওয়েবসাইটে ব্যবহার করা হয় না, কারণ এতে কোডের পুনঃব্যবহারযোগ্যতা কমে যায়।
১. ইনলাইন স্টাইলিং কী?
ইনলাইন স্টাইলিং হল একটি CSS পদ্ধতি, যেখানে স্টাইল ডিক্লারেশন সরাসরি HTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে যুক্ত করা হয়। XHTML-এ, style অ্যাট্রিবিউটটি ট্যাগের মধ্যে একটি স্ট্রিং হিসেবে স্টাইল শীট নির্দেশ করে।
২. ইনলাইন স্টাইলিং এর ব্যবহার
২.১ মৌলিক গঠন
<p style="color: blue; font-size: 16px;">This is a paragraph with inline styling.</p>
উপরের কোডটিতে, <p> ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে color এবং font-size স্টাইল দেওয়া হয়েছে। এই স্টাইলগুলো শুধুমাত্র এই <p> ট্যাগের জন্য প্রযোজ্য হবে।
২.২ ইনলাইন স্টাইলিং এর উপাদানসমূহ
- color: টেক্সটের রঙ নির্ধারণ করে।
- font-size: ফন্টের আকার নির্ধারণ করে।
- background-color: ব্যাকগ্রাউন্ডের রঙ নির্ধারণ করে।
- margin: ট্যাগের চারপাশে ফাঁকা জায়গা নির্ধারণ করে।
- padding: ট্যাগের মধ্যে ফাঁকা জায়গা নির্ধারণ করে।
৩. উদাহরণ
৩.১ টেক্সটের রঙ এবং ফন্ট সাইজ পরিবর্তন করা
<h1 style="color: red; font-size: 32px;">Welcome to My Website</h1>
এই উদাহরণে, <h1> ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে টেক্সটের রঙ red এবং ফন্ট সাইজ 32px করা হয়েছে।
৩.২ ব্যাকগ্রাউন্ড রঙ এবং প্যাডিং
<div style="background-color: lightgray; padding: 20px;">
<p style="color: darkblue;">This is a div with a background color and padding.</p>
</div>
এখানে, <div> ট্যাগের ব্যাকগ্রাউন্ড রঙ lightgray এবং প্যাডিং 20px দেওয়া হয়েছে। <p> ট্যাগের টেক্সটের রঙ darkblue করা হয়েছে।
৩.৩ মার্জিন এবং বর্ডার
<button style="margin: 10px; border: 2px solid black; padding: 5px;">Click Me</button>
এখানে, <button> ট্যাগের চারপাশে 10px মার্জিন এবং 2px কালো বর্ডার দেওয়া হয়েছে।
৪. ইনলাইন স্টাইলিং এর সুবিধা ও সীমাবদ্ধতা
৪.১ সুবিধা
- সহজ এবং দ্রুত: একটি নির্দিষ্ট ট্যাগের জন্য তৎক্ষণাৎ স্টাইল পরিবর্তন করা যায়।
- কোডের সোজাসুজি প্রয়োগ: যেকোনো একটি নির্দিষ্ট এলিমেন্টে স্টাইল প্রয়োগ করতে পারেন, যেমন একটি প্যারাগ্রাফ, হেডিং, বা বাটন।
৪.২ সীমাবদ্ধতা
- কোডের পুনঃব্যবহারযোগ্যতা কম: একই স্টাইল বিভিন্ন ট্যাগে প্রয়োগ করতে হলে, প্রতিবার একই স্টাইল কোড লিখতে হয়। এটি কোডের পুনঃব্যবহারযোগ্যতা কমিয়ে দেয়।
- কোডের অস্বচ্ছতা: ইনলাইন স্টাইলিং ব্যবহারে HTML এবং CSS একত্রে থাকা কারণে কোডটি আরও জটিল হয়ে যায়।
- স্টাইল শীট ব্যবস্থাপনা কঠিন: বড় এবং জটিল ওয়েবসাইটে, স্টাইল শীটগুলোর পরিবর্তন ও পরিচালনা করতে সমস্যা হতে পারে।
৫. এক্সএইচটিএমএল স্ট্যান্ডার্ডে ইনলাইন স্টাইলিং
XHTML ডকুমেন্টে style অ্যাট্রিবিউট ব্যবহারের জন্য কিছু নির্দিষ্ট নিয়ম অনুসরণ করতে হয়। এই নিয়মগুলো HTML-এর থেকে কিছুটা আলাদা, কারণ XHTML একটি XML-ভিত্তিক ভাষা, এবং XML-এ অ্যাট্রিবিউটের মান ছোট হাতের অক্ষরে থাকতে হবে।
<div style="background-color: yellow; padding: 10px;">
<p style="color: green; font-size: 14px;">This is an inline styled paragraph.</p>
</div>
এখানে, style অ্যাট্রিবিউটটি সঠিকভাবে ছোট হাতের অক্ষরে রয়েছে এবং সব ট্যাগ সঠিকভাবে বন্ধ করা হয়েছে, যেমন <div /> বা <p />।
XHTML-এ ইনলাইন স্টাইলিং একটি সরল পদ্ধতি যেখানে আপনি সরাসরি HTML ট্যাগের মধ্যে style অ্যাট্রিবিউট ব্যবহার করে স্টাইল প্রয়োগ করতে পারেন। তবে, বড় এবং জটিল ওয়েবসাইটের জন্য এটি আদর্শ নয়, কারণ এতে কোডের পুনঃব্যবহারযোগ্যতা কমে যায়। ইনলাইন স্টাইলিং শুধুমাত্র ছোট স্কেল ওয়েবসাইট বা একক ট্যাগের জন্য উপযুক্ত। বড় প্রোজেক্টে বাহ্যিক CSS ফাইল ব্যবহার করাই সবচেয়ে ভালো পদ্ধতি।
Read more
