আজ
আমরা CSS এর অন্যান্য উপাদান গুলো যেমনঃ CSS ফন্ট, CSS এর color
প্রোপার্টি, CSS বক্স মডেল ইত্যাদি সম্পর্কে জানবো যেগুলো HTML কোড লিখতে
আমাদের কাজে লাগবে।
HTML এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে CSS ফন্ট গুরুত্বপূর্ণ। এজন্য বেশ কিছু CSS প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত।
নিচের সেগুলির উদাহরণ সহ আলোচনা করা হলঃ
CSS ফন্ট
CSS বক্স মডেল
অনেক সময় অনেক লেখা এবং ছবিকে বক্সের ভেতরে উপস্থাপন করার দরকার হয়।
CSS দিয়ে তৈরি এই বক্স ব্রাউজারে দেখা যায়।
Border- প্যাডিং এবং কনটেন্ট চারিদিকে লাইনের সৃষ্টি করে। বর্ডারের ব্যাকগ্রাউন্ড কালার থাকে।
উদাহরণ
Margin- বর্ডারের চারিদিকে একটি এলাকাকে ক্লিয়ার করে । মার্জিনের কোনো ব্যাকগ্রাউন্ড কালার থাকে না।
Padding-কনটেন্ট চারিদিকে একটি এলাকাকে ক্লিয়ার করে । প্যাডিং বক্সের ব্যাকগ্রাউন্ড কালার থাকে।
content- বক্সের কনটেন্ট যেখানে টেক্সট ও ইমেজগুলো আবির্ভূত হয় ।
উদাহরন
আইডি এট্রিবিউট
ক্লাস এট্রিবিউট
HTML id এট্রিবিউটের মত class আরেকটা এট্রিবিউট আছে। প্রায় সব HTML এলিমেন্টে এটা ব্যবহার করতে পারেন।
ধরুন আপনার একটা HTML ডকুমেন্টে ১০ টা হেডিং আছে ২টি h1, ৩টি h3, h2 ... এরকম আরও। এখন আপনি যদি চান যে সবগুলি h1 এর রং লাল এবং সবগুলি h3 এর রং বেগুনি হবে, তো কি করবেন, প্রতিটি হেডিং এর আইডি দিবেন? এবং প্রতিটি আইডি ধরে ধরে পরে CSS লিখবেন? উত্তর হল না। কেননা এই সমস্যার সমাধানের জন্যই CSS ক্লাস।
যেহেতু h1 দুটির রং দিব লাল তাই এইদুটি হেডিং এর আমি একই ক্লাস দেব এভাবে h3 ৩টিরও একই ক্লাস দেব। এরপর সেই ক্লাস ধরে স্টাইলিং।
উদাহরণ
HTML এলিমেন্টের ভিতরের টেক্সটের আকার, ফন্ট, গাঢ়তা ইত্যাদি পরিবর্তন এবং সাজাতে CSS ফন্ট গুরুত্বপূর্ণ। এজন্য বেশ কিছু CSS প্রোপার্টিজ আছে যেগুলির বহুল ব্যবহার প্রচলিত।
নিচের সেগুলির উদাহরণ সহ আলোচনা করা হলঃ
CSS ফন্ট
- font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়।
- font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সটের সাইজ বা আকার কত বড় হবে।
- CSS এর color প্রোপার্টি দ্বারা HTML এলিমেন্টের টেক্সটের রং নির্ধারণ করা হয়।
<font>ট্যাগটি HTML এর পুরনো ভার্সনে কাজ করে HTML 5 এ কাজ করেনা।
CSS বক্স মডেল
অনেক সময় অনেক লেখা এবং ছবিকে বক্সের ভেতরে উপস্থাপন করার দরকার হয়।
CSS দিয়ে তৈরি এই বক্স ব্রাউজারে দেখা যায়।
Border- প্যাডিং এবং কনটেন্ট চারিদিকে লাইনের সৃষ্টি করে। বর্ডারের ব্যাকগ্রাউন্ড কালার থাকে।
উদাহরণ
Margin- বর্ডারের চারিদিকে একটি এলাকাকে ক্লিয়ার করে । মার্জিনের কোনো ব্যাকগ্রাউন্ড কালার থাকে না।
Padding-কনটেন্ট চারিদিকে একটি এলাকাকে ক্লিয়ার করে । প্যাডিং বক্সের ব্যাকগ্রাউন্ড কালার থাকে।
content- বক্সের কনটেন্ট যেখানে টেক্সট ও ইমেজগুলো আবির্ভূত হয় ।
উদাহরন
আইডি এট্রিবিউট
- কয়েকটি বাদে প্রায় প্রত্যেকটি HTML এলিমেন্টে id এট্রিবিউট ব্যবহার করা যায়।
- id এট্রিবিউটের মান ইচ্ছেমত দিতে পারেন।
- সহজ কথায় id হচ্ছে এলিমেন্টির একটা নাম। এই নাম ধরে CSS এ এলিমেন্টটিকে সিলেক্ট করা হয় এবং স্টাইলিং করা হয়।
ক্লাস এট্রিবিউট
HTML id এট্রিবিউটের মত class আরেকটা এট্রিবিউট আছে। প্রায় সব HTML এলিমেন্টে এটা ব্যবহার করতে পারেন।
ধরুন আপনার একটা HTML ডকুমেন্টে ১০ টা হেডিং আছে ২টি h1, ৩টি h3, h2 ... এরকম আরও। এখন আপনি যদি চান যে সবগুলি h1 এর রং লাল এবং সবগুলি h3 এর রং বেগুনি হবে, তো কি করবেন, প্রতিটি হেডিং এর আইডি দিবেন? এবং প্রতিটি আইডি ধরে ধরে পরে CSS লিখবেন? উত্তর হল না। কেননা এই সমস্যার সমাধানের জন্যই CSS ক্লাস।
যেহেতু h1 দুটির রং দিব লাল তাই এইদুটি হেডিং এর আমি একই ক্লাস দেব এভাবে h3 ৩টিরও একই ক্লাস দেব। এরপর সেই ক্লাস ধরে স্টাইলিং।
উদাহরণ