যখন আপনি একটি ওয়েব পেজ ডিজাইন করছেন, তখন আপনি সম্ভবত পেজে প্রদর্শিত এলিমেন্টগুলোর জন্য নির্দিষ্ট আকার সংজ্ঞায়িত করতে চাবেন। উদাহরণস্বরূপ, আপনি চাইতে পারেন একটি বক্সের নির্দিষ্ট উচ্চতা (height) থাকে, বা একটি টেক্সট লাইনের নির্দিষ্ট প্রস্থ (width) থাকে।
এখানেই CSS height এবং width প্রোপার্টিগুলি কাজে আসে। height এবং width প্রোপার্টিগুলি আপনাকে CSS-এ একটি এলিমেন্টের উচ্চতা এবং প্রস্থ সেট করতে দেয়।
এই টিউটোরিয়ালে উদাহরণসহ CSS height এবং width প্রোপার্টির বেসিক এবং min এবং max height এবং width প্রোপার্টি ব্যবহার করে রেসপন্সিভ এলিমেন্ট ডিজাইন করার পদ্ধতি আলোচনা করা হয়েছে। এই টিউটোরিয়াল পড়া শেষে আপনি CSS height এবং width প্রোপার্টি ব্যবহার করে একটি ওয়েব পেজের একটি এলিমেন্টের আকার সেট করতে এক্সপার্ট হবেন।
CSS Height এবং Width
একটি ওয়েব পেজের একটি এলিমেন্টের উচ্চতা এবং প্রস্থ সেট করা আপনাকে সেই এলিমেন্টটি ওয়েব পেজে কতটুকু জায়গা ঘেরে তা সংজ্ঞায়িত করতে দেয়। এটি আপনাকে আপনার ওয়েব পেজের এলিমেন্টগুলোর জন্য একটি কাঠামো বিকাশ করতে সাহায্য করতে পারে যাতে প্রতিটি এলিমেন্ট আপনার প্রয়োজন অনুযায়ী সঠিকভাবে ظاهر হয়।
একটি এলিমেন্ট কতটুকু হরিজন্টালি এবং ভার্টিক্যালি 뻗তে পারে তা সংজ্ঞায়িত করতে, আপনি যথাক্রমে width এবং height প্রোপার্টি ব্যবহার করতে পারেন।
width এবং height প্রোপার্টিগুলি আপনাকে একটি বক্সের কন্টেন্ট এরিয়ার জন্য একটি নির্দিষ্ট প্রস্থ এবং উচ্চতা সেট করতে দেয়। এর মানে width এবং height প্রোপার্টিগুলি একটি বক্সের কন্টেন্টের স্পেস নিয়ন্ত্রণ করে এবং বক্সের জন্য সেট করা যেকোনো মার্জিন বা প্যাডিংকে প্রভাবিত করে না।
height এবং width প্রোপার্টিগুলি নিচের সিনট্যাক্স ব্যবহার করে:
height: heightValue; width: widthValue;heightValue এবং widthValue মানগুলো নিচের যেকোনো একটি মান গ্রহণ করতে পারে:
auto: ব্রাউজার স্বয়ংক্রিয়ভাবে উচ্চতা এবং প্রস্থ ক্যালকুলেট করে।length: px, em, rem, ইত্যাদিতে একটি বক্সের প্রস্থ বা উচ্চতা।percentage: একটি বক্সের প্রস্থ বা উচ্চতা ঐ এলিমেন্ট প্রদর্শিত হওয়া ব্লকের আকারের শতাংশ হিসেবে।initial: বক্সের জন্য নির্দিষ্ট ডিফল্ট মান।inherit: যে বক্সে একটি এলিমেন্ট প্রদর্শিত হয় তার প্রস্থ বা উচ্চতার একই মান।
এখন যেহেতু আমরা height এবং width প্রোপার্টির বেসিক জানি, আমরা এই প্রোপার্টিগুলির প্রতিটির উদাহরণের মাধ্যমে কাজ দেখতে পারি।
CSS height এবং width প্রোপার্টি
মান লইজिए আমরা The Pickled Apple নামক একটি স্থানীয় ক্যাফের জন্য একটি ওয়েবসাইট ডিজাইন করছি। এই ক্যাফে আমাদের তাদের ওয়েবসাইটের "About" পেজে একটি বক্স তৈরি করতে বলেছে, যাতে ক্যাফের একটি সংক্ষিপ্ত বিবরণ থাকবে।
এই বক্সটি 200px প্রস্থের এবং 200px উচ্চতার হবে এবং এর হালকা স্লেটি (light gray) ব্যাকগ্রাউন্ড থাকবে। এই মাপগুলো এই জন্য বেছে নেওয়া হয়েছে যাতে আমরা যে অন্যান্য এলিমেন্টগুলো ওয়েব পেজে যোগ করতে চাই সেগুলি আমরা ইমপ্লিমেন্ট করার সময় ফিট করে।
আমরা নিচের কোড ব্যবহার করে এই বক্সটি তৈরি করতে পারি:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox { height: 200px; width: 200px; background-color: lightgray; }
</style>
কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোড ব্রেক ডাউন করা যাক। আমাদের HTML ফাইলে, আমরা একটি <p> ট্যাগ ব্যবহার করে একটি প্যারাগ্রাফ টেক্সট তৈরি করেছি। এই <p> ট্যাগের ক্লাস নাম aboutBox, যা আমরা আমাদের CSS ফাইলে প্যারাগ্রাফ টেক্সট স্টাইল করার জন্য ব্যবহার করি।
আমাদের CSS ফাইলে, আমরা একটি স্টাইল রুল সংজ্ঞায়িত করেছি যা aboutBox ক্লাস নাম 가진 যেকোনো এলিমেন্টে প্রযোজ্য। এই স্টাইল রুল একটি এলিমেন্টের উচ্চতা 200px, প্রস্থ 200px, এবং ব্যাকগ্রাউন্ড রঙ হালকা স্লেটি সেট করে।
আমরা যদি আমাদের এলিমেন্টকে 100px প্রস্থের করতে চাই, তবে আমরা width প্রোপার্টি 100px সমান করতে পারি। অথবা আপনি যদি আপনার এলিমেন্টকে 300px উচ্চতার করতে চান, তবে আপনি height প্রোপার্টি 300px সমান করতে পারেন।
CSS min এবং max Length প্রোপার্টি
width এবং height ফিক্সড মান (fixed values)। এর মানে আপনি যে প্রস্থ এবং উচ্চতা নির্দিষ্ট করবেন সেগুলি একই থাকবে এবং উইন্ডো রিসাইজ করলে বা ওয়েব পেজটি অন্য ডিভাইসে দেখলে সেগুলি পরিবর্তন হবে না (যদি আপনি একটি রিলেটিভ হাইট মান ব্যবহার না করেন, যেমন প্যারেন্ট এলিমেন্টের আকারের শতাংশ)।
এটি বোঝা গুরুত্বপূর্ণ কারণ আপনি যদি একটি অ্যাক্সেসিবল (accessible) এক্সপেরিয়েন্স ডিজাইন করতে চান, তবে এলিমেন্টগুলোর জন্য নির্দিষ্ট উচ্চতা এবং প্রস্থ সেট করা প্র্যাকটিকেল নাও হতে পারে। উদাহরণস্বরূপ, আপনি যদি একটি ইমেজের প্রস্থ 500px নির্দিষ্ট করেন, তবে এটি ইমেজকে ভুলভাবে রেন্ডার করতে পারে যদি একজন ব্যবহারকারী সাইটটি মোবাইল ডিভাইসে দেখে, যার স্ক্রিন আকার ছোট হতে পারে।
এখানেই min এবং max length মানগুলো কাজে আসে।
একটি এলিমেন্টকে ভিন্ন স্ক্রিন এবং ভিউপোর্ট আকারের সাথে অভিযোজিত করতে, আপনি min-width, max-width, min-height, এবং max-height প্রোপার্টিগুলি ব্যবহার করতে পারেন। আপনি যখন এই প্রোপার্টিগুলি নির্দিষ্ট করেন, width এবং height এর জন্য নির্দিষ্ট মানগুলো ওভাররাইড (override) হয়।
min-height প্রোপার্টি একটি প্রোপার্টির ন্যূনতম উচ্চতা সংজ্ঞায়িত করে। যদি min-height নির্দিষ্ট করা থাকে, তবে একটি এলিমেন্টের উচ্চতা কখনো min-height এর মান থেকে কম হবে না। min-width প্রোপার্টি একটি প্রোপার্টির ন্যূনতম প্রস্থ সংজ্ঞায়িত করে এবং একইভাবে কাজ করে।
একইভাবে, আপনি যদি একটি প্রোপার্টির সর্বোচ্চ উচ্চতা বা প্রস্থ সংজ্ঞায়িত করতে চান, তবে আপনি যথাক্রমে max-height এবং max-width ব্যবহার করতে পারেন।
চলুন আমাদের আগের ক্যাফে উদাহরণে ফিরি। মান লইজिए আমরা আমাদের বক্সের প্রস্থ ব্যবহারকারীর স্ক্রিন আকার অনুযায়ী পরিবর্তন করতে চাই। বক্সের সর্বোচ্চ প্রস্থ 500px হওয়া উচিত, এবং আমাদের বক্স কখনো 100px থেকে সংকীর্ণ হবে না। আমরা নিচের কোড ব্যবহার করে এই লক্ষ্য অর্জন করতে পারি:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox { max-width: 500px; min-width: 100px; background-color: lightgray; }
</style> কোড এডিটরের উপরের বাটনে ক্লিক করুন আমাদের HTML/CSS কোডের আউটপুট দেখতে।
আমাদের কোড ব্রেক ডাউন করা যাক এবং কীভাবে এটি কাজ করে তা আলোচনা করি। আমাদের HTML ফাইলে, আমরা <p> ট্যাগের মধ্যে একই টেক্সট সহ একটি প্যারাগ্রাফ নির্দিষ্ট করেছি আমাদের প্রথম উদাহরণের মতো। এই প্যারাগ্রাফের সাথে যুক্ত ক্লাস নাম aboutBox।
আমাদের CSS ফাইলে, আমরা aboutBox ক্লাসের সাথে যুক্ত তিনটি প্রোপার্টি নির্দিষ্ট করেছি।
max-width প্রোপার্টি 500px সেট করা হয়েছে, যার মানে বক্সের সর্বোচ্চ প্রস্থ 500px। min-width প্রোপার্টি 100px সেট করা হয়েছে, যার মানে বক্স কখনো 100px থেকে সংকীর্ণ হবে না, ব্যবহারকারী সাইটটি কোনো ডিভাইসে দেখুক না কেন। background-color প্রোপার্টি lightgray সেট করা হয়েছে, যা আমাদের বক্সের ব্যাকগ্রাউন্ড রঙ হালকা স্লেটি সেট করে।
এই বক্সের আকার ব্রাউজারের আকার অনুযায়ী পরিবর্তন হবে। সুতরাং, আপনি যদি ব্রাউজার উইন্ডো ছোট করেন, বক্সের আকারও 그에 অনুযায়ী পরিবর্তন হবে। যাইহোক, ব্রাউজার উইন্ডো কতটুকু বড় কেন না হয়, <p> ট্যাগের প্রস্থ কখনো 500px অতিক্রম করবে না।
উপসংহার (Conclusion)
CSS height এবং width প্রোপার্টিগুলি আপনাকে একটি ওয়েব পেজের একটি এলিমেন্টের উচ্চতা এবং প্রস্থ সংজ্ঞায়িত করতে দেয়।
যাইহোক, এই প্রোপার্টিগুলি একটি এলিমেন্টের উচ্চতা এবং প্রস্থের জন্য একটি ফিক্সড মান সেট করে। আপনি যদি একটি বক্সের আকার ব্রাউজার উইন্ডোর আকার অনুযায়ী পরিবর্তন করতে চান, তবে আপনি min-height, min-width, max-height এবং max-width প্রোপার্টিগুলি ব্যবহার করতে পারেন।
এই টিউটোরিয়ালে, উদাহরণের রেফারেন্স নিয়ে, CSS-এ height এবং width-এর বেসিক, height এবং width প্রোপার্টি কীভাবে ব্যবহার করতে হয়, এবং সংশ্লিষ্ট max এবং min height এবং width প্রোপার্টি কীভাবে ব্যবহার করে একটি ওয়েব পেজের একটি এলিমেন্টের আকার সেট করতে হয় তা আলোচনা করা হয়েছে। এখন আপনি height এবং width প্রোপার্টি এক্সপার্টের মত ব্যবহার করার জন্য প্রস্তুত!
