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

পাঠক বন্ধুরা, আমি জানি আপনারা যারা CSS শিখতে এই “ফ্রী বাংলা টিউটোরিয়াল” সাইটে এসেছেন তারা CSS এর Box Model এর কথা শুনেছেন। না শুনলে জেনে রাখুন CSS Box model আসলে একটি Document tree-তে এলিমেন্টগুলোর আয়তকার বক্সসমূহ এর বর্ণনা করে। আর outline মানে একটি লাইন যেটা নগদ অর্থ কোন একটা এলিমেন্টকে ঘিরে বর্ডার বাইরে ধার ঘেঁষে আঁকা হয় যার জন্য আলাদা জায়গা নেই না border কিংবা margin এর মতো। আর এই CSS outline property -র দ্বারা আপনি এলিমেন্টের চারদিকে outline ধরণ সেট করে দিতে পারেন। নিচের কোড দ্বারা একটি প্যারাগ্রাফ এর বর্ডারের বাইরে dotted আউটলাইন সেট করা হয়েছেঃ

p { border:3px solid #F00; outline: 5px dotted #690; [এইটাই outline ঠিক করবে] }

1 2 3 4 5

p { border:3px solid #F00; outline: 5px dotted #690; [এইটাই outline ঠিক করবে] }

এখন একটু ডুবি নাকি? একটু ডোবা একটু ভাসা তা না হলে কি হয় শিক্ষা? সম্ভবত CSS এর এই property টা সবচেয়ে কাজের। যেটি হল padding property যার দ্বারা একটা এলিমেন্টের padding সেট করা হয়। padding বিষয় বুঝতে নিচের ছবি দেখলেই যথেষ্ট হবে:

আর outline টা ঠিক border এর গায়ে লেগে থাকে। যাই হোক padding property টা হল যা একটা বক্সের padding area ঠিক করে দেয়। padding বলতে আসলে দীর্ঘায়িত করা বোঝাই। এই property টা দ্বারা padding-top, padding-right, padding-bottom, padding-left কে একসাথে আবার প্রয়োজনে পৃথক ভাবে সেট করা যায়। তাহলে আর দেরি কেন চটপট একটা কোড দেখে নেওয়া যাক।

P{ padding:10px; } [চারধারেই 10px padding নেবে] P{padding: 10px 5px} [10px করে top ও bottom padding আর 5px করে left ও right padding] P{padding:5px 10px 15px;} [5px padding top এর জন্য 10px left ও right padding এর জন্য 15px bottom এর জন্য]

1 2 3

P{ padding:10px;  } [চারধারেই 10px padding নেবে] P{padding: 10px 5px} [10px করে top ও bottom padding আর 5px করে left ও right padding] P{padding:5px 10px 15px;} [5px padding top এর জন্য 10px left ও right padding এর জন্য 15px bottom এর জন্য]

আর যদি চারটি value ই দিয়ে দেন তবে তো চন্দ্র যোগ প্রথমেরটা top তারপরেরটা right এরপর bottom padding এবং শেষটা left padding এর ভালু Specify করে। ভালভাবে চর্চা করুন পাঠক বন্ধুরা। ধন্যবাদ।