সিএসএস ক্লাস টিউটোরিয়াল (CSS Class Tutorial in Bangla)
এইচটিএমএল id এট্রিবিউটের মত class আরেকটা এট্রিবিউট আছে। প্রায় সব এইচটিএমএল এলিমেন্টে এটা ব্যবহার করতে পারেন।
ধরুন আপনার একটা এইচটিএমএল ডকুমেন্টে ১০ টা হেডিং আছে ২টি h1, ৩টি h3, h2 ... এরকম আরও। এখন আপনি চান যে সবগুলি h1 এর রং লাল এবং সবগুলি h3 এর রং বেগুনি হবে, তো কি করবেন, প্রতিটি হেডিং এর আইডি দিবেন? এবং প্রতিটি আইডি ধরে ধরে পরে সিএসএস লিখবেন? উত্তর হল না। কেননা এই সমস্যার সমাধানের জন্যই সিএসএস ক্লাস।
যেহেতু h1 দুটির রং দিব লাল তাই এইদুটি হেডিং এর আমি একই ক্লাস দেব এভাবে h3 ৩টিরও একই ক্লাস দেব। এরপর সেই ক্লাস ধরে স্টাইলিং।
01.<!DOCTYPE html>02.<html>03.<head>04.<style>05..demo_head{06.color:#f00;07.}08..tutorial{09.color:#c8a2c8;10.}11.</style>12.</head>13.<body>14. 15.<h1 class="demo_head">Webcoachbd demo heading1</h1>16.<h1 class="demo_head">Webcoachbd demo heading2</h1>17.<p id="demo_para">demo content goes here.</p>18.<h3 class="tutorial">Webcoachbd HTML Tutorial</h3>19.<h3 class="tutorial">Webcoachbd CSS Tutorial</h3>20.<h3 class="tutorial">Webcoachbd JQuery Tutorial</h3>21.</body>22.</html>** শুধু হেডিং নয় যেকোন এইচটিএমএলে এই নীতি প্রয়োগ করতে পারেন। সোজ কথা, একাধিক এলিমেন্টে যদি একই সিএসএস (স্টাইল) দিতে চান তখনি সেই এলিমেন্টগুলিতে একই ক্লাস দিয়ে পরে সেই ক্লাস একবার লিখে সিএসএস ফাইলে স্টাইলিং করতে পারেন। মনে রাখতে হবে ক্লাস দিয়ে সিলেক্ট করতে সামনে একটি ডট (.) চিহ্ন দিতে হয় যেমন দেখুন আমি কিভাবে ৫ এবং ৮ নম্বর লাইনে ক্লাস সিলেক্ট করেছি।
** উদাহরনটিতে দেখুন "demo_head" এবং "tutorial" ক্লাসটি সিএসএস এ একবারই লিখেছি। অথচ কাজ করেছে যেখানে ক্লাসটি আসে সেখানেই। যদি id দিয়ে এটা করতে যেতেন তাহলে পরে ৫টি হেডিং এর জন্য ৫টি ভিন্ন আইডি দিতে হত এবং সিএসএস এ ৫ বার রুল লিখতে হত। এটাই ক্লাসের মুল সুবিধা যে একাধিক এলিমেন্টে কমন স্টাইল দিতে চাইলে একবার লিখলেই কাজ হয়।
কখন ক্লাস ব্যবহার করবেন
==========================
ধরুন আপনার সাইটের ২০ টি p এলিমেন্ট আছে এখন আপনি চান ১০ টি প্যারাগ্রাফের রং, এলাইনমেন্ট বা অন্য যেকোন স্টাইল একই রকম হবে এরুপ ক্ষেত্রে সিএসএস ক্লাস ব্যবহার করতে হবে।
উদাহরন স্বরুপ এই সাইটটির হেডিংগুলি দেখুন যেগুলি বামে ডানে দেখাচ্ছে (টিউটোরিয়ালসমূহ, পিএইচপি টিউটোলিয়াল, ডেটাবেস, ফটোশপ, ডানে আছে ওয়েব লিংক ইত্যাদি।) সবগুলির ব্যাকগ্রাউন্ড রং সবুজ। এখানে হেডিংগুলি যে div এলিমেন্টের ভিতরে আছে সেটার একই ক্লাস দেয়া হয়েছে (moduletable) এরপর সিএসএস এ আমরা .moduletable h3 এভাবে এই হেডিংগুলিকে টার্গেট করে বা সিলেক্ট করে একই স্টাইল দিয়েছি। background, color, font সব একই দেখুন।
একসাথে একাধিক ক্লাস ব্যবহার
==============================
ধরুন উপরের উদাহরনে h3 গুলির মধ্যে প্রথমটি মাঝখানে দেখতে চান মানে text-align:center দিতে চান তবে রং বেগুনিই থাকবে। এসব ক্ষেত্রে ঐ প্রথম h3 এলিমেন্টে একটা স্পেস দিয়ে tutorial এর পর যেকোন নামে আরেকটা ক্লাস দেয়া যায়। এটা খুবই উপকারী একটা ফিচার। এতে করে tutorial ক্লাসের সব স্টাইল h3 তে থাকবে এবং প্রথমটাতে চাইলে আতিরিক্ত ক্লাসটি দিয়ে অন্য স্টাইল দিতে পারেন। যেমন
01.<!DOCTYPE html>02.<html>03.<head>04.<style>05..demo_head{06.color:#f00;07.}08..tutorial{09.color:#c8a2c8;10.}11..centered{12.text-align:center;13.}14.</style>15.</head>16.<body>17. 18.<h1 class="demo_head">Webcoachbd demo heading1</h1>19.<h1 class="demo_head">Webcoachbd demo heading2</h1>20.<p id="demo_para">demo content goes here.</p>21.<h3 class="tutorial centered">Webcoachbd HTML Tutorial</h3>22.<h3 class="tutorial">Webcoachbd CSS Tutorial</h3>23.<h3 class="tutorial">Webcoachbd JQuery Tutorial</h3>24.</body>25.</html>
0 মন্তব্য(গুলি):
Post a Comment