সিএসএস আইডি বনাম ক্লাস (CSS ID Vs Class)
এটা প্রায়ই সন্দেহের সৃষ্টি করে যে কখন আমরা সিএসএস ID ব্যবহার
করব আর কখন আমরা সিএসএস Classes ব্যবহার করব।এই অধ্যায়ে এ বিষয়ে পরিস্কার আলোচনা করা হবে।
আইডি নির্বাচক (id Selector)
একটা এইচটিএমএল এলিমেন্ট এর স্টাইল কেমন হবে এটা ঠিক করার
জন্য সিএসএস আপনাকে নিজস্ব সিলেক্টর ব্যাবহারের সুবিধা দেয় এদেরকে বলে "id" এবং
"selector"
ID সিলেক্টর
একটা (অনন্য) এলিমেন্টের স্টাইল দিতে ব্যাবহৃত হয়। id হল এলিমেন্ট এর unique
identifier ।সিএসএস
ID প্রায়ই সিএসএস classes
কাছাকাছি।কিন্তূ তারা এলিমেন্ট এর special case নির্দেশ
করে ।w3bay.com
p#exampleID1 { background-color: orange; }
p#exampleID2 { text-transform: uppercase; }
<p id="ExampleID1">This paragraph has an
ID name of
"exampleID1" and has a orange CSS defined
background</p>
<p id="ExampleID2">This paragraph has an
ID name ofw3bay.com
"exampleID2" and has had its text transformed
to uppercase letters. </p>
**id নাম
সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা মজিলা ফায়ারফক্সে কাজ করবেনা।
ক্লাস নির্বাচক (class Selector)
একদল এলিমেন্টের স্টাইল দেয়ার জন্য class selector ব্যাবহৃত হয়।class selector এইচটিএমএল এর class
attribute ব্যাবহার করে এবং
এটা "." দিয়ে লেখা (সংঙ্গায়িত) হয়।নিচের উদাহরনে যেসব এইচটিএমএল এলিমেন্টs এ class="center" এটা থাকবে তাদের সকলের Align
মাঝখানে হয়ে যাবে।
.center {text-align:center;}
আপনি ইচ্ছে করলে এইচটিএমএল এর যেকোন একটা এলিমেন্ট ঠিক করে
দিতে পারেন যেটা একটা class দ্বারা প্রভাবিত হবে।যেম:
p.center {text-align:center;}
**class নাম
সংখ্যা দিয়ে শুরু করবেন না তাহলে এটা ইন্টারনেট এক্সপ্লোরার এ কাজ করবেনা।
ID = একজনের Identification
(ID) একজন ব্যক্তির জন্য unique ।
Class = অনেক
জনগণ একটি class এ
পড়ে ।
সিএসএস ক্লাস টিউটোরিয়াল (CSS Class)
সিএসএস এর মাধ্যমে এইচটিএমএল এলিমেন্ট এর অসংখ্য স্টাইল
দেয়া যায়। একটা উদাহরন দিয়ে বিষয়টি পরিস্কার করা যাক । ধরুন আপনি কখনও চাচ্ছেন
আপনার লেখাটির ফন্ট বড় এবং সাদা হোক।
আবার চাচ্ছেন ছোট এবং কাল হোক। আপনি ভাগ্যবান এই অর্থে যে সিএসএস classes
ব্যবহার করার
মাধ্যমে আপনি আপনার ইচ্ছা পুরন করতে পারেন।
Class ব্যবহার করা খুব সাধারন। সাধারন সিএসএস কোড এর
অংশকে বর্ধিত (extension) করতে হবে। আর এই বর্ধিত অংশকে অবশ্যই এইচটিএমএল ট্যাগ এ Class এর
মান হিসাবে বসাতে হবে। নিচে উদাহরন দেয়া হলো:w3bay.com
p.first{ color: blue; }
p.second{ color: red; }
<html>
<body>
<p>This is a normal paragraph.</p>
<p class="first">This is a paragraph that
uses the p.first CSS code!</p>
<p class="second">This is a paragraph
that uses the p.second CSS code!</p>
আপ নি যেকোন এইচটিএমএল এলিমেন্ট এর সাথে সিএসএস class ব্যবহার করতে পারেন।ধরুন আপনি <p> ট্যাগ
ব্যবহার করে স্টাইল দিয়েছেন এবং সিএসএস class
ব্যবহার করে অন্য একটি স্টাইল নিদিষ্ট করে দিয়েছেনে ফলে
আগের default
স্টাইল টি আর নিদিষ্ট লেখার ঊপর কাজ করবে না।
p{ color: red; font-size: 20px; }
p.test1{ color: blue; }
p.test2{ font-size: 12px; }
<body>
<p>This is a normal paragraph.</p>
<p class="test1">This is a paragraph that
uses the p.test1 CSS code!</p>
<p class="test2">This is a paragraph that
uses the p.test2 CSS code!</p>
সিএসএস ব্যাকগ্রাউন্ড টিউটোরিয়াল (CSS Background)
আপনার সাইটের background
অনেক বেশি গুরুত্ত্বপুর্ন তাই এই টিউটোরিয়াল টি আপনাদের
মনোযোগ সহকারে দেখা উচিত। আপনি যদি professional
website তৈরী করতে চান
তাহলে light background এর মধ্যে dark টেক্স
ব্যবহার করা উচিত। আর যদি শুধু শখের জন্য তৈরী করতে চান তাহলে যেকোন কালারের
সমন্নয় গ্রহনযোগ্য।w3bay.com
সিএসএস এর মাধ্যমে আপনি যেকোন সিএসএস এলিমেন্ট এর background color or image
সেট করতে পারেন।
তাছাড়া background image কিভাবে
প্রর্দশিত হবে সে বিষয়টি আপনি নিয়ন্ত্রন করতে পারবেন। আপনি পছন্দমত এটিকে horizontally, vertically repeat করতে পারেন।তাছাড়া আপনি
background কে
fixed position এ রাখতে পারেন বা scroll করতে পারেন।
নিচে সিএসএস background
এর ঊদাহরন দেয়া হলো।
p {
background-color: #1078E1; }
ul { background-color: rgb( 149, 206, 145); }w3bay.com
সিএসএস Background
Image:
gradient background এর মত image কে left-to-right করা
যায়। অথবা যখন ইউজার স্ক্রল করবে তখন আপনি image
কে fixed অবস্থায়
রাখতে পারেন ।w3bay.com
p { background-image: url(smallPic.jpg); }w3bay.com
h4{ background-image: url(http://www.ypdesign.tk/pics/cssT/example.jpg);
}
This <p> has a background image using a local path
to the picture.
This <h4> has a background image using the complete
url path.
p { background-image: url(smallPic.jpg);
background-repeat: repeat; }
h4 {background-image: url(smallPic.jpg); background-repeat:
repeat-y;}
ol { background-image: url(smallPic.jpg);
background-repeat: repeat-x;}
ul {background-image: url(smallPic.jpg); background-repeat:
no-repeat;}
সিএসএস Background
Image এর অবস্থান:
আপনি যদি নির্দিষ্ট করতে চান যে এইচটিএমএল এলিমেন্ট এর
মধ্যে কোথায় image টি প্রদর্শিত হবে তাহলে সেটা CSS's background-position এর মাধ্যমে করা যায়।নিচে তিন (length, percentages, keywords) প্রকারের নির্দিষ্ট করার ঊপায় দেখানো হলো।w3bay.com
p {background-image: url(smallPic.jpg);
background-position: 20px 10px;}
h4 {background-image: url(smallPic.jpg); background-position:
30% 30%;}
যদি gradient
background তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।
যদি gradient
background তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।
সিএসএস Gradient
Background:
যদি gradient
background তৈরী করতে চান তাহলে আপনাকে প্রথমে কাজটি ফটোশপে করতে হবে।
ঊপরের image টি খুব সাধারন । আমরা এটাকে horizontal ভাবে রেখেছি । এই image টি
1 pixel এর।
repeat attribute এর মাধ্যমে এর value repeat-x সেট
করেছি যার ফলে image টি
নির্দিষ্ট এর বাম হতে ডান দিকে বিস্তৃতি লাভ করবে। নিচে উদাহরনে paragraph এলিমেন্ট
এ gradient background যোগ হয়েছে
সিএসএস ফন্ট (CSS Font)
টেক্স কিভাবে প্রদর্শিত হবে তার নিয়ন্ত্রন ভার সিএসএস
আপনাকে দিয়েছে। আপনি টেক্সের size, color,
style ইত্যাদি পরিবর্তন করতে পারেন।
আপনি জেনেছেন কিভাবে টেক্স bold বা
underline করতে
হয় কিন্তু আপনি কি জানেন percentage ব্যবহার
কিভাবে ফন্ট resize করা
যায়। এই বিষয়ে আলোচনা নিচে করা হয়েছে ।w3bay.com
সিএসএস ফন্ট রং: যদিও টেক্সের কালারকে সিএসএস ফন্ট অংশ মনে
হয় কিন্তু প্রকৃতপক্ষে এটা স্বাধীন
সিএসএস attribute। নিচে ফন্ট এর কালার পরিবর্তনের উদাহরন দেয়া হলো।
h5 { color: #9000A1; }
h6 { color: rgb(0, 220, 98); }
This is a red h4 header.
This is a hexadecimal #9000A1 h5 header.
This is an rgb(0, 220, 98) h6 header.
উপরের উদাহরনে কালার নির্দেশ করতে আমরা কালারের তিন
প্রকারের ফরমেট ব্যবহার করেছি।
সিএসএস ফন্ট Family:
ফন্ট family দুইটি group এ বিভক্ত যেমন: serif
and sans-serif । গবেষনায় দেখা গিয়েছে serif fonts হতে sans-serif
fonts যা computer
monitor এ খুব সহজে পড়া
যায় ।
h4 { font-family: sans-serif; }
h6 { font-family: arial; }
This is a header with sans-serif font
This is a header with a serif font
সিএসএস ফন্ট আকার:
আপনি values,
percentages বা key terms ব্যবহার
করে ফন্ট আকার ঠিক করতে পারেন। যখন আপনি default
ফন্ট পরিবর্তন করতে চাবেন তখন Percentages ব্যবহার
করা ভাল কিন্তু static value সেট করা উচিত নয়।
p { font-size: 120%; }
ol{ font-size: 10px; }
ul{ font-size: x-large; }
ফন্ট-weight এর অন্যান্য key
terms গুলো হল: bold, bolder, and normal.
সিএসএস ফন্ট Variant:
সিএসএস ফন্ট Variant
এর সাহায্যে আপনি ফন্ট কে
small caps এ
পরিবর্তিত করতে পারেন। Note: কিন্তু সকল ফন্ট, সিএসএস
ফন্ট Variant কে
সাপোর্ট করে না তাই প্রকাশ করা আগে নিশ্চিত হয়ে নেয়া উচিত।w3bay.com
p { font-variant: small-caps; }
সিএসএস টেক্সক্ট টিউটোরিয়াল (CSS Text)
সিএসএস টেক্সট এর মাধ্যমে আপনি টেক্সট এর spacing,
decoration, এবং alignment নিয়ন্ত্রন করতে পারেন।w3bay.com
টেক্সট Decoration:
টেক্সট Decoration এর মাধ্যমে আমরা লিংক এর underline দুর করতে পারি। তাছাড়া line-through,
overline এবং
underline ইত্যাদি টেক্সট এ ব্যব্হার করতে পারি।
h4{ text-decoration: line-through; }
h5{ text-decoration: overline; }
h6{ text-decoration: underline; }
a { text-decoration: none; }
সিএসএস text-indent কে আমরা এইচটিএমএল (<pre>) ট্যাগ
পরিবর্তে ব্যবহার করতে পারি। values
or percentages ব্যবহার করে আমরা text-indent নির্দিষ্ট করি।text
indent মানে লেখাটি বাম
দিকে থেকে কতটুকু ছাড় দিয়ে শুরু হবে।
h5 { text-indent: 30%; }
টেক্সট Align:
সাধারনত website এ default হিসাবে
টেক্সট Align: left নিবার্চিত
থাকে। টেক্সট Align attribute এর সাহায্যেw3bay.com
টেক্সট এর বিভিন্ন Alignment দেয়া
যায়।
p { text-align: right; }
h5{ text-align: justify; }
টেক্সট Transform এর মাধ্যমে টেক্সট এর দ্রুত capitalize করা যায়।
p { text-transform: capitalize; }
h5{ text-transform: uppercase; }
h6{ text-transform: lowercase; }
white-space attribute এর মাধ্যমে লেখাটি এক লাইনে চলতে থাকবে যতক্ষন না আপনি break <br />
p { white-space: nowrap; }
</br> ট্যাগ
দিলে তারপর থেকে নিচে লাইন যাবে।
সিএসএস Word Spacing
attribute এর মাধ্যমে পাশাপাশি
শব্দগলোর মধ্যে gap এর পরিমান নির্ধারন করে দেয়া যায়।w3bay.com
p { word-spacing: 10px; }
সিএসএস Letter Spacing:
সিএসএস letter-spacing
attribute এর মাধ্যমে শব্দের
মধ্যে বর্ণ গুলোর মধ্যে gap এর পরিমান নির্ধারন করে
p { letter-spacing: 3px; }
সিএসএস প্যাডিং টিউটোরিয়াল (CSS Padding)
সিএসএস প্যাডিং ব্যবহার করে আপনি এইচটিএমএল এলিমেন্ট (paragraphs, tables ইত্যাদি ) এর default প্যাডিং পরিবর্তন করতে পারেন। আর প্যাডিং বলতে বোঝায় এলিমেন্ট এর border
এবং তার content এর
মধ্যের অংশকে।w3bay.com
p {padding: 15px; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
1 Value বিশিষ্ট
প্যাডিং সকল (top, right, bottom, left.) পাশে uniform
padding তৈরী করে।
p {padding: 2%; border: 1px solid black; }
h5{padding: 0px; border: 1px solid red;}
সিএসএস প্যাডিং: padding-(direction):w3bay.com
প্রত্যেক এইচটিএমএল
এলিমেন্ট এর প্রকৃতপক্ষে চারটি ভিন্ন প্যাডিং থাকে যেমন top, right, bottom, এবং left । প্যাডিং direction
attribute এর মাধ্যমে পৃথক
পৃথক প্যাডিং নির্দেশ করা যায়। এক direction
(যেমন -left) এ
নির্দেশ করলে অন্যগুলো অপরিবর্তিত থাকে।
p {padding-left: 5px; border: 1px solid black; }
h5{padding-top: 0px; padding-right: 2px; padding-bottom:
13px; padding-left: 21px; border: 1px solid red;}
সিএসএস প্যাডিং: 2 & 4 Values
যখন আমরা দুইটি প্যাডিং Value ব্যবহার করবো তখন
প্রথম Value টি
top এবং
bottom প্যাডিং
Value নির্দেশ
করবে এবং দ্বিতীয় Value টি left
and right প্যাডিং Value নির্দেশ
করবে। মনে রাখতে হবে সাধারনত প্যাডিং Value
টি top দিয়ে
শুরু হয় এবং clockwise ভাবে এটি left এ
শেষ হয়। প্যাডিং Value এর
ধারাবাহিকতা হল top, right, bottom এবং left ।
p {padding: 5px 15px; border: 1px solid black;}
h5{padding: 0px 5px 10px 3px; border: 1px solid red;}
সিএসএস Margins প্রায়
সিএসএস প্যাডিং attribute এর মত। শুধু একটা গুরুত্বপূর্ন পাথর্ক্য হচ্ছে:Margin বলতে
এইচটিএমএল এলিমেন্ট এর border এর চারপাশের অংশকে
বোঝায় আর প্যাডিং বলতে border এর
ভিতরের অংশকে বোঝায়। প্যাডিং এর মত Margin
এর Value সেট করা যায়।
p {margin: 5px; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
সিএসএস Margin: 1 Value
এটা সিএসএস প্যাডিং: 1
Value এর মত
p {margin: 2%; border: 1px solid black; }
h5{margin: 0px; border: 1px solid red;}
সিএসএস Margin: margin-(direction):
এটা সিএসএস প্যাডিং: padding-(direction)
এর মত ।
p {margin-left: 5px; border: 1px solid black; }
h5{margin-top: 0px; margin-right: 2px; margin-bottom:
13px; margin-left: 21px; border: 1px solid red; }w3bay.com
সিএসএস Margin: 4 Values
এটা সিএসএস প্যাডিং: 2
& 4 Values এর মত ।
p {margin: 5px 15px; border: 1px solid black;}
h5{margin: 0px 5px 10px 3px; border: 1px solid red;}
সিএসএস বর্ডার টিউটোরিয়াল (CSS Border)
এইচটিএমএল এলিমেন্টs এর চারপাশে যে বর্ডার দেখা যায় তা সিএসএস বর্ডার এর
মাধ্যমে সম্পুর্নভাবে customize করা যায়। সিএসএস বর্ডার এর মাধ্যমে বর্ডার এর স্টাইল
পরিবর্তন করা যায়।
বর্ডার Style Types: অসংখ্য প্রকারের বর্ডার Style রয়েছে যা আপনি
আপনার পছন্দমত বিভিন্ন ধরনের বর্ডার তৈরী করতে পারেন।w3bay.com
এই টিউটোরিয়ালে সিএসএস ক্লাস ব্যবহার করেছি,ক্লাস সমন্ধে
জনা না থাকলে আগে আমাদের সিএসএস ক্লাস টিউটোরিয়ালটি পরে আসুন।
p.double {border-style: double; }
p.groove {border-style: groove; }
p.dotted {border-style: dotted; }
p.dashed {border-style: dashed; }
p.outset {border-style: outset; }
p.ridge {border-style: ridge; }
p.hidden {border-style: hidden; }
বর্ডার-width
attribute এর সাহায্যে বর্ডার
এর পুরুত্ব পরিবর্তন করা যায়। বিভিন্ন key
terms বা ভেলু দিয়ে বর্ডার-width নির্দিষ্ট
করা যায়। বিভিন্ন term ব্যবহার করা যেতে পারে যেমন thin, medium, thick ইত্যাদি।w3bay.com
table { border-width: 7px; border-style: outset; }
td { border-width: medium; border-style: outset; }
p { border-width: thick; border-style: solid; }
border-color attribute এর মাধ্যমে আপনি পছন্দমত color combination করে বর্ডারকে
দৃষ্টি নন্দন করে তুলতে পারেন।w3bay.com
table { border-color: rgb( 100, 100, 255); border-style:
dashed; }
td { border-color:
#FFBD32; border-style: ridge; }
p { border-color:
blue; border-style: solid; }
সিএসএস লিস্ট টিউটোরিয়াল (CSS List)
লিস্টs মুলত
দুই প্রকার যথা: unordered এবং ordered
।সিএসএস দিয়ে
লিস্ট কে এইচটিএমএল হতে অনেক বেশি customize
করা যায়। এমনকি image কে
bullet points হিসাবে
unordered লিস্ট
এর জন্য ব্যবহার করা যায়।w3bay.com
সিএসএস লিস্ট Style Type:
আপনি যদি default number
এর ordered লিস্ট বা unordered লিস্ট এর bullets/discs হতে
ভিন্ন স্টাইল ব্যবহার করতে চান তাহলে আপনি
লিস্ট এর জন্য বিভিন্ন ধরনের স্টাইল
ব্যবহার করতে পারেন। নিচে বিভিন্ন স্টাইল
দেয়া হলো:w3bay.com
১. Unordered list
styles: square, circle, disc (default), এবং none ।
২. Ordered list styles: upper-alpha, lower-alpha,
upper-roman, lower-roman, decimal (default), এবং none ।w3bay.com
ol { list-style-type: upper-roman; }
সিএসএস লিস্ট ইমেজের সাথে:
আমরা আগেই বলেছি normal bullet এর
পরিবর্তে image কে ব্যবহার করা যায়।
ul { list-style-image: url("listArrow.gif"); }
ol { list-style-image: url("listArrow2.gif"); }
সবচেয়ে ভাল হয় Unordered
লিস্ট এর
ক্ষেত্রে image কে ব্যবহার করা।
list-style-position এর ভেলু inside দিলে
তখন লিস্টগুলো মার্জিন হতে ভিতরের দিকে থাকবে আর Outside দিলে normal লিস্ট
Position এ
থাকবে। Outside ভেলুটি
একটি default setting ।
ul { list-style-position: inside; }
ol { list-style-position: outside; }
এই list-style-type এর মাধ্যমে এমন একটা ব্যবস্থা করা যায় যখন আপনার list-style image লোড নিবে না তখন অন্য list-style দেখাবে।w3bay.com
ul { list-style: upper-roman inside
url("http://www.example.com/notHere.gif");}
