- এইচটিএমএল এ বিভিন্ন স্টাইল ব্যবহার করব কিভাব?
- এইচটিএমএল এ style="" এর কাজ কি?
- style কত ভাবে ব্যবহার করা যায়?
প্রিয় পাঠক, এই প্রশ্ন গুলো নিয়ে আলোচনা করব এই পৃষ্ঠায়। এর আগে জানা প্রয়োজন,
- html Style কি?
- html এ style এর কাজ কি?
HTML style="" হলো html এর একটি এট্রিবিউট। যা দিয়ে আউটপুটকে আকর্ষণীয় করে তুলা হয়। HTML পোগ্রাম কে বিভিন্ন গঠন, রং, ডিজাইন দেয়ার জন্য Style এট্রিবিউট ব্যবহার করা হয়। এর ভিতরে আবার বিভিন্ন উপাদান ব্যবহার করা হয়। যেমন- height, width, font-family, font-style, font-size ইত্যাদি ইত্যাদি।
html style কোন স্থানে ব্যবহার করা হয়?
এটি এইচটিএমএল এর নির্দিষ্ট ট্যাগ এর ভিতর যোগ করা হয়। বা আলাদা কোনো স্টাইল শীটেও যোগ করা যায়। style এট্রিবিউট আমরা তিন ভাবে যোগ করতে পারি।
- সরাসরি ট্যাগ এর ভিতরে,
- html পেজ এ <style>ও</style > এর ভিতরে,
- CSS শীট এর ভিতরে।
এই তিন পক্রিয়াতে আমরা style এর ব্যবহার করতে পারি।
- সরাসরি ট্যাগ এর ভিতরে style ব্যবহারের পদ্ধতি -
style এট্রিবিউট আমরা সরাসরি html ট্যাগ এর ভিতরে ব্যবহার করতে পারি। এর জন্য আমাদের কে নির্দিষ্ট ট্যাগ অর্থাৎ যে অংশ টুকু Style করতে চাই সে অংশের জন্য ব্যবহার করা ট্যাগ এর ভিতরে আমাদের style ="" ব্যবহার করতে হবে- যেমনঃ
ইনপুটঃ
<p style=" color:green "> কম্পিউটার </p>
<p> মেবাইল </p>
আউটপুট-
কম্পিউটার
মেবাইল
উপরের ইনপুট বক্সে লক্ষ্য করুন,এখানে দুটি লাইন দেখতে পাচ্ছি, এর মধ্যে আমরা উপরের " কম্পিউটার " লেখা টিকে style করার জন্য উপরের টির জন্য ব্যবহার করা ট্যাগ <p> এর মাঝ খানে আমরা style ="" ব্যবহার করেছি। আর এর উপাদান হিসেবে আমরা লেখাটি রং করার জন্য color:green ব্যবহার করেছি। যার ফলে লেখাটি একটি লাল বর্ণ ধারণ করেছে।
কিন্তু আমরা নিচের "মোবাইল" লেখাটির ট্যাগে কোনো স্টাইল ব্যবহার করি নি বলে এটায় কোনো ধরনের স্টাইল দেখতে পাচ্ছি না। এখন আমরা "মোবাইল লেখাটি তও
style="" ব্যবহার করব এবং এর ভিতরে কিছু উপাদান লেখব।
যেমন-
ইনপুটঃ
<p style=" color:green "> কম্পিউটার </p>
<p style=" color:blue; font-size:30px; font-family:Noto serif Bengali; "> মেবাইল </p>
আউটপুট-
কম্পিউটার
মেবাইল
উপরের আউটপুটে লক্ষ্য করুন। এখনের " মোবাই লেখাটি এখন আগের চেয়ে কতটুকু পরিবর্তন দেখাচ্ছে, এর কারণ হলো এর জন্য ব্যবহার করা <p>. এর ভিতরে style="" ব্যবহার করা হয়েছে। আর উপাদান হিসেবে, Color, Font-size, Font-family ব্যবহার করা হয়েছে, color:blue ব্যবহার করার ফলে লেখাটি ব্লো রং এটা হয়েছে, font-size :30px ব্যবহার করার ফলে এর সাইজ আগের চেয়ে পরিবর্তন হয়েছে। আর font-family ব্যবহার করাতে এর ফন্ট এর ডিজাইন পরিবর্তন হয়েছে। যার ফলে সব মিলিয়ে আগের চেয়ে অসাধারণ দেখাচ্ছে। আমরা চাইলে এভাবেই ট্যাগ এর ভিতরে এই style এর ব্যবহার করতে পারি।
কিন্তু এতে করে আমাদের html কোড গুলোর শৃঙ্খলা নষ্ট হয়ে যায়। কাজেই কোড গুলো দেখার সৌন্দর্য বা তারাতাড়ি খুঁজে বের করার জন্য Style গুলোকে আলাদা লেখতে হয়। এর জন্য আমরা পদ্ধতি ২ও ৩ ব্যবহার করতে পারি। যা নিচে আলোচনা করা হলো।
< style ></style> এর ভিতরে style="" ব্যবহারের পদ্ধতি
এটি একটি সুবিধাজনক পক্রিয়া। এর ফলে style এর ব্যবহার করাটা অনেক সহজ হয়ে যায়। যেমন-
- একই উপাদান অনেকগুলো ট্যাগ এর ভিতরে ব্যবহার করতে চাইলে একবার মাত্র লিখলেই হয়।
- খুঁজে পাওয়া সহজতর।
- কোডিং এ শৃঙ্খলা বজায় থাকে।
তবে এ ভাবে Style ব্যবহার করতে চাইলে আমাদের একটি কাজ করতে হবে। ঐ আমাদের নির্বাচন করা ট্যাগ এর ভিতরে style="" এর পরিবর্তে class="name" বা id="name" ব্যবহার করতে হবে। আর শেষে <style ></style> এর ভিতরে class এর জন্য (ডট) . classname এবং id এর জন্য #idname ব্যবহার করতে হবে।
মাথায় নিশ্চই ঘুরপাক খাচ্ছে?
বুঝিয়ে দিচ্ছি, উদাহরণ সরূপ -
ইনপুটঃ
<html><body>
<p class="computer"> কম্পিউটার </p>
<p id=" mobile "> মেবাইল </p>
<style>.computer {color:green;}
#mobile{
color:blue;font-size:30px;font-family:Noto serif Bengali; }
</style>
</body></html>
আউটপুট-
কম্পিউটার
মেবাইল
উপরের ইনপুটে দেখতে পাচ্ছেন ট্যাগ এর ভিতরে কেমন ভাবে class এবং আইডি ব্যবহার করেছি। এর ফলে আমাদের সুবিধা হলো যে এই নামের class বা id আমরা যতটা ব্যবহার করব ততটায় ঐ উপাদান গুলো কাজ করবে আর স্টাইল একই হয়ে যাবে। আউটপুটে লক্ষ্য রাখুন। মূলত html পেজে এভাবেই style ব্যবহার করতে হয়। যত উপাদান ব্যবহার করবেন সব ঐ <style> ট্যাগ এর ভিতরে ব্যবহার করতে হবে। এতে খুঁজে পাওয়া খুব সহজ হবে এবং একই উপাদান বার বার টাইপ করা লাগবে না।
এখন আমরা একই সাথে অনেকগুলো ট্যাগ এর ভিতরে একই নামের class ব্যবহার করে স্টাইল করব।
যেমন-
ইনপুটঃ
<html><body>
<p class="device"> কম্পিউটার </p><p class="device "> মেবাইল </p><p class="device "> টেবলেট </p><p class="device "> মডেম </p><p class="device "> মাউস </p>
<style>.device {color:blue;font-size:30px;font-family:Noto serif Bengali; }
</style>
</body></html>
আউটপুট-
কম্পিউটার মেবাইলটেবলেটমডেমমাউস
উপরের আউটপুটে সকল লেখার একই স্টাইল হওয়ার একমাত্র কারণ হলো আমটা সব লেখার ট্যাগ এর ভিতরে class হিসেবে device ব্যবহার করেছি আর <style> ট্যাগ এর ভিতরে আমরা ঐ class এর জন্য বিভিন্ন উপাদান ব্যবহার করেছি।
আমরা যদি কয়েকটিকে অন্য স্টাইল করতে চাই তবে ঐ কয়েকটির জন্য আলাদা class বা id নিতে হবে। আর ঐ নাম এর জন্য উপাদান লেখতে হবে। যেমন-
ইনপুটঃ
<html><body>
<p class="device"> কম্পিউটার </p><p class="device "> মেবাইল </p><p class="device "> টেবলেট </p><p class="modem"> মডেম </p><p class="modem "> মাউস </p>
<style>.device {color:blue;font-size:30px;font-family:Noto serif Bengali; }.modem {color:red;font-size:20px;font-family:Noto serif Bengali; }
</style>
</body></html>
আউটপুট-
কম্পিউটার মেবাইলটেবলেটমডেমমাউস
উপরে দেখতে পাচ্ছেন আমরা নিচের দুটি লেখার জন্য আলাদা class ব্যবহার করেছি, এর জন্য <style> এর ভিতরে আমরা ঐ class name এর জন্য আরো উপাদান লেখতে হয়েছে।
এভাবে চাইলে আমরা একই সাথে অনেকগুলো ট্যাগের ডাটা গুলোকে style দিতে পারি।
0 Comments
আপনার মন্তব্য লিখুন!