WEB DESIGN - CSS PART 02

 

CSS Tables

1. Table Borders
2. border-collapse
3. Table Width and Height
4. Horizontal Alignment -> text-align
5. vertical-align
6. Table Padding
7. Horizontal Dividers -> border-bottom
8. Hoverable Table
9. Table Color

CSS Pseudo-classes

A pseudo-class is used to define a special state of an element

selector:pseudo-class {
  property: value;
}

CSS Pseudo-elements

A CSS pseudo-element is used to style specified parts of an element.

CSS Borders

HTML Element গুলোর বর্ডারের স্টাইল, কালার এবং প্রস্থ পরিবর্তন করার জন্য CSS border প্রোপার্টি গুলো ব্যবহৃত হয়।

•       border-color

•       border-gradient

•       border-image

•       border-radius

•       border-style

•       border-width

•       diffant-border

Border Property

•       border

•       border-width

•       border-style

•       border-color

•       border-top

•       border-top-width

•       border-top-style

•       border-top-color

•       border-right

•       border-right-width

•       border-right-style

•       border-right-color

•       border-left

•       border-left-width

•       border-left-style

•       border-left-color

•       border-bottom

•       border-bottom-width

•       border-bottom-style

•       border-bottom-color

•       border-radius

•       border-image

•       border-image-source

•       border-image-slice

•       border-image-width

•       border-image-outset

•       border-image-repeat

CSS Margins

একটি HTML Element এর বর্ডার এর বাহিরে কি পরিমান ফাকা জায়গা থাকবে তা সেট করার জন্য CSS Margin ব্যবাহৃত হয়। আরো সহজভাবে বলা যায় HTML Element এর চারপাশে স্পেস রাখার জন্য CSS Margin Property ব্যবহার করা হয়।

•       margin-top

•       margin-right

•       margin-bottom

•       margin-left

এই Margin Property গুলো নিচের ভ্যালুসমূহ গ্রহণ করতে পারেঃ

•       auto – ব্রাউজার নিজ থেকে মার্জিন নিয়ে নেয়।

•       length – px, pt, cm, ইত্যাদি একক ব্যবহার করে মার্জিন সেট করা হয়

•       % – সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।

•       inherit – প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।

CSS Padding

HTML Element এর বর্ডারের ভিতরে এবং কন্টেন্টের(content) চারপাশে ফাঁকা স্থান তৈরি করার পদ্দ্বতিকে CSS Padding বলা হয়।

•       padding-একটি ডিক্লেয়ারেশনের মাধ্যমে সবগুলো প্যাডিং প্রোপার্টি সেট করার জন্য একটি শর্টহ্যান্ড   প্রোপার্টি।

•       padding-top-এলিমেন্টের উপরের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

•       padding-right– এলিমেন্টের ডানের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

•       padding-bottom-এলিমেন্টের নিচের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

•       padding-left-এলিমেন্টের বামের প্যাডিং সেট করার জন্য ব্যবহৃত হয়।

•       auto– ব্রাউজার নিজ থেকে Padding নিয়ে নেয়।

•       length- px, pt, cm, ইত্যাদি একক ব্যবহার করে Padding সেট করা হয়

•       % – সংশ্লিষ্ট এলিমেন্টের প্রস্থ(width) অনুযায়ী মার্জিন সেট করা হয়।

•       inherit– প্যারেন্ট(parent) ট্যাগ এর সাপেক্ষে উত্তরাধিকার সূ্ত্রে মার্জিন নিয়ে নেয়।