Feb 08

সিএসএস ফ্লোট (CSS Float)

শেখ মাহফুজুর রহমান

 

সিএসএস ফ্লোট কি?

ফ্লোটের বাংলা হলো ভাসা। সিএসএস ফ্লোটের মাধ্যমে একটি এলিমেন্টকে ব্রাউজার স্ক্রিনের বাম অথবা ডান দিকে ঠেলে বা ভাসিয়ে দেয়া যায়। এতে ডকুমেন্টের অন্যান্য এলিমেন্টগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপ (wrap) নামে পরিচিত। ইমেজ নিয়ে কাজ করার ক্ষেত্রে সাধারণত ফ্লোট ব্যবহার করা হয় কিন্তু এর মূল ব্যবহার হয় পেজের লেআউট নিয়ে কাজ করার সময়।

 

কিভাবে একটি এলিমেন্ট ভাসে

এলিমেন্টগুলো হরাইজন্টালি ফ্লোট করে, এর মানে হলো একটি শুধু ডানে বা বামে ফ্লোট হতে পারে; উপরে বা নিচের দিকে নয়। একটি ফ্লোট এলিমেন্ট ডানে অথবা বামে যতদূর যাওয়া সম্ভব যেতে পারে। সাধারণত ফ্লোটিং এলিমেন্টটি যে এলিমেন্টের ভিতরে থাকে তার ডান বা বামের শেষ সীমা পর্যন্ত ফ্লোটেড হয়ে থাকে। ফ্লোটেড এলিমেন্টের পরের এলিমেন্টগুলো এর চারপাশে ফ্লো করবে বা ভাসবে। ফ্লোটেড এলিমেন্টের আগের এলিমেন্টগুলোর উপর এর কোন প্রভাব পড়বেনা। যদি কোন ছবি ডান দিকে ফ্লোট করে এর পরের টেক্সটগুলো এর চারপাশ ঘিরে অবস্থান করে যা রেপিং নামে পরিচিতঃ

img {
      float: right;
}

 

পাশাপাশি থাকা ফ্লোটিং এলিমেন্ট

আপনি যদি কিছু সংখ্যক ফ্লোটিং এলিমেন্টকে একটির পর আরেকটিকে রাখেন তাহলে তারা জায়গা থাকার সাপেক্ষে একটি অপরটির পাশে ফ্লোট করবে। নিচে ফ্লোট প্রপার্টি ব্যবহার করে একটি ইমেজ গ্যালারি বানানো হয়েছেঃ

.thumbnail {
     float: left;
     width: 110px;
     height: 90px;
     margin: 5px;
 }

 

ক্লিয়ার ব্যবহার করে ফ্লোট বন্ধ করা

ফ্লোটিং এলিমেন্টের পরের এলিমেন্টগুল এর চারপাশে ফ্লো বা ভেসে বেড়াবে। ক্লিয়ার প্রপার্টি কোন এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্য ফ্লোটিং এলিমেন্ট থাকতে পারবেনা তা বলে দেয়। নিচের উদাহরণে ইমেজ গ্যালারিতে টেক্সট লাইনের সাথে ক্লিয়ার প্রপার্টি ব্যবহার করা হয়েছেঃ

.text_line {
       clear: both;
 }

 

 

আরও কিছু উদাহরণঃ নিজে করুন

  • বর্ডার ও মার্জিনসহ একটি ইমেজ যা একটি প্যারাগ্রাফের ডানে ফ্লোট করেঃ একটি ইমেজকে প্যারাগ্রাফের ডানদিকে ভাসিয়ে দিন এবং ইমেজটিতে বর্ডার ও মার্জিন যোগ করুন।
  • ক্যাপশনসহ একটি ইমেজ যা ডানদিকে ফ্লোট করেঃ ক্যাপশনসহ একটি ইমেজকে ডানদিকে ফ্লোট করুন
  • একটি প্যারাগ্রাফের প্রথম অক্ষরকে বাম দিকে ফ্লোট করাঃ একটি প্যারাগ্রাফের প্রথম অক্ষরকে বাম দিকে ফ্লোট করে তাতে স্টাইল যোগ করুন।
  • হরাইজন্টাল মেন্যু তৈরি করাঃ একটি হরাইজন্টাল মেন্যু তৈরি করতে হাইপার লিংকের একটি লিস্টে ফ্লোট যোগ করুন।
  • টেবল ব্যবহার না করে হোমপেজ তৈরি করাঃ হেডার, ফুটার, লেফট কন্টেন্ট এবং মেইন কন্টেন্টসহ ফ্লোট ব্যবহার করে একটি হোমপেজ তৈরি করুন।

 

সবগুলো সিএসএস ফ্লোট প্রপার্টি

clear – ফ্লোটিং এলিমেন্টের কোন দিকে (ডান অথবা বাম) অন্যান্য এলিমেন্ট থাকতে পারবেনা তা ঠিক করে দেয়। এর ভ্যালুগুলো হলো-

left
right
both
none
inherit

 

float – একটি বক্স অর্থাৎ এলিমেন্ট ফ্লোট করবে কি করবেনা তা ঠিক করে। এর ভ্যালুগুলো হলো-

left
right
none
inherit

Feb 08

সিএসএস পজিশনিং (CSS Positioning)

পজিশনিং

সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। সিএসএস পজিশনিং বৈশিষ্ট্য আপনাকে একটি উপাদান (element) উপস্থাপন করার অনুমতি দেয়। এর মাধ্যমে উপাদান গুলো একটির পিছনে আরেকটি উপাদান রাখা যায়। এমন কি উপাদান এর কন্টেন্ট খুব বড় হলে কি হবে তা উল্লেখ করতে পারে।

উপাদানসমূহ উপরে, নীচে, বাম, ডান এবং বৈশিষ্ট্যাবলী ব্যবহার করে স্থান দিতে পারে। আগে অবস্থান যথাযত সেট না করা হলে, তবে এই বৈশিষ্ট্য কাজ করবে না। এরা পজিশনিং পদ্ধতির উপর নির্ভর করে ভিন্নভাবে কাজ করে। পরিষ্কার ধারনা না থাকলে অনেক কাজে গিয়ে আটকা পরে যাবে।

৪ ধরনের পজিশন পদ্ধতি আছে। নিচে সেগুলা নিয়ে আলোচনা করবো।

১. স্ট্যাটিক (static) পজিশনিং

এতে HTML উপাদান (element) ডিফল্ট স্ট্যাটিক স্থান হয়। এর স্ট্যাটিক স্থান, উপাদান সবসময় পৃষ্ঠার স্বাভাবিক প্রবাহ অনুযায়ী হয়। স্ট্যাটিক স্থান উপাদানগুলো উপরে, নীচে, বাম এবং ডান বৈশিষ্ট্য দ্বারা প্রভাবিত হয় না। এতে বাই ডিফল্ট position: static থাকে, এটার অর্থ হচ্ছে কোন পজিশনিং করা নেই। ডকুমেন্টের কোডের কারনে এলিমেন্টটি যেখানে আসে পেজেও সেখানে দেখাবে।

div.static {
    position: static;
    border: 3px solid #8AC007;
}

 

২. স্থায়ী (Fixed) পজিশনিং

কোন এলিমেন্টের পজিশন ফিক্সড করে দিলে সেটা ব্রাউজারের সাপেক্ষে স্থির হয়ে থাকবে এমনকি স্ক্রল করলেও ঐ এলিমেন্ট তার অবস্থান পরিবর্তন করবেনা।
উদাহরণঃ

div.fixed {
position: fixed;
bottom: 0;
right: 0;
width: 300px;
border: 3px solid #8AC007;
}

ফিক্সড পজিশনিং উপাদানগুলি স্বাভাবিক প্রবাহ থেকে সরিয়ে ফেলা হয়। সাধারনত সেগুলি খুঁজে পায়ও যাই না। এটার কাজ হুবহু absolute এর মতই শুধু পার্থক্য হচ্ছে এটা সবসময় ব্রাউজারের সাপেক্ষে তার অবস্থান নেবে, absolute এর মত প্যারেন্ট এলিমেন্ট এর সাপেক্ষে সরবেনা।

IE7, IE78 এ DOCTYPE না দিলে fixed পজিশনিং কাজ করবেনা।

৩. Relative পজিশনিং

Relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে।
উদাহরণঃ

h2.pos_left {
    position: relative;
    left: -20px;
}

h2.pos_right {
    position: relative;
    left: 20px;
}

এটাও static এর মতই কিন্তু এখানে top, left, bottom, right এবং z-index ব্যবহার করে এলিমেন্ট কে তার অবস্থান থেকে সরানো যাবে।
উদাহরণঃ

h2.pos_top {
    position: relative;
    top: -50px;
}

Relative পজিশনিং এর উপাদান প্রায়ই একেবারে স্থান উপাদানের জন্য ধারক ব্লক হিসাবে ব্যবহার করা হয়।

৪. Absolute পজিশনিং

position: absolute দিলে এলিমেন্টটি তার immediate আগের প্যারেন্ট ডিভের সাপেক্ষে সরবে (top, left ইত্যাদি দিয়ে)। যদি কোন প্যারেন্ট ডিভ না থাকে তাহলেতথা ব্রাউজারের সর্ববাম এবং উপর থেকে হিসেব করে সরবে। উদাহরণঃ h2 { position: absolute; left: 100px; top: 150px; } Absolute পজিশন করলে এলিমেন্ট ডকুমেন্টে স্বাভাবিক অবস্থান হারিয়ে ফেলে মানে absolute উঠিয়ে দিলে এলিমেন্ট টি যেখানে দেখাবে, absolute দিলে সেখানে আর দেখাবেনা। এখানে এলিমেন্ট তার নিজের জন্য আর স্পেস ধরে রাখেনা।

ওভারল্যাপিং উপাদানসমূহ

যখন উপাদানগুলো স্বাভাবিক প্রবাহ বাইরে স্থান হয়, তখন তারা অন্যান্য উপাদানগুলো কে ওভারল্যাপ করে। z-index একটি উপাদান যা স্ট্যাক এ নির্দিষ্ট করে। একটি উপাদান এর ইতিবাচক বা নেতিবাচক স্ট্যাক অর্ডার আছে। উদাহরণঃ img { position: absolute; left: 0px; top: 0px; z-index: -1; } বৃহত্তর স্ট্যাক অর্ডার এর একটি উপাদান একটি নিম্ন স্ট্যাক অর্ডার এর একটি উপাদানের সামনে সবসময় হবে। যদি দুইটি স্থান উপাদান নির্দিষ্ট একটি z-index ছাড়া আবৃত তাহলে HTML কোড শেষ অবস্থান উপাদান এর উপরে দেখানো হবে।

 

Feb 08

সিএসএস ডিসপ্লে এন্ড ভিজিবিলিটি (CSS Display and Visibility)

display প্রোপার্টিজ দিয়ে ব্লক লেভেল এলিমেন্টকে ইনলাইন আবার ইনলাইন এলিমেন্ট কে ব্লক লেভেল বানানো যায়। এছাড়া এই প্রোপার্টিজ দিয়ে এলিমেন্ট অদৃশ্য করে রাখা যায়। মূলত এর ৩/৪ টি মান খুব ব্যবহার হয় বাকি মানগুলি দিয়েও অনেক কাজ হয় তবে কম ব্যবহৃত হয়ে থাকে।

navigation a {
    display: block;
    margin-left: 0.5em;
    padding: 5px;
    border: 1px solid #000;
    color: #000;
    text-decoration: none;
}

 

display:inline; দিয়ে দেখুন সব a বা এনকর ট্যাগ একলাইনে দেখাবে। এনকর হচ্ছে (<a></a>) ইনলাইন এলিমেন্ট। display:block; দেয়াতে ব্লক লেভেল এলিমেন্টের মত কাজ করেছে। এরুপ <span>, <em> ইত্যাদি ইনলাইন এলিমেন্ট বা যেকোন ইনলাইন এলিমেন্টে কে প্রয়োজনে ব্লক লেভেল করা যায় এই প্রোপার্টিজ দিয়ে।

আবার <p>, <li> ইত্যাদি ব্লক লেভেল এলিমেন্ট যেগুলি ব্রাউজারের সম্পূর্ন width নিয়ে থাকে এবং আগে পিছে লাইন ব্রেক দেয়া থাকে এসবকে ইনলাইন এর মত কাজ করাতে display:inline; করে দিতে হয়। যেমনঃ

 

li {
    display: inline;
}

 

দেখুন p কিভাবে ইনলাইন এলিমেন্টের মত কাজ করছে। display এর আরেকটা মান আছে যথা “none”, এটা দিলে ঐ এলিমেন্টকে লুকিয়ে ফেলবে এবং কোন স্পেসও ধরে রাখবেনা।

জেকোয়েরি দিয়ে কাজ ফর্ম ভেলিডেশন ইত্যাদি কাজে এভাবে এলিমেন্ট অদৃশ্য করে রাখার প্রয়োজন হয়।

উপরের উদাহরনে display:inline; এর জায়গায় display:none; দিয়ে দেখুন অার কিছু দেখাবেনা।

inline-block (display:inline-block) একটা মান আছে এটা দিলে ইনলাইনের মতই কাজ করবে শুধু পার্থক্য হচ্ছে height এবং width এখন এলিমেন্ট টির জন্য কাজ করবে।

সাধারনভাবে ইনলাইন এলিমেন্টের height, width কাজ করেনা।

display:table; দিলে এলিমেন্টটি টেবিলের (<table></table>) মত আচরন করবে।

display:table-cell; দিলে এলিমেন্ট টি <td></td> এর মত কাজ করবে।

table-row দিলে <tr></tr> মত কাজ হবে।

এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।

  1. display:inline-table;
  2. display:list-item;
  3. display:table-caption;
  4. display:table-column-group;
  5. display:table-header-group;
  6. display:table-footer-group;
  7. display:table-row-group;
  8. display:table-column;
  9. display:run-in;
  10. display:flex;

 

Feb 08

সি এস এস ডায়মেনশন (CSS Dimension)

CSS dimension হচ্ছে এমন একটি properties যা element এর height এবং width নিয়ন্ত্রণ করে।

height এবং width নির্ধারণ করা

এলিমেন্ট এর উচ্চতা এবং প্রসস্থতা নির্ধারণ করতে height এবং width প্রোপার্টিজ ব্যবহার করা হয়।

height এবং width সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ করে দেয়া যেতে পারে।

[<div> এলিমেন্ট এর উচ্চতা 100 pixels এবং প্রসস্থতা 500 pixels]

নোটঃ height এবং width প্রোপার্টিজ প্যাডিং, বর্ডার বা মার্জিন সমন্নয় করে না; তারা এলিমেন্ট এর প্যাডিং, বর্ডার বা মার্জিন এর ভিতরের উচ্চতা/প্রসস্থতা নির্ধারণ করে।

নিচের উদাহরণটি দেখাচ্ছে যে <div> এলিমেন্ট এর উচ্চতা 100 pixels এবং প্রসস্থতা 500 pixels

div {
    width: 500px;
    height: 100px;
    border: 3px solid #8AC007;
}

 

সর্বচ্চ প্রসস্থতা নির্ধারণ করে দেয়া

max-width প্রোপার্টি এলিমেন্ট এর সর্বচ্চ প্রসস্থতা নির্ধারণ করতে ব্যবহৃত হয়।

max-width সয়ংক্রিয় হতে পারে (ডিফল্ট হিসেবে ব্রাউজার উচ্চতা এবং প্রসস্থতা নির্ধারণ করে) বা px, cm ইত্যাদি দ্বারা বা শতকরা হারে (%) নির্ধারণ করে দেয়া যেতে পারে।

ব্রাউজার এর উইন্ডো এর প্রসস্থতা যখন  <div> এলিমেন্ট এর চেয়ে ছোট হয় তখন এটি সমস্যা সৃষ্টি করে। ব্রাউজার তখন horizontal scrollbar প্রদর্শন করে।

max-width ব্যবহার করলে ব্রাউজার এই সমস্যা ভালভাবে হ্যান্ডলিং করতে পারে।

টিপসঃ দুটি div এর মধ্যে পার্থক্য দেখার জন্য ব্রাউজারকে টেনে 500px এর চেয়ে ছোট করুন।

নোটঃ max-width  প্রোপার্টি এর মান width কে ওভাররাইড করে।

নিচের উদাহরণটি 100 pixels উচ্চতা এবং 500 pixels max-width বিশিষ্ট <div> এলিমেন্ট প্রদর্শন করে।

div {
    max-width: 500px;
    height: 100px;
    border: 3px solid #8AC007;
}

 

CSS Dimension এর সকল Properties

প্রোপার্টি বর্ণনা মান
height

auto

 element এর height নির্ধারণ length

%

inherit
max-height একটি element এর maximum height নির্ধারণ none

length

%

inherit
max-width একটি element এর maximum width নির্ধারণ none

length

%

inherit
min-height একটি element এর minimum height নির্ধারণ length

%

inherit
min-width একটি element এর minimum width নির্ধারণ length

%

inherit
width একটি element এর width নির্ধারণ auto

length

%

inherit

Feb 08

সি এস এস প্যাডিং (CSS Padding)

CSS Padding হচ্ছে element border এবং element content এর মধ্যে ফাকা স্থান।

প্যাডিং

Padding হচ্ছে content (border এর ভিতরে থাকে) এর চারপাশে একটি ফাকা স্থান। Padding কার্যকর হয় element এর
background color দিয়ে।

top, right, bottom এবং left padding পরিবর্তন করা যায় আলাদা properties ব্যাবহার করে । একটি shorthand padding (সংক্ষিপ্ত প্যাডিং) প্রোপার্টি ব্যাবহার করে এক সাথে সব ধরনের padding এর property পরিবর্তন করা যায়।

সম্ভাব্য মান

মান বর্ণনা
length এটি fixed padding নির্দেশ করে (in pixels, pt, em, etc.)
% এটি দ্বারা containing element এর padding % এ প্রকাশ করে

 

প্যাডিং – স্বতন্ত্র দিক

CSS এর ক্ষেত্রে , ভিন্ন ভিন্ন দিক থেকে ভিন্ন ভিন্ন Padding নির্দিষ্ট করা সম্ভব

উদাহরণ

p {
    padding-top: 25px;
    padding-right: 50px;
    padding-bottom: 25px;
    padding-left: 50px;
}

 

Padding – Shorthand property (শর্টকাট পদ্ধতি)

code ছোট রাখতে, সকল padding properties কে একটি প্রোপার্টি দ্বারা নির্দিষ্ট করা সম্ভব। একেই বলে Shorthand property (শর্টকাট পদ্ধতি)।
সকল প্যাডিং প্রোপার্টি এর শর্টকাট প্রোপার্টি হচ্ছে “padding:”

উদাহরণ

p {
    padding: 25px 50px;
}

 

padding property এর একটি হতে চারটি মান থাকতে পারে।

  • padding: 25px 50px 75px 100px;
    • top padding is 25px
    • right padding is 50px
    • bottom padding is 75px
    • left padding is 100px
  • padding: 25px 50px 75px;
    • top padding is 25px
    • right and left paddings are 50px
    • bottom padding is 75px
  • padding: 25px 50px;
    • top and bottom paddings are 25px
    • right and left paddings are 50px
  • padding: 25px;
    • all four paddings are 25px

 

সকল সিএসএস প্যাডিং প্রোপার্টি

প্রোপার্টি বর্ণনা
padding সকল প্যার্ডি প্রোপার্টি এর জন্য শর্টকাট প্রোপার্টি
padding-bottom এলিমেন্ট এর নিচের দিকের প্রার্ডিং নির্দিষ্ট করা
padding-left এলিমেন্ট এর বাম পাশের প্রার্ডিং নির্দিষ্ট করা
padding-right এলিমেন্ট এর ডান পাশের প্রার্ডিং নির্দিষ্ট করা
padding-top এলিমেন্ট এর উপরের দিকের প্রার্ডিং নির্দিষ্ট করা

 

Feb 08

সি এস এস মার্জিন (CSS Margin)

সিএসএস মার্জিন দ্বারা elements এর চার পাশের কিছু ফাঁকা স্থান নির্দেশ করে ।

মার্জিন

Margin দ্বারা element এর চার পাশের clear স্থান (outside the border) কে নির্দেশ করে । Margin এর কোন background color নেই, এটি পুরোপুরি transparent।

Top, right, bottom, and left margin স্বাধীন ভাবে পরিবর্তন করা যায় তাদের আলাদা আলাদা properties ব্যাবহার করে।

সবধরনের margins পরিবর্তন করার জন্য সংক্ষিপ্ত margin property ও ব্যাবহার করা যায়।

সম্ভাব্য মান

মান বর্ণনা
auto এই পদ্ধতি তে browser নিজেই margin calculate করে
length margin বিশেষ ভাবে উল্লেখ করা হয় in px, pt, cm, etc. Default value is 0px
% margin বিশেষ ভাবে উল্লেখ করা হয় in percent of the width of the containing element
inherit margin টি parent element থেকে স্থানান্তরিত হওয়া নির্দেশ করা হয় inherit দ্বারা।

বিঃ দ্রঃ negative values ব্যাবহার করা সম্ভব content overlap করার জন্য।

উদাহরণ

p {
    margin-top: 100px;
    margin-bottom: 100px;
    margin-right: 150px;
    margin-left: 50px;
}

 

মার্জিন – সংক্ষিপ্ত প্রোপার্টি

code কে ছোট করতে ভিন্ন ভিন্ন margin properties কে একটি properties এর মাধ্যমে বর্ণনা করা হয়। একে Shorthand property বলে।
সকল মার্জিন প্রোপার্টি এর জন্য সংক্ষিপ্ত প্রোপার্টি হলো: “margin” ।

p {
    margin: 100px 50px;
}

margin property এক থেকে চার ধরনের মান হতে পারেঃ

  • margin: 25px 50px 75px 100px;
    • top margin is 25px
    • right margin is 50px
    • bottom margin is 75px
    • left margin is 100px
  • margin: 25px 50px 75px;
    • top margin is 25px
    • right and left margins are 50px
    • bottom margin is 75px

margin: 25px 50px;
top and bottom margins are 25px
right and left margins are 50px

margin: 25px;
all four margins are 25px

Feb 08

সি এস এস আউটলাইন্স (CSS Outlines)

এটি elements এর চারপাশে একটি অমীমাংসিত স্থান যা element কে “stand out” করে।
outline properties টি outline এর style, color, and width বিশেষ রূপে উল্লেখ করে।

 

সি এস এস আউটলাইন্স

Outline হচ্ছে এমন একটা line যা elements এর চারপাশে অমীমাংসিত (border এর বাইরে ) স্থান যা element কে “stand out” করে।
তবে outline property টি border property থেকে সম্পূর্ণ ভিন্ন ।

Outline টি element’s dimension এর কোন অংশ নয়, element এর সম্পূর্ণ width এবং height ও outline এর width দ্বারা প্রভাবিত হয় না।

Box Outline

 

সকল সিএসএস আউটলাই প্রোপার্টি

প্রোপার্টি

বর্ণনা

মান
outline outline properties একটি declaration দ্বারা নির্ধারণ করা হয় outline-color
outline-style
outline-width
inherit
outline-color outline এর color নির্ধারণ করা হয় color_name
hex_number
rgb_number
invert
inherit
outline-style outline এর ধরন নির্ধারণ করা হয় none
dotted
dashed
solid
double
groove
ridge
inset
outset
inherit
outline-width outline এর ব্যাপকতা নির্ধারণ করা হয় thin
medium
thick
length
inherit

 

Feb 08

সি এস এস বর্ডার (CSS Border)

CSS border properties এলিমেন্ট এর border এর style, size, and color নির্ধারণ করতে সাহায্য করে ।

 

বর্ডার স্টাইল

Border-style property নির্ধারণ করা হয় কি ধরনের border প্রদর্শিত হবে।
বি: দ্র: Border properties এর কোন প্রভাব কাজ করবে না যদি না border-style property নির্ধারণ করা হয়।

 

বর্ডার স্টাইল মান

none কোন border না থাকা নির্দেশ করে
dotted dotted border নির্দেশ করা হয় এটি দ্বারা
dashed dashed border নির্দেশ করা হয় এটি দ্বারা
solid solid border নির্দেশ করা হয় এটি দ্বারা
double দুইটি border একত্রে নির্দেশ করা হয় এটি দ্বারা। দুটি border এর ব্যাপকতা একই থাকে যেমনটি border-width value তে দেয়া হয়।
groove 3D grooved border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
ridge 3D ridged borderনির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
inset 3D inset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।
outset 3D outset border নির্দেশ করা হয় এটি দ্বারা। এর প্রভাব border এর color value এর উপর নির্ভর করে ।

 

বর্ডার এর প্রসস্থতা

”Border-Width” property ব্যাবহার করা হয় border এর width নির্ধারণ করার জন্য ।

Width ব্যাবহার করা হয় pixels এককে অথবা তিনটি পূর্ব নিরধারিত values: thin, medium, or thick দ্বারা।

বি: দ্র: “border-width” property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে “border-style” ব্যাবহার করে border নির্ধারণ করে নিতে হয়।

উদাহরনঃ

p.one {
    border-style: solid;
    border-width: 5px;
}

p.two {
    border-style: solid;
    border-width: medium;
}

 

বর্ডার এর রঙ

Border-color property ব্যাবহার করা হয় border এর color নির্ধারণ করার জন্য। Color নির্ধারণ করার উপায়ঃ

name color value নির্ধারণ , like “red”
RGB RGB value নির্ধারণ , like “rgb(255,0,0)”
Hex shex valueনির্ধারণ, like “#ff0000”

আপনি চাইলে border color কে “transparent” হিসেবে নির্ধারণ করতে পারেন।

যদি না border color নির্ধারণ করা হয় inherited from “the color property of the element”।

বি: দ্র: “border-color” property একাকী ব্যাবহার করলে ইহা কাজ করবে না । তাই প্রথমে “border-style” ব্যাবহার করে border নির্ধারণ করে নিতে হয়।

উদাহরনঃ

p.one {
    border-style: solid;
    border-color: red;
}

p.two {
    border-style: solid;
    border-color: #98bf21;
}

 

বর্ডার – স্বতন্ত্র সাইড

CSS এর ক্ষেত্রে ভিন্ন ভিন্ন border ভিন্ন ভিন্ন পাশে ব্যাবহার করা সম্ভবঃ
উদাহরনঃ

p {
    border-top-style: dotted;
    border-right-style: solid;
    border-bottom-style: dotted;
    border-left-style: solid;
}

উপরে দেয়া উদাহরণ টি একটি একক property দিয়েও নির্ধারণ করা যায়ঃ

উদাহরনঃ

p {
    border-style: dotted solid;
}

 

border-style property এর একটি থেকে চারটি values হতে পারেঃ

  • border-style: dotted solid double dashed;
    • top border is dotted
    • right border is solid
    • bottom border is double
    • left border is dashed
  • border-style: dotted solid double;
    • top border is dotted
    • right and left borders are solid
    • bottom border is double
  • border-style: dotted solid;
    • top and bottom borders are dotted
    • right and left borders are solid
  • border-style: dotted;
    • all four borders are dotted

Border-style property উপরোক্ত উদাহরণে ব্যবহার করা হয়। যাইহোক, এটি border-width and border-color এর সাথে কাজ করতে সক্ষম।

 

Border – সংক্ষিপ্ত property

এতক্ষন আপনি উপরের উদাহরন দেখেছেন যেখানে যখন borders নির্ধারণ করতে হয় তখন অনেকগুলি properties consider করতে হয় ।

Individual border properties কে একটি property তে রুপান্তর করে code কে ছোট করা সম্ভব। একেই shorthand property বলে।

Borde property টি একটি individual border properties এর জন্য shorthand এ লিখা হয়ে থাকেঃ

  • border-width
  • border-style (required)
  • border-color

উদাহরনঃ

p {
     border: 5px solid red;
 }

 

CSS এর সকল Border Properties

প্রোপার্টি

বর্ণনা
border সকল border properties একটি declaration দ্বারা নির্ধারণ
border-bottom সকল bottom border properties একটি declaration দ্বারা নির্ধারণ
border-bottom-color bottom border এর color নির্ধারণ
border-bottom-style bottom border এর style নির্ধারণ
border-bottom-width bottom border এর width নির্ধারণ
border-color চারটি borders এর color নির্ধারণ
border-left একটি declaration দ্বারা সকল left border এর properties নির্ধারণ
border-left-color Left border এর color নির্ধারণ
border-left-style Left border এর style নির্ধারণ
border-left-width Left border এর width নির্ধারণ
border-right একটি declaration দ্বারা সকল right border এর properties নির্ধারণ
border-right-color right border এর color নির্ধারণ
border-right-style right border এর style নির্ধারণ
border-right-width right border এর width নির্ধারণ
border-style চারটি borders এর style নির্ধারণ
border-top একটি declaration দ্বারা সকল top এর properties নির্ধারণ
border-top-color top border এর color নির্ধারণ
border-top-style top border এর style নির্ধারণ
border-top-width top border এর width নির্ধারণ
border-width চারটি borders এর style নির্ধারণ

Feb 08

সি এস এস বক্স মডেল (CSS Box Model)

সব HTML উপাদানগুলোকে বক্স হিসাবে বিবেচনা করা যেতে পারে । CSS এ “ বক্স মডেল” শব্দটি ব্যবহার করা হয় যখন নকশা এবং বিন্যাস নিয়ে আলোচনা করা হয়।

সিএসএস বক্স মডেল মূলত চারপাশে HTML উপাদানে ঘেরা একটি বক্স, এবং এতে রয়েছে মার্জিন, সীমানা, প্যাডিং, এবং প্রকৃত বিষয়বস্তু।

বক্স মডেল আমাদেরকে উপাদানের কাছাকাছি একটি সীমানা, এবং উপাদানের মধ্যে স্থান নির্ধারণ করতে দেয়।
নীচের ইমেজটি বক্স মডেল প্রকাশ করেঃ

Box Model

বিভিন্ন অংশের ব্যাখ্যাঃ

  • বিষয়বস্তু – বক্সের বিষয়বস্তু, যেখানে টেক্সট এবং ইমেজ থাকে
  • প্যাডিং – বিষয়বস্তুর আশেপাশের এলাকা পরিস্কার করে। প্যাডিং সচ্ছ হয়
  • সীমানা – সীমানা হলো সেটা যেটা বিষয়বস্তু এবং প্যাডিং কে চারপাশ থেকে ঘিরে রাখে
  • মার্জিন – সীমানার চারপাশের এলাকা পরিস্কার করে। মার্জিন সচ্ছ

উদাহরণ

div {
    width: 300px;
    padding: 25px;
    border: 25px solid navy;
    margin: 25px;
}

 

উপদানের প্রস্থ এবং উচ্চতা

সব ব্রাউজারে একটি উপদানের পস্থ এবং উচ্চতা সঠিকভাবে সেট করার জন্য, কিভাবে বক্স মডেল কাজ করে সেটা জানতে হবে।

গুরুত্বপূর্ণঃ আপনি যখন CSS দিয়ে একটি উপদানের প্রস্থ এবং উচ্চতা সেট করবেন, আপনাকে শুধু বিষয়বস্তুর এলাকার প্রস্থ এবং উচ্চতা সেট করতে হবে। উপদানের সম্পূর্ণ আকার পরিমাপের জন্য, আপনাকে পাডিং, সীমানা এবং মার্জিনও যোগ করতে হবে।

মোট 350px প্রস্থের একটি <div>  উপাদানের স্টাইল করা যাকঃ

div {
    width: 320px;
    padding: 10px;
    border: 5px solid gray;
    margin: 0;
}
চলো অংকটা করা যাকঃ
320px (প্রস্থ)
+ 20px (বাম + ডান প্যাডিং)
+10px (বাম + ডান সীমানা)
+ 0px (বাম + ডান মার্জিন)
= 350px
উপাদানের মোট প্রস্থ এভাবে গননা করা উচিতঃ
মোট উপাদানের প্রস্থ = প্রস্থ + বাম প্যাডিং + ডান প্যাডিং + বাম সীমানা + ডান সীমানা + বাম মার্জিন + ডান মার্জিন
উপাদানের মোট প্রস্থ এভাবে গননা করা উচিতঃ
মোট উপাদানের উচ্চটা = উচ্চতা + শীর্ষ প্যাডিং + নীচের প্যাডিং + শীর্ষ সীমানা + নীচের সীমানা + শীর্ষ মার্জিন + নীচের মার্জিন

ব্রাউজার সামঞ্জস্যের ইস্যু

ইন্টারনেট এক্সপ্লোরার ৮ এবং তার আগের সংস্করণে প্রস্থ প্রপার্টিতে প্যাডিং এবং সীমানা যোগ করতে হয়।

এই সমস্যা দূর করার জন্য, HTML পেইজে < !DOCTYPE html> যোগ করতে হয়।

 

Feb 08

সি এস এস টেবিল (CSS Tables)

একটি HTML টেবিলকে CSS এর সাহায্যে সুন্দরভাবে উপস্থাপন করা যায়। নিম্নে একটি টেবিলের উদাহরণ দেয়া হলো:

Table

 

টেবিল বর্ডার (Borders)

CSS এ টেবিল বর্ডার যোগ করার জন্য border property ব্যবহার করতে হবে।
নিম্নে উদাহরণে <table>, <th>, এবং <td> এলিমেন্টে কালো (black) বর্ডার যোগ করা হয়েছে:

table, th, td {
   border: 1px solid black;
}

উপরোক্ত উদাহরণে টেবিলটিতে double border যুক্ত হয়েছে, কেননা টেবিল এবং <th>/<td> এলিমেন্টে উভয়ের অলাদা বর্ডার রয়েছে।

এখন, টেবিলটিতে single border দেখাতে চাইলে border-collapse property যোগ করতে হবে।

 

Collapse Borders

border-collapse property এর সাহায্যে টেবিলের বর্ডার single অথবা separated হবে তা নির্ধারণ করা হয়। নিম্নের উদাহরনে টেবিলে single বর্ডার দেখানো হয়েছে:

table {
    border-collapse: collapse;
}

table, th, td {
    border: 1px solid black;
}

 

টেবিলের Table Width এবং Height

width এবং height properties এর সাহায্যে টেবিলের Width ও Height নির্দিষ্ট করা যায়।
নিম্নের উদাহরণে টেবিলের Width 100% এবং <th> এলিমেন্টের Height 50px নির্দিষ্ট করা হয়েছে:

table {
    width: 100%;
}

th {
    height: 50px;
}

 

Horizontal Text Alignment

text-align property এর সাহায্যে Text এর Alignment left, right বা center নির্দিষ্ট করা যায়।

সাধারণত, <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে center Align, <td> এলিমেন্টের ক্ষেত্রে Text এর Alignment থাকে left Align.

নিম্নের উদাহরণে <th> এলিমেন্টের ক্ষেত্রে Text এর Alignment, left এ নির্দিষ্ট করা হয়েছে:

th {
    text-align: left;
}

 

Vertical Text Alignment

vertical-align property এর সাহায্যে টেবিলে সেলের vertical alignment নির্ধারণ করা হয়।

এক্ষেত্রে সেলের Text Alignment top, bottom অথবা middle নির্ধারণ করা হয়। (<th> এবং <td> উভয় এলিমেন্ট এর জন্য)

নিম্নের উদাহরণে <td> এলিমেন্টের এর জন্য Text এর vertical Alignment, bottom এ নির্দিষ্ট করা হয়েছে:

td {
    height: 50px;
    vertical-align: bottom;
}

 

টেবিল Padding

টেবিল বর্ডার এবং content এর মাঝখানের space নির্ধারণ করার জন্য <td> and <th> এলিমেন্টে padding property ব্যবহার করা হয়।

td {
    padding: 15px;
}

 

টেবিল Color

নিচের উদাহরণে টেবিলের বর্ডার Color যোগ করার জন্য “border:” property ব্যবহার করা হয়েছে।

<th> এলিমেন্টে background color যোগ করার জন্য “background-color:” property ব্যবহার করা হয়।

table, td, th {
    border: 1px solid green;
}

th {
    background-color: green;
    color: white;
}