এইচটিএমএল সিএসএস বুটস্ট্রাপ জাভাস্ক্রিপ্ট জেকুয়েরি
লগইন
×

সিএসএস টিউটোরিয়াল

হোম-HOME পরিচিতি-Introduction গঠনপ্রণালী-Syntax ব্যবহার পদ্ধতি-Use কালার-Color ব্যাকগ্রাউন্ড-Background বর্ডার-Border মার্জিন-Margin প্যাডিং-Padding উচ্চতা/প্রস্থ-Height/Width বক্সমডেল-BoxModel আউটলাইন-Outline টেক্সট-Text ফন্ট-Font লিংক-Link লিস্ট-List টেবিল-Table প্রদর্শনী-Display সর্বোচ্চ উচ্চতা-Maxwidth পজিশন-Position ওভারফ্লো-Overflow ফ্লট-Float ইনলাইন-ব্লক-Inlineblock এলাইন-Align কম্বিন্যাটর-Combinator সুডো-ক্লাস-PseudoClass সুডো-এলিমেন্ট-PseudoElement প্রোপার্টি-Opacity ন্যাভিগেশনবার-NavigationBar ড্রপডাউন-Dropdown টুলটিপ-Tooltip ইমেজ গ্যালারী-ImageGallery ইমেজ স্প্রাইট-ImageSprite এট্রিবিউট সিলেক্টর-AttrSelector ফর্ম-Form কাউন্টার-Counter

সিএসএস-৩

ভূমিকা-Introduction রাউন্ডেড কর্নার-RoundedCorner বর্ডারইমেজ-Border Image ব্যাকগ্রাউন্ড-Background কালার-Color গ্র্যাডিয়েন্ট-Gradient স্যাডো-Shadow টেক্সট-Text 3ফন্ট-Font 2D ট্রান্সফর্ম-Transform 3D ট্রান্সফর্ম-Transform ট্রানজিশন-Transition এনিমেশন-Animation ইমেজ-Image বাটন-Button পেজিনেশন-Pagination মাল্টি-কলাম-MultColumn ইউজার ইন্টারফেস-UserInterface বক্স সাইজিং-BoxSizing ফ্লেক্সবক্স-Flexbox মিডিয়া কুয়েরি-MediaQuery মিডিয়া কুয়েরি উদাহরণ

সিএসএস রেসপন্সিভ

রেসপন্সিভ পরিচিতি-Introduction রেসপন্সিভ ভিউপোর্ট-Viewport রেসপন্সিভ গ্রাইড ভিউ-Grid View রেসপন্সিভ মিডিয়া কুয়েরি-Media Query রেসপন্সিভ ইমেজ-Image রেসপন্সিভভিডিও-Video ফ্রেমওয়ার্ক-Frameworks

সিএসএস রেফারেন্স

রেফারেন্স-Reference সিলেক্টর-Selector ফাংশন-Function রেফারেন্স আউরাল-ReferenceAural ওয়েব সেফ ফন্ট-WebSafeFont এনিমেটেবল-Animatable ইউনিট-Unit PX-EM কনভার্টার-Converter কালার-Color কালার ভ্যালু-ColorValue ডিফল্ট ভ্যালু-DefaultValue ব্রাউজার সাপোর্ট-BrowserSupport

 

সিএসএস width এবং max-width


width, max-width এবং margin: auto এর ব্যবহার

পূর্ববর্তী অধ্যায় থেকে আমরা জেনেছি যে, একটি ব্লক-লেভেল এলিমেন্ট সবসময় সম্পূর্ণ প্রস্থ অর্থাৎ বাম এবং ডানদিকে যতটা সম্ভব জায়গা দখল করে।

ব্লক লেভেল এলিমেন্টে width সেট করে দিলে এর কন্টেইনারের শেষ প্রান্ত পর্যন্ত প্রস্থ দখল করতে পারে না।

এর পরে আপনি এলিমেন্টটিকে কন্টেইনারের মধ্যে অনুভূমিকভাবে সেন্টারে রাখতে চাইলে margin প্রোপার্টির ভ্যালু auto সেট করতে হবে।

এক্ষেত্রে এলিমেন্টটি নির্দিষ্ট প্রস্থ দখল করবে এবং বাকী অংশটুকু উভয় পাশের মার্জিনের জন্য সমানভাবে ভাগ করে দিবে।

এই <div> এলিমেন্টটিতে width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto

এলিমেন্টের width(600px) থেকে ব্রাউজার উইন্ডো ছোট হলে উপরের <div> এলিমেন্ট নিয়ে সমস্যায় পড়তে হবে।

অর্থাৎ ব্রাউজার একটি হরিজন্টাল স্ক্রলবার সৃষ্টি করবে।

এই সমস্যা থেকে উত্তরণের জন্য max-width প্রোপার্টি ব্যবহার করা হয়।


এই <div> এলিমেন্টটিতে max-width প্রোপার্টির ভ্যালু সেট করা হয়েছে 600px এবং margin প্রোপার্টির ভ্যালু সেট করা হয়েছে auto

বিঃদ্রঃ আমাদের এই অধ্যায়ে ব্যবহৃত <div> দুটির মধ্যে পার্থক্য দেখার জন্য ব্রাউজার উইন্ডোর আকার 600px থেকে ছোট করুন।

নিচের উদাহরণে এদের ব্যবহার দেখানো হলোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  div.width {
    width: 600px;
    margin: auto;
    padding: 8px;
    border: 2px solid teal;
  }
  div.max-width {
    max-width: 600px;
    margin: auto;
    padding: 8px;
    border: 2px solid green;
  }
  </style>
</head>
<body>

  <h2>width এবং max-width প্রোপার্টির ব্যবহার</h2>
  <div class="width">এই div এলিমেন্টের "width:600px;" সেট করা হয়েছে।</div>
  <br>
  <div class="max-width">এই div এলিমেন্টের "max-width:600px;" সেট করা হয়েছে।</div>

</body>
</html>

বিঃদ্রঃ দুটি <div> এর মধ্যে পার্থক্য় বুঝার জন্য ব্রাউজার উইন্ডোর আকার 600px থেকে ছোট করুন।

ফলাফল