সিএসএস (CSS) বাংলা টিউটোরিয়াল (পার্ট-B৩)

পাঠক বন্ধুরা, আপনারা নিশ্চয়ই “ওয়ান মার্কেট ” এর CSS সম্পর্কিত বিগত টিউটোরিয়াল গুলোর বাংলা ভিডিও টিউটোরিয়াল গুলো দেখেছেন এবং অনুশীলন করছেন। ইতোমধ্যে দ্বিতীয় পার্ট তে কীভাবে কোন একটি এলিমেন্টের পেছনে ছবি সেট করা যায় তা দেখেছেন। আজ CSS এর Image background নিয়ে বিস্তারিত এবং text style নিয়ে আলোচনা করবো। আপনাদের জন্য “ফ্রী বাংলা টিউটোরিয়াল” এর HTML টিউটোরিয়ালগুলো ভালোভাবে শিখে নিলে CSS শেখা খুব সহজ হবে। পেজের ব্যাকগ্রাউন্ড একটি ইমেজ এমনটি করতে হলে কীভাবে কোড করতে হবে তা আপনারা ইতিমধ্যে জেনেছেন কিন্তু যদি আপনি চান ছোট একটি ইমেজ (২০০x৩০০) দিয়ে শুধু আনুভূমিকভাবে কিংবা উলম্ভভাবে ইমেজ repeat করবে তবে কি করবেন? আসুন দেখি। CSS এর নিচের কোডটি sample.png (200×200) ছবিটি দিয়ে body এর right সাইড-এ একটা প্যানেল এর মত সৃষ্টি করবেঃ

body{ background-image:url(‘sample.png'); background-position:right; background-repeat:repeat-y; }

1 2 3 4 5

body{ background-image:url(‘sample.png'); background-position:right; background-repeat:repeat-y; }

By default ব্যাকগ্রাউন্ড repeat এর value repeat-all করা থাকে। repeat-x দিলে শুধু আনুভূমিক দিকে repeat করি তেমনি repeat-y দিলে শুধু উলম্ভ দিকে repeat করে। ব্যাকগ্রাউন্ড position এর মান left, right, top, bottom ও center ইত্যাদি দেয়া যায়। এখুনি চর্চা করুন নতুবা পরে বুঝতে আসুবিধা হবে। ঠিক মতো padding property ব্যবহার করে ও লিংক ব্যবহার করে এই ইমেজ ব্যাকগ্রাউন্ড দিয়ে মনের মতো button ও চাইলে আপনি বানাতে পারেন। প্রায় সব HTML উপাদানের পেছনে ছবি ব্যাকগ্রাউন্ড হিসেবে সেট করা যায়।

Text formatting এর জন্য বেশ কিছু CSS এর property defining agent আছে। যেমনঃ color, text-transform, text-decoration, text-align, letter-spacing ও line-height সহ ইত্যাদি। নিচে একটি উদাহরণ দেখানো হলঃ
p{
text-decoration:underline;   [text কে underline করবে] text-align:left;   [text এর alignment বাম দিকে] text-transform:lowercase; [সব বর্ণকে small letter করবে] background-color:#99CC66;
color:#FFFFFF;
line-height:38px;  [পরপর দুটি লাইনের মাঝে ফাঁক কত তা নির্ধারণ করে] letter-spacing:3px; [পরপর দুটি letter এর মাঝে ফাঁক] }

আসলে টেক্সট ফরম্যাটিং এর এই property গুলো self-explanatory তাই বেশি কিছু না লিখে আপনাদের এসব property ব্যবহার করার পরামর্শ দেওয়া যাক। ধন্যবাদ পাঠক বন্ধুরা।