ধাপ
৫

CSS Property-র সাথে পরিচিতি

CSS এর বিভিন্ন Property-র বর্ণনা এবং ব্যবহার নিচে বর্ণনা করা হয়েছে।

Backgrounds

Background প্রোপার্টি সমূহ এলিমেন্টের ব্যাকগ্রাউন্ডের বিভিন্ন রূপ দিতে ব্যবহৃত হয়ে থাকে। Background গ্রুপের প্রোপার্টি সমূহ এবং তাদের সম্ভাব্য ভ্যালুর উদাহরন দেয়া হলঃ

background-color:
- রঙের নামঃ red, green, orange, yellowgreen, black, gray, pink ইত্যাদি।
- RGB মানঃ rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) ইত্যাদি।
- HEX মানঃ #0000ff, #00ff00, #ff0000 ইত্যাদি।
background-image: url("imagename.jpg") ইত্যাদি।
background-repeat: repeat, repeat-x, repeat-y, no-repeat ইত্যাদি।
background-attachment: scroll, fixed, local ইত্যাদি।
background-position: left top, right top, 10% 15%, 5px 10px ইত্যাদি।

সব গুলো প্রোপার্টিকে একত্রে এক লাইনে এভাবেও লিখা যায়ঃ

p {
	background: #ffffff url("img_bg.png") no-repeat right top;
}

এভাবে লিখার সময় উপরের যে ধাপের পর যে ধাপ দেয়া হয়েছে তার ভিত্তিতে মান গুলো লিখতে হবে। কোনো মান না দিলেও সমস্যা নেই। তবে ধাপ ক্রম গুলো উপরের নিয়ম মেনেই দিতে হবে।

সব ধরনের রং সম্পর্কিত প্রোপার্টিতে নিচের যে কোনো একটি নিয়মে রং নির্দিষ্ট করে দেয়া যায়ঃ

রঙের নামঃ red, green, orange, yellowgreen, black, gray, pink ইত্যাদি।
HEX মানঃ #0000ff, #00ff00, #ff0000 ইত্যাদি।
RGB রংঃ rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255) ইত্যাদি।
RGB রং সাথে Opacity বৈশিষ্ট্যঃ rgba(255,0,0, .25), rgba(255, 0, 0, .5), rgba(255, 0, 0, 1) ইত্যাদি।
HSL রংঃ hsl(120,100%,50%), hsl(120,100%,75%), hsl(120,100%,25%) ইত্যাদি।
HSL রং সাথে Opacity বৈশিষ্ট্যঃ hsla(0,100%,50%,0.3), hsla(0,100%,75%,0.5), hsla(0,100%,25%,0.5) ইত্যাদি।

text

Text বা লেখা সম্পর্কিত প্রোপার্টি গুলো হলঃ

colors
direction
letter-spacing
line-height
text-align
text-decoration
text-indent
text-shadow
text-transform
vertical-align
white-space
word-spacing

Fonts

Font সম্পর্কিত প্রোপার্টি গুলো হলঃ

font
font-family
font-size
font-style
font-variant
font-weight

Lists

List সম্পর্কিত প্রোপার্টি গুলো হলঃ

list-style
list-style-image
list-style-position
list-style-type

Tables

Table এর জন্য আলাদা কোনো প্রোপার্টি নেই। এতে text, font ইত্যাদি সম্পর্কিত প্রোপার্টি গুলো ব্যবহার করা হয়।

CSS Dimension

CSS এর dimension (মাত্রা) প্রোপার্টি গুলো দিয়ে যে কোনো এলিমেন্টের দৈর্ঘ্য-প্রস্থ নির্দিষ্ট করে দেয়া যায়। মাত্রা প্রোপার্টি গুলো হলঃ

height
max-height
min-height
width
max-width
min-width

CSS Box Model

CSS এ Box Model টার্মটি পেজ ডিজাইন এবং লেআউট নিয়া আলোচনার সময় ব্যবহার করা হয়।

সব HTML এলিমেন্টকে এক একটি বক্স ধরা হয়। সে অনুযায়ী প্রতিটি বক্সের ৩টি প্রোপার্টি থাকে, যথাঃ Margin, Bordar এবং Padding।

বক্স মডেলকে নিচের মত কল্পনা করা যায়ঃ

কোনটা কিঃ

Content - এটি হল বক্স/এলিমেন্টের কন্টেন্ট। যেখানে থাকতে পারে লেখা (text) অথাবা ছবি (image)।
Padding - এটি হল content এর চারদিকে একটি শূন্য যায়গা। এটি মূলত কন্টেন্ট থেকে border এর দূরত্ব নির্দেশ করে।
Border - বুঝতেই পারছেন এটি content/element টির border (কিনারা) নির্দেশ করছে।
Margin - এটি হলো border এর বাইরের চারদিকে কতটুকু স্থান শূন্য থাকবে তা নির্দেশ করে।

যখন একটি এলিমেন্ট এর height বা width প্রোপার্টি নির্দিষ্ট করে দেয়ার মাধ্যমে শুধু এলিমেন্টের কন্টেন্টের দৈর্ঘ্য বা প্রস্থই নির্দিষ্ট করে দেয়া হয়, সম্পূর্ণ এলিমেন্টের আকার পরিমাপ করতে হলে আপনাকে height এবং weight এর সাথে padding, border এবং margin এর পরিমাপও হিসাব করতে হবে।

উদাহরন হিসেবে নিচের প্রোপার্টি যুক্ত এলিমেন্টের জন্য 300px প্রস্থ (width) বরাদ্দ করতে হবে, যদিও এর width নির্ধারণ করা হয়েছে 250px।

p {
    width: 250px;
    padding: 10px;
    border: 5px solid gray;
    margin: 10px;
}

হিসাবটি হবে এরকমঃ
250px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 20px (left + right margin)
= 300px

তো আমরা বলতে পারিঃ

এলিমেন্ট মোট দৈঘ্য = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin

এলিমেন্টের মোট প্রস্থ = width + left padding + right padding + left border + right border + left margin + right margin

CSS Outline

Outline প্রোপার্ট এলিমেন্টের border এর চারদিকে একটি লাইন তৈরি করে। তবে এ লাইনটি box model এর প্রোপার্টিসমূহ থেকে আলাদা। এটি এলিমেন্টের আকারে কোনো প্রভাব ফেলেনা। Outline প্রোপার্টিকে নিচেরমত কল্পনা করা যায়ঃ

outline সম্পর্কিত প্রোপার্টি সমূহ হলঃ

outline
outline-color
outline-style
outline-width

CSS Display

Display প্রোপার্টি একটি এলিমেন্ট কিভাবে দেখানো হবে তা নির্দিষ্ট করে দেয়া।

এলিমেন্ট দুই ভাবে থাকতে পারেঃ

Block
Inline

Block - এধরনের এলিমেন্ট সম্পূর্ণ প্রস্থ (width) দখল করে থাকে এবং এলিমেন্টের আগে ও পরে line break (নতুন লাইন তৈরি করা) দেয়। এরকম কিছু এলিমেন্ট হলঃ

<h1>
<p>
<li>
<div>

ইত্যাদি।

Inline - এ ধরনের এলিমেন্ট শুধু সম্পূর্ণ প্রস্থ দখল করে, কোনো line break দেয় না। এরকম কিছু এলিমেন্ট হলঃ

<span>
<a>

ইত্যাদি।

কোনো block এলিমেন্টকে inline এবং inline এলিমেন্টকে block বৈশিষ্ট্য দেয়ার জন্য display প্রোপার্টি ব্যবহার করা হয়।

উদাহরণঃ

নিচের উদাহরণে block এলিমেন্ট <li> কে inline এলিমেন্ট করা হয়েছে।

li {
	display: inline;
}

নিচের উদাহরণে inline এলিমেন্ট <span> কে block এলিমেন্ট করা হয়েছে।

span {
	display: block;
}p

Display প্রোপার্টি দিয়ে কোনো এলিমেন্টকে লুকানোও যায়। নিচের এরকম একটি উদাহরণ দেয়া হলঃ

h1.hidden {
	display: none;
}

CSS Visibility

Visibility প্রোপার্টি দিয়ে কোনো এলিমেন্টকে লুকানো যায়। নিচে এরকম একট উদাহরণ দেয়া হলঃ

h1.hidden {
	visibility: hidden;
}

কোনো এলিমেন্টকে লুকানোর জন্য display এবং visibility দুই প্রোপার্টি রয়েছে দেখলাম। তবে দুটির ভিতর পার্থক্যও আছে।

display প্রোপার্টি দিয়ে কোনো এলিমেন্টকে লুকানো হলে তা কোনো স্থান দখল করেনা, অপরদিকে visibility প্রোপার্টি দিয়ে এলিমেন্টকে লুকানো হলে এলিমেন্ট দেখা না গেলেও ঠিকই স্থান দখল করা থাকে।

CSS Positioning

Positioning (অবস্থান নির্ধারন) বলতে কোন এলিমেন্ট কোথায় থাকবে এবং কার উপর কে থাকবে -এ জাতীয় বিষয় গুলো নির্দিষ্ট করে, এরকম প্রোপার্টি সমূহকে বুঝায়। একটি এলিমেন্টের অবস্থান প্রধানত চার রকম হতে পারেঃ

Static Positioning
Fixed Positioning
Relative Positioning
Absolute Positioning

Overlapping Elements

একাধিক এলিমেন্টের অবস্থান একই স্থানে হলে তাদের ভিতর কোন এলিমেন্টটির উপর কোন এলিমেন্ট থাকবে তা নিধারনের জন্য z-index প্রোপার্টি ব্যবহার করা হয়।

CSS Floating

Float অর্থ ভেসে থাকা, CSS এ float প্রোপার্টি দ্বারা কোনো এলিমেন্টকে বামে বা ডানে যে এক দিকে সরিয়ে রাখা যায়।

CSS Align

CSS এ align বলতে কোনো একটি এলিমেন্টকে অনুভূমিক (horizontal) বা খাড়া (vertical) অবস্থান কিভাবে থাকবে তা নির্দিষ্ট করা বুঝায়।

text-align প্রোপার্টি ব্যবহার করে যে কোনো block এলিমেন্টকে horizontal অবস্থায় কিভাবে থাকবে তা নির্দিষ্ট করে দেয়া যায়।

তবে একই কাজ margin প্রোপার্টি, position প্রোপার্টি এবং float প্রোপার্টি ব্যবহার করেও করা যায়। অবস্থা অনুযায়ী যেকোনো পদ্ধতি ব্যবহার করা হয়।