|
সিএসএস ক্লাস টিউটোরিয়াল (CSS
Class)
|
|
লেখক
রাসেল
খান
|
সিএসএস এর মাধ্যমে এইচটিএমএল এলিমেন্ট এর অসংখ্য স্টাইল
দেয়া যায়। একটা উদাহরন
দিয়ে বিষয়টি পরিস্কার করা যাক । ধরুন আপনি কখনও
চাচ্ছেন আপনার লেখাটির
ফন্ট বড় এবং সাদা হোক। আবার চাচ্ছেন
ছোট এবং কাল হোক। আপনি ভাগ্যবান
এই অর্থে যে সিএসএস classes ব্যবহার করার মাধ্যমে আপনি
আপনার ইচ্ছা পুরন করতে পারেন।Class এর FormatClass ব্যবহার করা খুব সাধারন। সাধারন সিএসএস কোড এর অংশকে বর্ধিত (extension) করতে হবে। আর এই বর্ধিত অংশকে অবশ্যই এইচটিএমএল ট্যাগ এ Class এর মান হিসাবে বসাতে হবে। নিচে উদাহরন দেয়া হলো:1.p.first{ color:
blue; }2.p.second{ color:
red; }01.<html>02.<body>03.<p>This is a
normal paragraph.</p>04. 05.<p class="first">This
is a paragraph that uses the p.first CSS code!</p>06.<p class="second">This
is a paragraph that uses the p.second CSS code!</p>07.</body>08. 09.</html>This is a normal paragraph. This is a paragraph that uses the p.first CSS code! This is a paragraph that uses the p.second CSS code! আপ নি যেকোন এইচটিএমএল এলিমেন্ট এর সাথে সিএসএস class ব্যবহার করতে পারেন।ধরুন আপনি <p> ট্যাগ ব্যবহার করে স্টাইল দিয়েছেন এবং সিএসএস class ব্যবহার করে অন্য একটি স্টাইল নিদিষ্ট করে দিয়েছেনে ফলে আগের default স্টাইল টি আর নিদিষ্ট লেখার ঊপর কাজ করবে না। 1.p{ color: red;
font-size: 20px; }2.p.test1{ color:
blue; }3.p.test2{ font-size:
12px; }1.<html>2.<body>3.<p>This is a
normal paragraph.</p>4.<p class="test1">This
is a paragraph that uses the p.test1 CSS code!</p>5.<p class="test2">This
is a paragraph that uses the p.test2 CSS code!</p>6....This is a normal paragraph. This is a paragraph that uses the p.test1 CSS code! This is a paragraph that uses the p.test2 CSS code! |
কোন মন্তব্য নেই:
একটি মন্তব্য পোস্ট করুন