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

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

হোম-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

 

সিএসএস অনুভূমিক এবং উল্লম্ব Align


সিএসএসের মাধ্যমে একটি এলিমেন্টকে ডানে, বামে এবং মাঝে শ্রেনীবিন্যাস বা সাজানো যায়। যেমনটি এই এলিমেন্টটিকে মাঝে শ্রেনীবিন্যাস করা হয়েছে।


এলিমেন্টকে মধ্যখানে এলাইন

margin: auto; ব্যবহার করে আপনি কোন এলিমেন্টকে অনুভূমিকভাবে কেন্দ্রে আনতে পারবেন। কন্টেন্টের জন্য আপনাকে নির্দিষ্ট প্রস্থ(widht) সেট করে দিতে হবে। আর কন্টেন্টের প্রস্থ ব্যতীত অবশিষ্ট প্রস্থটি দুই মার্জিনের মধ্যে সমানভাবে বিভক্ত হবে। এতে করে আপনার কন্টেন্টটি সর্বদাই মধ্যখানে অবস্থান করবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .margin-auto {
    margin: auto;
    width: 55%;
    border: 3px dotted #CD853F;
    padding: 15px;
  }
  </style>
</head>
<body>

  <h2>এলিমেন্টকে মধ্যখানে এলাইন</h2>
  <div class="margin-auto">
    <p>একটি ব্লক এলইমেন্টকে উল্লম্ভ ভাবে মাঝ বরাবর রাখতে চাইলে margin: auto; ব্যাবহার করুন।</p>
  </div>

</body>
</html>

বিঃদ্রঃ ইন্টারনেট এক্সপ্লোরার(৮) এবং তার পূর্বের ভার্সনে margin: auto; সাপোর্ট করারনোর জন্য DOCTYPE যথাযথ ভাবে ডিক্লেয়ার করতে হবে।

ফলাফল



বিঃদ্রঃ যেই এলিমেন্টের জন্য width প্রোপার্টি সেট করা হয়নি অথবা width প্রোপার্টির ভ্যালু 100% সেট করা হয়েছে, সেই সকল এলিমেন্টে margin: auto; কোন প্রভাবে ফেলবে না। এই বিষয়টি গুরুত্ব সহকারে মনে রাখতে হবে।



টেক্সট মাঝে এলাইন

কোন একটি এলিমেন্টের অন্তর্গত টেক্সটকে মাঝে এলাইন করার জন্য text-align: center; প্রোপার্টি ব্যবহার করা হয়।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
    .text-center {
    text-align: center;
    border: 3px dotted #CD853F;
  }
  </style>
</head>
<body>

  <div class="text-center">
    <p>এই লেখাটি মাঝখানে অবস্থান করবে।</p>
  </div>

</body>
</html>

ফলাফল



পরামর্শঃ টেক্সট এলাইন সম্পর্কে আরো জানতে আমাদের সিএসএস টেক্সট অধ্যায়টি দেখুন।



ছবিকে মাঝে এলাইন

img এলিমেন্টের মধ্যে margin: auto; এবং display: block; একত্রে ব্যবহার করে আমরা একটি ইমেজকে মাঝখানে আনতে পারবোঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .center-img {
    display: block;
    margin: auto;
    width: 45%;
    height: 45%;
  }
    </style>
</head>
<body>

  <p>একটি ইমেজকে মাঝ বরারার প্রদর্শন করতে প্রথমে display:block এবং এর সাথে margin: auto; ব্যবহার করুন।</p>
  <img class="center-img" src="images/nilgiri.jpg" alt="Nilgiri Bangladesh">

</body>
</html>

ফলাফল





এলিমেন্টকে ডানে এবং বামে এলাইন

এলাইনের আরো একটি উপায় রয়েছে। position: absolute; ব্যবহার করে আমরা একটি এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারিঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  .align_right {
    position: absolute;
    right: 0px;
    width: 350px;
    border: 3px dotted #B8860B;
    padding: 8px;
  }
  </style>
</head>
<body>

  <p>position প্রোপার্টি দিয়ে এলিমেন্টটিকে ডানদিকে নেওয়া হয়েছে।</p>
  <div class="align_right">
    <p>সুজলা-সুফলা, শস্য-শ্যামলা, চিরসবুজের দেশ আমাদের এই বাংলাদেশ।</p>
  </div>

</body>
</html>

ফলাফল



পরামর্শঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য position প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই <body> এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।

এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের সাথে position প্রোপার্টি ব্যবহার করতে সমস্যা হয়। এখন যদি আমরা একটি container এলিমেন্ট ব্যবহার করি যার প্রস্থ নির্দিষ্ট করা আছে এবং যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের জন্য নির্দিষ্ট করা থাকে। তাই সবসময় position ব্যবহার করার আগে !DOCTYPE ঘোষণা করতে হবেঃ

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    margin: 0;
    padding: 0;
  }
  .container {
    position: relative;
    width: 100%;
  }
  .align_right {
    position: absolute;
    right: 0px;
    width: 300px;
    background-color: #fff;
    border: 3px dotted #B8860B;   
  }
  </style>
</head>
<body>

  <div class="container">
    <p>position প্রোপার্টি দিয়ে এলিমেন্টটিকে ডানদিকে নেওয়া হয়েছে।</p>
    <div class="align_right">
      <p>সুজলা-সুফলা, শস্য-শ্যামলা, চিরসবুজের দেশ আমাদের এই বাংলাদেশ।</p>
    </div>
  </div>

</body>
</html>

ফলাফল



উপরের উদাহরনের লক্ষ্য করুন, ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে position প্রোপার্টি ব্যবহার করতে সমস্যা হয় তাই সম্পুর্ন বডির মার্জিন এবং প্যাডিং শূন্য করে দিয়ে একটি container এলিমেন্ট width নির্দিষ্ট করে দেওয়া হয়েছে। ফলে ইন্টারনেট এক্সপ্লোরারে এ সমস্যা আর হবে না।



বামে এবং ডানে এলাইন - float প্রোপার্টির ব্যবহার

আমরা float প্রোপার্টি ব্যবহার করেও এলিমেন্টকে ডানে এবং বামে এলাইন করতে পারি।

বিঃদ্রঃ যখন কোনো এলিমেন্টকে এলাইন করার জন্য float প্রোপার্টি ব্যবহার করবেন, এক্ষেত্রে অবশ্যই <body> এলিমেন্টে margin এবং padding উল্লেখ করতে হবে। কারণ এটি ডিফল্টভাবে বিভিন্ন ব্রাউজারে বিভিন্ন হয়।

এছাড়াও ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনের ক্ষেত্রে float প্রোপার্টি ব্যবহারে সমস্যা রয়েছে। যদি !DOCTYPE ঘোষণা করা না হয়ে থাকে তাহলে ইন্টারনেট এক্সপ্লোরার(৮) এবং এর পূর্বের ভার্সনে ডান দিকে 17px মার্জিন যোগ হবে। মনে করা হয় যে এই জায়গাটি স্ক্রলবারের জন্য নির্দিষ্ট করা থাকে। তাই সবসময় float ব্যবহার করার আগে !DOCTYPE ঘোষণা করতে হবে।

উদাহরণ

<!DOCTYPE html>
<html>
<head>
  <title>সিএসএস উদাহরণ</title>
  <style>
  body {
    margin: 0;
    padding: 0;
  }
  .align_right {
    float: right;
    right: 0px;
    width: 350px;
    background-color: #fff;
    border: 3px dotted #B8860B;   
  }
  </style>
</head>
<body>

  <p>float প্রোপার্টি দিয়ে এলিমেন্টটিকে ডানদিকে নেওয়া হয়েছে।</p>
  <div class="align_right">
    <p>সুজলা-সুফলা, শস্য-শ্যামলা, চিরসবুজের দেশ আমাদের এই বাংলাদেশ।</p>
  </div>

</body>
</html>

ফলাফল