CSS=Cascading Style Sheets
এইচটিএমল ডকুমেন্টের যেকোন এলিমেন্টকে বিভিন্ন ভঙ্গিতে/স্টাইলিং বা একটা রুপ দিতে সিএসএস ব্যবহার হয়।
ধরে নেয়া যাক একটা প্যারাগ্রাফ (<p></p>) বা হেডিং (<h1></h1>) বা যেকোন এলিমেন্ট কে রং করতে চান, ফন্ট বড়/ছোট করতে হবে, অবস্থান এক দিক থেকে অন্যদিকে নিতে হবে, ব্যাকগ্রাউন্ড রং বদলাতে হবে এরুপ শত ধরনের স্টাইল পরিবর্তন সিএসএস দিয়ে করা হয়। বিশেষ করে লেআউট তৈরীর জন্য সিএসএস সবচেয়ে বেশি জরুরি। সিএসএস রুল ৩ ভাবে লেখা যায়। ইনলাইন,ইন্টারনাল ও এক্সটার্নাল সিএসএস।
>>ইনলাইন সিএসএস/Inline CSS
এইচটিএমএল এলিমেন্টে style এট্রিবিউট দিয়ে সিএসএস রুল লেখা যায় এটাই ইনলাইন সিএসএস। মুলত সবসময় এক্সটার্নাল সিএসএস ই্ ব্যবহার করা উচিৎ।
যেহেতু এলিমেন্টের ভিতরেই সিএসএস লেখা হয় তাই ইনলাইন সিএসএস এর জন্য সিলেক্টর প্রয়োজন হয়না। যেমন
<h2 style="background-color: #f00; color: #fff;">A new background and
font color with inline CSS</h2>
এখানে একটা পার্থক্য হচ্ছে কোন সিলেক্টর দিতে হয়না আর curly braces (দ্বিতীয় বন্ধনী) ও নেই।
** সেমিকোলন (;) দিয়ে প্রতিটি লাইন আলাদা রাখতে হবে যেমন আমি দুটি লাইন আলাদা করেছি। এভাবে যত ইচ্ছা প্রোপার্টি লিখতে পারেন।
=================================================================
>>ইন্টারনাল সিএসএস
যেকোন এইচটিএমএল ডকুমেন্টে <head></head> এর ভিতর style ট্যাগ ব্যবহার করে ইন্টারনাল সিএসএস লেখা হয়। যেমন
<html>
<head>
<style>
h1{
color: #f00;
background: yellow;
text-align: center;
}
</style>
</head>
<body>
<h1>JKL demo heading</h1>
<p>demo content goes here.</p>
</body></html>
এখানে ৩ থেকে ৯ নম্বর লাইন পর্যন্ত ইন্টারনাল সিএসএস লেখা হয়েছে। এভাবেই সিএসএস লেখা হয় অর্থ্যাৎ প্রথমে সিলেক্টর (৪ নম্বর লাইনে h1) এরপর দ্বিতীয় বন্ধনীর (curly braces ) মধ্যে একটা একটা করে প্রেপার্টি এবং তার মান দেয়া হয়। যেমন ৫ নম্বর লাইনে color একটা প্রেপার্টি এবং এর মান দিয়েছি #f00 (এটা একটা কালার কোড যেটা লাল রং প্রদর্শন করায়) এভাবে বাকিগুলিও একইরকম।
=================================================================
>>এক্সটার্নাল সিএসএস
সব সিএসএস রুলকে একসাথে করে একটা ফাইলে রেখে সেটা .css এক্সটেনশন নাম দিয়ে (যেমন style.css) সেভ করে HTML ফাইলে সংযুক্ত করে দিলেই হয়ে যায়। এটার নামই হচ্ছে এক্সটার্নাল সিএসএস। এইচটিএমএল এ link নামে একটা ট্যাগ আছে এটা দিয়েই সংযোগ দেয়া যায়। যেমনঃ
<html><head>
<link href="/style.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<h1>JKL demo heading</h1>
<p>demo content goes here.</p>
</body></html>
এখানে link ট্যাগ দিয়ে কিভাবে style.css ফাইলটি যোগ করেছি। href হচ্ছে এট্রিবিউট, এখানে ফাইলটির উৎস বা কোথায় আছে সেটা দেখিয়ে দিতে হয়। rel এট্রিবিউটট দিয়ে এইচটিএমএল ডকুমেন্ট টি এবং সিএসএস ফাইল এর মধ্যে সম্পর্ক টা কি (stylesheet) সেটা ব্রাউজারকে বুঝানো হয়, এটা দিতে হবে। আর type এট্রিবিউট এর মান text/css দিয়ে বুঝানো হচ্ছে এটা একটা CSS ফাইল।
এখন উপরের কোডটুকু index.html নামে সেভ করুন। এবং নিচের কোডটুকু লিখে style.css নামে সেভ করুন
h1{color: #f00;background: yellow;text-align: center;}এবার index.html রান করিয়ে দেখুন সব সিএসএস গুলি সেখানে প্রভাব ফেলেছে।
=================================================================
>>সিলেক্টর (Selector)
সিএসএস সিলেক্টর কে সিএসএস এর হৃদপিন্ড বলা হয়। বিভিন্ন ধরনের সিলেক্টর আছে,এসব দিয়ে এইচটিএমএল পেজের এলিমেন্ট সিলেক্ট করা যায় এবং সিলেক্ট করার পর নিজের ইচ্ছেমত স্টাইলিং করা যায়।সিএসএস সিলেক্টর এর ব্যাপারে খুব গভীর এবং স্বচ্ছ ধারনা থাকতে হবে।সিলেক্টর নিয়ে কাজ করার আগে কিছু টার্ম জানতে হবে যেমন:রুল সেট বা রুল : রুল (css rule) সবসময় শুনে থাকবেন। নিচের ছবিতে Selector আর declaration block টি মিলে একটা রুল। অর্থ্যাৎ কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট করে সেটার জন্য যেসব সিএসএস লেখা হয় তা হচ্ছে একটা রুল।
বাকি যেগুলি জানতে হবে তা নিচের ছবিতে পরিষ্কার দেখিয়ে দেয়া হয়েছে। কোনটা Selector, কোনটা property (প্রোপার্টি), কোনটা value (মান) ইত্যাদি খুব ভাল করে দেখে নিন। পুরো সিএসএস টিউটোরিয়াল জুড়ে শুধু মুলত ৩টি জিনিসের আলোচনা হবে
সিলেক্টর : কোন একটা এইচটিএমএল এলিমেন্টকে সিলেক্ট বা টার্গেট করে সেটার জন্য সিএসএস রুল লেখা হয়। এলিমেন্টে id, class এট্রিবিউটের যে মান দেয়া থাকে সেটা দিয়েই সিলেক্ট/টার্গেট করা যায়। আরও বিস্তারিত নিচের লাইনগুলিতে...
প্রেপার্টি : সিএসএস এ শত শত প্রোপার্টি আছে। এক একটি দিয়ে এক এক কাজ হয় যেমন "background-color" প্রোপার্টি দিয়ে কোন এলিমেন্টের ব্যাকগ্রাউন্ডে রং দেয়া যায়। "font-family" দিয়ে এলিমেন্ট টির ফন্ট কি হবে সেটা ঠিক করা যায় ইত্যাদি।
মান (value) : প্রত্যেকটি প্রোপার্টির নির্দিষ্ট মান আছে। এই প্রোপার্টি এবং প্রোপার্টিগুলির মান কি কি হবে সেগুলি যত বেশি মুখস্থ থাকবে তত ভাল কাজ করতে পারবেন। তবে কাজ করে করে প্রফেশনাল হয়ে গেলে শত শত প্রোপার্টি এবং এদের মানগুলি মুখস্থই থাকে।
h4
{
background-color:white;
font-size:12px;
}
p
{
color:red;
}
এখানে h4, p এসব হচ্ছে সিলেক্টর,h4 এর দ্বারা এইচটিএমএল পেজের <h4></h4> এর ভিতরে যা আছে তা সিলেক্ট করবে বা বলা যায় h4 এলিমেন্ট সিলেক্ট করবে।
সিডো ক্লাস (pseudo class)
a:link{color:blue;} a:visited { color: blue; } a:hover{color:red;} a:active { color: red; }
:link, :visited, :hover, :active এসব হচ্ছে সিডো ক্লাস।ধরুন উপরের এইচটিএমএল ফাইলটির জন্য যদি এই রুলটি প্রয়োগ করেন তাহলে সব লিংক এবং ভিজিটেড লিংক এর রং হবে নীল।আর হোভার এবং সক্রিয় লিংক এর রং হবে লাল।সিএসএস কোডটি ইচ্ছে করলে এভাবে লিখতে পারতেন।
a:link, a:visited { color: blue; }
a:hover, a:active { color: red; }
গ্রুপিং সিলেক্টর ঃ
যদি একাধিক এলিমেন্টের একই স্টাইল করতে চান তখন গ্রুপিং সিলেক্টর ব্যবহার করবেন।ধরুন আপনি চাচ্ছেন আপনার পেজের সব হেডিং এবং লিংক এর রং একই হবে তখন নিচের মত করে লিখতে পারেন।
h1,h2,h3,h4,a{
color:red;
}
ধরুন আপনার পেজের একটা ডিভের (div)এর আইডি হচ্ছে menu (id="menu") আার এই ডিভের ভিতরে সব লিংক এবং হেডিং এর রং লাল করতে চাচ্ছেন তখন এভাবে
#menu a, #menu h1,#menu h2, #menu h3{
color:red;
}
=================================================================
>>সিএসএস ক্লাস
এইচটিএমএল একটা এট্রিবিউট। প্রায় সব এইচটিএমএল এলিমেন্টে এটা ব্যবহার করা যায়।ধ্রা যাক একটা এইচটিএমএল ডকুমেন্টে ১০ টা হেডিং আছে ২টি h1, ৩টি h3, h2 ... এরকম আরও। এখন যে সবগুলি h1 এর রং লাল এবং সবগুলি h3 এর রং বেগুনি হবে। এই জন্যই সিএসএস ক্লাস।
যেহেতু h1 দুটির রং দিব লাল তাই এইদুটি হেডিং এর আমি একই ক্লাস দেব এভাবে h3 ৩টিরও একই ক্লাস দেব। এরপর সেই ক্লাস ধরে স্টাইলিং করবো।
<html><head>
<style>
.demo_head{
color:#f00;
}
.tutorial{
color:#c8a2c8;
}
</style>
</head>
<body>
<h1 class="demo_head">JKL demo heading1</h1>
<h1 class="demo_head">JKL demo heading2</h1>
<p id="demo_para">demo content goes here.</p>
<h3 class="tutorial">JKL HTML Tutorial</h3>
<h3 class="tutorial">JKL CSS Tutorial</h3>
<h3 class="tutorial">JKL JQuery Tutorial</h3>
</body>
</html>
=================================================================
কয়েকটি বাদে প্রায় প্রত্যেকটি এইচটিএমএল এলিমেন্টে id এট্রিবিউট ব্যবহার করা যায়। id এট্রিবিউটের মান ইচ্ছেমত দিতে পারেন। সহজ কথায় id এর মান হচ্ছে এলিমেন্ট টির একটা নাম। এই নাম ধরে সিএসএস এ এলিমেন্ট টিকে সিলেক্ট করা হয় এবং স্টাইলিং করা হয়। যেমন
<html>
<head>
<style>
#demo_head{
color:#f00;
text-transform : uppercase;
}
#demo_para{
text-align:center;
color:maroon;
}
</style>
</head>
<body>
<h1 id="demo_head">Webcoachbd demo heading</h1>
<p id="demo_para">demo content goes here.</p>
</body>
</html> text-transform প্রোপার্টি টির ৫টি মান হেতে পারে।
uppercase দিলে ঐ এলিমেন্টের ভিতরে থাকা সব লেখা বড় হাতে অক্ষরে দেখাবে। যেমন আমি দিয়েছি।
none দিলে যেমন এইচটিএমএল এ আছে সেরকমই দেখাবে। এটা বা্ই ডিফল্ট থাকে।
inherit দিলে প্যারেন্ট এলিমেন্টে যদি text-transform থাকে সেটার টাই প্রয়োগ হবে যদি প্যারেন্টে এই প্রোপার্টিজ না থাকে তাহলে ডিফল্ট টা পাবে মানে none.
lowercase দিলে সব লেখা ছোট হাতে অক্ষরে গয়ে যাবে।
capitalize দিলে প্রথম অক্ষরটি বড় হাতের দেখাবে (সব শব্দের জন্য)
<html>
<head>
<style>
#demo_head{
color:#f00;
text-transform : uppercase;
}
#demo_para{
text-align:center;
color:maroon;
}
</style>
</head>
<body>
<h1 id="demo_head">Webcoachbd demo heading</h1>
<p id="demo_para">demo content goes here.</p>
</body>
</html> text-transform প্রোপার্টি টির ৫টি মান হেতে পারে।
uppercase দিলে ঐ এলিমেন্টের ভিতরে থাকা সব লেখা বড় হাতে অক্ষরে দেখাবে। যেমন আমি দিয়েছি।
none দিলে যেমন এইচটিএমএল এ আছে সেরকমই দেখাবে। এটা বা্ই ডিফল্ট থাকে।
inherit দিলে প্যারেন্ট এলিমেন্টে যদি text-transform থাকে সেটার টাই প্রয়োগ হবে যদি প্যারেন্টে এই প্রোপার্টিজ না থাকে তাহলে ডিফল্ট টা পাবে মানে none.
lowercase দিলে সব লেখা ছোট হাতে অক্ষরে গয়ে যাবে।
capitalize দিলে প্রথম অক্ষরটি বড় হাতের দেখাবে (সব শব্দের জন্য)
** id সিলেক্ট করতে হ্যাশ (#) চিহ্ন ব্যবহার করতে হয়। যেমন আমি করেছি। দেখুন যে এলিমেন্টের আইডিতে সিএসএস লিখেছি শুধু সেটাতেই প্রভাব পরেছে। এভাবে পুরো এইচটিএমএল ডকুমেন্টে আপনি যত ইচ্ছা আইডি ব্যবহার করতে পারেন এবং প্রত্যেকটি আইডি ধরে ধরে ঐ এলিমেন্টের জন্য আলাদা আলাদা স্টাইল করতে পারেন।
** id ইউনিক রাখতে হবে মানে কখনই দুটি এলিমেন্টের আইডি একই দিবেন না। যদি ১০০০ এলিমেন্টের আইডি দেন তাহলে প্রতিটির নাম ভিন্ন হতে হবে। যেকোন নাম রাখা যাবে তবে আইডর নাম প্রাসঙ্গিক রাখা ভাল যেমন উপরের উদাহরনে আমি দিয়েছি।
কখন id ব্যবহার করবেন
=======================
ধরুন আপনার সাইটের body এলিমেন্টের ভিতর ১০ টি এইচটিএমএল এলিমেন্ট আছে এবং প্রত্যেকটির স্টাইল আলাদা দিতে চান, কারো সাথে কারো মিল হবেনা। তখনি প্রতিটি এলিমেন্টে আইডি দিতে হবে। আর যখন একাধিক এলিমেন্টে কমন স্টাইল লাগবে তখন ক্লাস।
=================================================================
>>সিএসএস ব্যাকগ্রাউন্ড
সিএসএস ব্যাক্রগ্রাউন্ড একটি গুরত্বপূর্ন বিষয়। এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড পরিবর্তনের জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমনঃ-
ব্যাকগ্রাউন্ড রং
background-color নামে একটা প্রোপার্টিজ আছে এটার মান যেকোন রং দিতে পারেন। হেক্সাডেসিমাল (যেমন #fff000, #000000 ইত্যাদি), RGB (যেমন rgb(192,192,192), rgb(255,255,0) ইত্যাদি) কিংবা রংয়ের নাম (যেমন maroon, black, red ইত্যাদি) যেকোনটি দিলেই কাজ হবে। কোন মান না দিলে বাই ডিফল্ট "transparent" নেয়।
ব্যাকগ্রাউন্ড ছবি
background-image নামে একটা প্রোপার্টিজ আছে এটা দিয়ে এলিমেন্টের পেছনে যেকোন ছবি দেয়া যায়। এর মান দিতে হয় এভাবে
background-image : url(path/to/image);
ব্যাকগ্রাউন্ড পূনরাবৃত্তি
background-repeat প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ডে থাকা ছবি (যদি background-image থাকে) কিভাবে বা কোনদিকে পূনরাবৃত্তি (repeat) হবে সেটা ঠিক করে দেয়া যায়। যেমনঃ-
background-repeat: repeat;
"repeat" দিলে X এবং Y উভয় অক্ষ বরাবর ছবিটির পূনরাবৃত্তি হবে, বাই ডিফল্ট এটাই থাকে। এছাড়া এর আরও ৩ টি মান দেয়া যায়:
"no-repeat" দিলে কোন পূনরাবৃত্তি হবেনা।
"repeat-x" দিলে শুধু X অক্ষ বরাবর রিপিট হবে
"repeat-y" দিলে Y অক্ষ বরাবর রিপিট হবে।
ব্যাকগ্রাউন্ডের অবস্থান
background-position প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির অবস্থান ইচ্ছে মত অবস্থানে আনা যায়। বাই ডিফল্ট এর মান থাকে 0% 0%
এর সম্ভাব্য মান হতে পারে
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:x% y%;
background-position:Xpx Ypx;
background-position:inherit;
background-attachment নামে আরেকটা প্রোপার্টি আছে এটার মান হতে পারে "scroll" (এটা বাই ডিফল্ট থাকে) আর "fixed"। scroll থাকলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ডও স্ক্রল করবে (যদি কনটেন্ট, ব্রাউজার উইন্ডোর চেয়ে লম্বা হয়) এবং fixed দিলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ড সরবেনা।
সবগুলি দিয়ে একটা উদাহরন
#header{
background-color: #5d8e50;
background-image:url(/images/stories/pos_back.jpg);
background-repeat: no-repeat;
background-position: center right;
সবগুলি প্রোপার্টিজের একসাথে ব্যবহার
===========================
background প্রোপার্টি দিয়ে উপরের সবগুলি একসাথে ব্যবহার করা যায়। মানগুলি একটা একটা করে স্পেস দিয়ে দিতে হয়।
যেমন ১ নম্বরে দিতে হয় background-color এর মান এরপর background-image এরপর background-repeat এরপর background-position সবশেষে background-attachment.
#header{
background: #5d8e50 url(/images/stories/pos_back.jpg) no-repeat center right scroll;
** প্রতিটি মানের মাধে অবশ্যই একটা স্পেস দিতে হবে।
background-size নামে প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির সাইজ পরিবর্তন করা যায়। X এবং Y অক্ষ বরাবর ছবির সাইজ কেমন হবে সেটা % অথবা px/em দিয়ে ঠিককরা যায়। যেমনঃ
background-size: 40% 80%;
or
background-size: 200px 100px;
শুধূমাত্র auto মান দিতে পারেন তাহলে পুরো ছবিটি দেখাবে।
এছাড়া আরো দুটি মান দেয়া যায়।
"contain" এবং "cover"
contain দিলে পুরো ছবিটির সর্বোচ্চ দৈর্ঘ্য প্রস্থ (ছবির আনুপাতিক হার ঠিক রাখে) নিয়ে দেখাবে।
আর cover দিলে পুরো ছবিটির সর্বোচ্চ দৈর্ঘ্য প্রস্থ (ছবির আনুপাতিক হার ঠিক রাখে) নিয়ে দেখাবে এবং পুরো এলিমেন্টটি যতদুর জায়গা জুড়ে আছে সেই পর্যন্ত ছড়িয়ে যাবে।
উপরের উদাহরনটিতে cover, contain দিয়ে দেখুন।
background-origin নামে আরেকটা নতুন প্রোপার্টি এসেছে সিএসএস ৩ এ। এর মান মান হতে পারে
"padding-box" দিলে ব্যাকগ্রাউন্ড ছবিটি এলিমেন্টের প্যাডিং (padding থাকলে) অংশেও দেখাবে।
"content-box" দিলে শুধু কনটেন্টে (অর্থ্যাৎ এলিমেন্টে) এর ব্যাকগ্রাউন্ড হিসেবে দেখাবে।
আর "border-box" দিবেন যখন বর্ডার থাকবে এবং আপনি চান ব্যাকগ্রাউন্ড ছবি বর্ডারের নিচে সহ দেখাবে।
গ্রাডিয়েন্ট ব্যাকগ্রাউন্ড
সিএসএস ৩ দিয়ে গ্রাডিয়েন্ট ব্যাকগ্রাউন্ড তৈরী করা যায়, এটা করতে আগে ফটোশপে গ্রাডিয়েন্ড ছবি বানিয়ে সেটা ব্যাক্গ্রাউন্ড ছবি দিয়ে কাজ চালানো হত। যেমন আমাদের সাইটের উপরে ডানদিকের স্লোগান, সার্চ বাটন ইত্যাদিতে নিচের ব্যাকগ্রাউন্ড গ্রাডিয়েন্ট দেয়া হয়েছে।
#logo{
/* mozila firefox 3.6 +*/
background:-moz-linear-gradient(center top , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56;
/* Safari 5.1, Chrome 10+ */
background:-webkit-linear-gradient(top, #76BF6B, #3B8230);
}
প্রথম লাইনটি মজিলাতে কাজ করে আর পরেরটি গুগল ক্রোমে। যেদুটি রংয়ের গ্রাডিয়েন্ট দিবেন সেদুটি -moz-linear-gradient বা -webkit-linear-gradient ভিতরে দিয়ে দিবেন যেমন আমি দিয়েছি।
** এখানে যে গ্রাডিয়েন্ট দিলাম এটা হচ্ছে লিনিয়ার মানে সোজা ব্যকগ্রাউন্ড।
radial background
================
#logo{
/* mozila firefox 3.6 +*/
background : radial-gradient(circle , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56;
/* Safari 5.1, Chrome 10+ */ background:-webkit-radial-gradient(circle, #76BF6B, #3B8230);
}
** id ইউনিক রাখতে হবে মানে কখনই দুটি এলিমেন্টের আইডি একই দিবেন না। যদি ১০০০ এলিমেন্টের আইডি দেন তাহলে প্রতিটির নাম ভিন্ন হতে হবে। যেকোন নাম রাখা যাবে তবে আইডর নাম প্রাসঙ্গিক রাখা ভাল যেমন উপরের উদাহরনে আমি দিয়েছি।
কখন id ব্যবহার করবেন
=======================
ধরুন আপনার সাইটের body এলিমেন্টের ভিতর ১০ টি এইচটিএমএল এলিমেন্ট আছে এবং প্রত্যেকটির স্টাইল আলাদা দিতে চান, কারো সাথে কারো মিল হবেনা। তখনি প্রতিটি এলিমেন্টে আইডি দিতে হবে। আর যখন একাধিক এলিমেন্টে কমন স্টাইল লাগবে তখন ক্লাস।
=================================================================
>>সিএসএস ব্যাকগ্রাউন্ড
সিএসএস ব্যাক্রগ্রাউন্ড একটি গুরত্বপূর্ন বিষয়। এইচটিএমএল এলিমেন্টের ব্যাকগ্রাউন্ড পরিবর্তনের জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমনঃ-
ব্যাকগ্রাউন্ড রং
background-color নামে একটা প্রোপার্টিজ আছে এটার মান যেকোন রং দিতে পারেন। হেক্সাডেসিমাল (যেমন #fff000, #000000 ইত্যাদি), RGB (যেমন rgb(192,192,192), rgb(255,255,0) ইত্যাদি) কিংবা রংয়ের নাম (যেমন maroon, black, red ইত্যাদি) যেকোনটি দিলেই কাজ হবে। কোন মান না দিলে বাই ডিফল্ট "transparent" নেয়।
ব্যাকগ্রাউন্ড ছবি
background-image নামে একটা প্রোপার্টিজ আছে এটা দিয়ে এলিমেন্টের পেছনে যেকোন ছবি দেয়া যায়। এর মান দিতে হয় এভাবে
background-image : url(path/to/image);
ব্যাকগ্রাউন্ড পূনরাবৃত্তি
background-repeat প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ডে থাকা ছবি (যদি background-image থাকে) কিভাবে বা কোনদিকে পূনরাবৃত্তি (repeat) হবে সেটা ঠিক করে দেয়া যায়। যেমনঃ-
background-repeat: repeat;
"repeat" দিলে X এবং Y উভয় অক্ষ বরাবর ছবিটির পূনরাবৃত্তি হবে, বাই ডিফল্ট এটাই থাকে। এছাড়া এর আরও ৩ টি মান দেয়া যায়:
"no-repeat" দিলে কোন পূনরাবৃত্তি হবেনা।
"repeat-x" দিলে শুধু X অক্ষ বরাবর রিপিট হবে
"repeat-y" দিলে Y অক্ষ বরাবর রিপিট হবে।
ব্যাকগ্রাউন্ডের অবস্থান
background-position প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির অবস্থান ইচ্ছে মত অবস্থানে আনা যায়। বাই ডিফল্ট এর মান থাকে 0% 0%
এর সম্ভাব্য মান হতে পারে
background-position:left top;
background-position:left center;
background-position:left bottom;
background-position:center top;
background-position:center center;
background-position:center bottom;
background-position:right top;
background-position:right center;
background-position:right bottom;
background-position:x% y%;
background-position:Xpx Ypx;
background-position:inherit;
background-attachment নামে আরেকটা প্রোপার্টি আছে এটার মান হতে পারে "scroll" (এটা বাই ডিফল্ট থাকে) আর "fixed"। scroll থাকলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ডও স্ক্রল করবে (যদি কনটেন্ট, ব্রাউজার উইন্ডোর চেয়ে লম্বা হয়) এবং fixed দিলে মাউস স্ক্রলিং এর সাথে সাথে ব্যাকগ্রাউন্ড সরবেনা।
সবগুলি দিয়ে একটা উদাহরন
#header{
background-color: #5d8e50;
background-image:url(/images/stories/pos_back.jpg);
background-repeat: no-repeat;
background-position: center right;
সবগুলি প্রোপার্টিজের একসাথে ব্যবহার
===========================
background প্রোপার্টি দিয়ে উপরের সবগুলি একসাথে ব্যবহার করা যায়। মানগুলি একটা একটা করে স্পেস দিয়ে দিতে হয়।
যেমন ১ নম্বরে দিতে হয় background-color এর মান এরপর background-image এরপর background-repeat এরপর background-position সবশেষে background-attachment.
#header{
background: #5d8e50 url(/images/stories/pos_back.jpg) no-repeat center right scroll;
** প্রতিটি মানের মাধে অবশ্যই একটা স্পেস দিতে হবে।
background-size নামে প্রোপার্টি দিয়ে ব্যাকগ্রাউন্ড ছবির সাইজ পরিবর্তন করা যায়। X এবং Y অক্ষ বরাবর ছবির সাইজ কেমন হবে সেটা % অথবা px/em দিয়ে ঠিককরা যায়। যেমনঃ
background-size: 40% 80%;
or
background-size: 200px 100px;
শুধূমাত্র auto মান দিতে পারেন তাহলে পুরো ছবিটি দেখাবে।
এছাড়া আরো দুটি মান দেয়া যায়।
"contain" এবং "cover"
contain দিলে পুরো ছবিটির সর্বোচ্চ দৈর্ঘ্য প্রস্থ (ছবির আনুপাতিক হার ঠিক রাখে) নিয়ে দেখাবে।
আর cover দিলে পুরো ছবিটির সর্বোচ্চ দৈর্ঘ্য প্রস্থ (ছবির আনুপাতিক হার ঠিক রাখে) নিয়ে দেখাবে এবং পুরো এলিমেন্টটি যতদুর জায়গা জুড়ে আছে সেই পর্যন্ত ছড়িয়ে যাবে।
উপরের উদাহরনটিতে cover, contain দিয়ে দেখুন।
background-origin নামে আরেকটা নতুন প্রোপার্টি এসেছে সিএসএস ৩ এ। এর মান মান হতে পারে
"padding-box" দিলে ব্যাকগ্রাউন্ড ছবিটি এলিমেন্টের প্যাডিং (padding থাকলে) অংশেও দেখাবে।
"content-box" দিলে শুধু কনটেন্টে (অর্থ্যাৎ এলিমেন্টে) এর ব্যাকগ্রাউন্ড হিসেবে দেখাবে।
আর "border-box" দিবেন যখন বর্ডার থাকবে এবং আপনি চান ব্যাকগ্রাউন্ড ছবি বর্ডারের নিচে সহ দেখাবে।
গ্রাডিয়েন্ট ব্যাকগ্রাউন্ড
সিএসএস ৩ দিয়ে গ্রাডিয়েন্ট ব্যাকগ্রাউন্ড তৈরী করা যায়, এটা করতে আগে ফটোশপে গ্রাডিয়েন্ড ছবি বানিয়ে সেটা ব্যাক্গ্রাউন্ড ছবি দিয়ে কাজ চালানো হত। যেমন আমাদের সাইটের উপরে ডানদিকের স্লোগান, সার্চ বাটন ইত্যাদিতে নিচের ব্যাকগ্রাউন্ড গ্রাডিয়েন্ট দেয়া হয়েছে।
#logo{
/* mozila firefox 3.6 +*/
background:-moz-linear-gradient(center top , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56;
/* Safari 5.1, Chrome 10+ */
background:-webkit-linear-gradient(top, #76BF6B, #3B8230);
}
প্রথম লাইনটি মজিলাতে কাজ করে আর পরেরটি গুগল ক্রোমে। যেদুটি রংয়ের গ্রাডিয়েন্ট দিবেন সেদুটি -moz-linear-gradient বা -webkit-linear-gradient ভিতরে দিয়ে দিবেন যেমন আমি দিয়েছি।
** এখানে যে গ্রাডিয়েন্ট দিলাম এটা হচ্ছে লিনিয়ার মানে সোজা ব্যকগ্রাউন্ড।
radial background
================
#logo{
/* mozila firefox 3.6 +*/
background : radial-gradient(circle , #76BF6B, #3B8230) repeat scroll 0 0 #62AF56;
/* Safari 5.1, Chrome 10+ */ background:-webkit-radial-gradient(circle, #76BF6B, #3B8230);
}
=================================================================
>>সিএসএস ফন্ট
font-family প্রোপার্টিজ দিয়ে এলিমেন্টের ফন্ট কি হবে সেটা ঠিক করা যায়। একসাথে একাধিক ফন্ট কমা (,) দিয়ে দেয়া যায়। এক্ষেত্রে ব্রাউজার আগে প্রথমটি খুজবে যদি সিস্টেমে না পায় (অর্থ্যাৎ আপনার পিসিতে ফন্টটি ইনস্টল না থাকে) তখন পরেরটি দেখবে এভাবে..। যদি একটি না পায় তখন প্রথম ফন্টটি যে পরিবারের সদস্য সেই পরিবারের একটা ফন্ট প্রয়োগ করবে।font-family: Verdana, SolaimanLipi;
font-size দিয়ে ঠিক করা যায় এলিমেন্টের ভিতরের টেক্সট এর সাইজ বা আকার কত বড় হবে। px বা em ইউনিট দিয়ে যেকোন মান দিতে পারেন যেমন
font-size:18px;
or
font-size: 2em;
** কত em এ কত পিক্সেল এগুলি গুগলে সার্চ দিলে হাজারটা সমাধান পাবেন।
font-weight দিয়ে ফন্টটি দেখতে কত গাঢ় হবে সেটা ঠিক করা যায়। এর মান হতে পারে "normal", "bold", "bolder", "lighter", "inherit" এবং 100, 200, 300 ...900 পর্যন্ত। বেশিরভাগ সময়ে লেখা একটু বোল্ড করতে bold মানটি ব্যবহৃত হয়। মানগুলি দেখেই বোঝা যায় কোনটা দিলে টেক্সট দেখতে কেমন হবে অথবা আমাদের অনলাইন এডিটরে মানগুলি চালিয়ে দেখতে পারেন।
font-weight: bold;
font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়।
font-style:italic;
font-style : oblique;
font-style : normal;
font-style: inherit;
font-variant দিয়ে small-caps নামের ইফেক্ট টি টেক্সট এ দেয়া যায় ফলে প্রথম অক্ষরটি একটু বড় করে দেখা এছাড়া normal এবং inherit মানও দেয়া যায়। normal দিলে যেমন লেখা আছে তেমনি দেখাবে আর inherit দিলে প্যারেন্ট এলিমেন্টের টা নিবে।
font-variant: small-caps;
** যদি এমন ফন্ট ব্যবহার করেন যেটার নামে স্পেস আছে তাহলে সেটা কোটেশন এর ভিতর রাখতে হবে যেমন
font-family : "Times New Roman";
যদি এমন ফন্ট ব্যবহার করতে চান যেটা সিস্টেম ফন্ট নয় অর্থ্যাৎ সাধারনত ইউজারের পিসিতে ইনস্টল থাকেনা
এই সমস্যার জন্য সিএসএস ৩ এ font-face নামে একটা নতুন প্রোপার্টি এসেছে। এটা দিয়ে যেকোন ফন্টেই আপনার টেক্সট দেখাতে পারেন। সাধারনত সাইটের স্লোগান, নাম, টাইটেল ইত্যাদিতে এমন ফন্ট ব্যবহার করতে হয় যেগুলি ইউজারের পিসিতে থাকেনা। আগে কুফন নামে একটা স্ক্রিপ্ট ব্যবহার করে এসব করা হত তবে এটা গুনগত মান পর্যাপ্ত নয় এছাড়া ছবিও ব্যবহার করা হত যেটাও সঠিক সমাধান ছিলনা।
প্রথমে আপনাকে ফন্ট টি যোগাড় করতে হবে যেটা দিতে চান। এরপর ফন্টটির দুটি ভার্সন বানিয়ে নিতে হবে। embedded open type(.eot) এবং true type font (.ttf)
অনলাইনে প্রচুর সাইট আছে যেখানে এক ভার্সন থেকে অন্য ভার্সনে বিনামুল্যে বদলে দেয়। এটা করতে হবে কেননা IE (ইন্টারনেট এক্সপ্লোরার) এ শুধু eot সাপোর্ট করে আর বাকিসব গুলিতে ttf চলে।
** সাবার প্রথমেই font-face ব্যবহার করা প্রয়োজন। অর্থ্যাৎ স্টাইলশিটের প্রথমেই এটা দিয়ে পরে অন্যান্য কোড।
@font-face {
font-family: 'blok-italic';
src: url('/media/fonts/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('/media/fonts/Blokletters-Balpen.ttf') format('truetype');
}
h1{
font-family:blok-italic;
}
** এখানে অন্যান্য রুল লেখার চেয়ে একটু ভিন্ন হল প্রথমে @ চিহ্নটি দিতে হয়।
** eot ফরমেটের টি আগে ব্যবহার করতে হবে নাহলে IE তে কাজ হবেনা।
font-weight: bold;
font-style সাধারনত ইটালিক করার জন্য ব্যবহৃত হয় তবে এর আরো ৩টি মান দেয়া যায়।
font-style:italic;
font-style : oblique;
font-style : normal;
font-style: inherit;
font-variant দিয়ে small-caps নামের ইফেক্ট টি টেক্সট এ দেয়া যায় ফলে প্রথম অক্ষরটি একটু বড় করে দেখা এছাড়া normal এবং inherit মানও দেয়া যায়। normal দিলে যেমন লেখা আছে তেমনি দেখাবে আর inherit দিলে প্যারেন্ট এলিমেন্টের টা নিবে।
font-variant: small-caps;
** যদি এমন ফন্ট ব্যবহার করেন যেটার নামে স্পেস আছে তাহলে সেটা কোটেশন এর ভিতর রাখতে হবে যেমন
font-family : "Times New Roman";
যদি এমন ফন্ট ব্যবহার করতে চান যেটা সিস্টেম ফন্ট নয় অর্থ্যাৎ সাধারনত ইউজারের পিসিতে ইনস্টল থাকেনা
এই সমস্যার জন্য সিএসএস ৩ এ font-face নামে একটা নতুন প্রোপার্টি এসেছে। এটা দিয়ে যেকোন ফন্টেই আপনার টেক্সট দেখাতে পারেন। সাধারনত সাইটের স্লোগান, নাম, টাইটেল ইত্যাদিতে এমন ফন্ট ব্যবহার করতে হয় যেগুলি ইউজারের পিসিতে থাকেনা। আগে কুফন নামে একটা স্ক্রিপ্ট ব্যবহার করে এসব করা হত তবে এটা গুনগত মান পর্যাপ্ত নয় এছাড়া ছবিও ব্যবহার করা হত যেটাও সঠিক সমাধান ছিলনা।
প্রথমে আপনাকে ফন্ট টি যোগাড় করতে হবে যেটা দিতে চান। এরপর ফন্টটির দুটি ভার্সন বানিয়ে নিতে হবে। embedded open type(.eot) এবং true type font (.ttf)
অনলাইনে প্রচুর সাইট আছে যেখানে এক ভার্সন থেকে অন্য ভার্সনে বিনামুল্যে বদলে দেয়। এটা করতে হবে কেননা IE (ইন্টারনেট এক্সপ্লোরার) এ শুধু eot সাপোর্ট করে আর বাকিসব গুলিতে ttf চলে।
** সাবার প্রথমেই font-face ব্যবহার করা প্রয়োজন। অর্থ্যাৎ স্টাইলশিটের প্রথমেই এটা দিয়ে পরে অন্যান্য কোড।
@font-face {
font-family: 'blok-italic';
src: url('/media/fonts/Blokletters-Balpen.eot');
src: local('Blokletters Balpen Balpen'),
local('Blokletters-Balpen'),
url('/media/fonts/Blokletters-Balpen.ttf') format('truetype');
}
h1{
font-family:blok-italic;
}
** এখানে অন্যান্য রুল লেখার চেয়ে একটু ভিন্ন হল প্রথমে @ চিহ্নটি দিতে হয়।
** eot ফরমেটের টি আগে ব্যবহার করতে হবে নাহলে IE তে কাজ হবেনা।
=================================================================
সিএসএস টেক্সক্ট টেক্সট এ শুধু ফন্ট দিয়ে সব রকম সৌন্দর্য আনা যায়না। তাই সিএসএস এ আরো বেশ কিছু প্রোপার্টিজ আছে যেগুলি দিয়ে টেক্সটকে নানানভাবে সাজানো যায়।
text-align এবং text-transform প্রোপার্টির কি কি মান হতে পারে এগুলি আগেই আলোচনা হয়েছে।
text-indent প্রোপার্টি দিয়ে একটা এলিমেন্টে যে টেক্সট আছে সেটার প্রথম লাইনকে আড়াআড়ি ভাবে সরিয়ে দেয়া যায়। পিক্সেল কিংবা শতকরা মান দিতে পারেন। যেমন
text-indent : 200px;
** মাইনাস (-) মানও দেয়া যায়। মাইনাস দিলে বাম দিকে সরতে থাকবে।
** মুলত এটার সবচেয়ে বেশি ব্যবহার হয় যখন a এলিমেন্টের ভিতরের লেখাকে সরানোর জন্য। কারন লেখা সরিয়ে সাধারনত ছবি দেয়া হয়। যেহেতু a এর start এবং end ট্যাগেরে মধ্যে কোন লেখা থাকতেই হয় তাই text-indent এর মান অনেক বেশি দিয়ে উইন্ডো থেকে লুকানোর কাজে ব্যবহৃত হয়।
line-height দিয়ে ঠিক করা যায় যে লাইনগুলির উচ্চতা কেমন হবে।
line-height: 2;
or
line-height:20px;
20px দিয়ে তো বোঝাই যাচ্ছে লাইনের উচ্চতা ২০ পিক্সেল করে হবে। line-height : 2 দিয়ে বোঝায় টেক্সটের উচ্চতার ২ গুন বেশি হবে এক একটা লাইনের উচ্চতা।
** % দিয়েও এর মান দেয়া যায়। বাই ডিফল্ট এটার মান normal থাকে।
letter-spacing দিয়ে অক্ষরের মাঝে দুরত্ব বাড়ানো যায়।
letter-spacing : 20px;
বাই ডিফল্ট এটারও মান normal থাকে।
word-spacing দিয়ে letter-spacing এর মতই কাজ হবে শুধু এটা দিয়ে শব্দের মধ্যে দুরত্ব কমানো বাড়ানো যায়।
word-spacing: 20px;
ব্যাখ্যা letter-spacing এর মত।
text-decoration একটা কাজের প্রোপার্টি, এটা দিয়ে টেক্সট এর নিচে রেখা টেনে দেয়া, মাঝ দিয়ে রেখা টানা ইত্যাদি করা হয়।
এর মান বাই ডিফল্ট none থাকে। এটা থাকলে নরমাল থাকবে।
মান underline দিলে ঐ এলিমেন্টের সব লেখার নিচে রেখা দেখাবে।
overline দিলে উপরে রেখাটি দেখাবে
line-through দিলে মাঝ দিয়ে রেখাটি চলে যাবে
text-decoration : line-through;
** এনকর ট্যাগে (<a></a>) বাই ডিফল্ট একটা রেখা থাকে। দেখবেন সব লিংকের নিচে একটা রেখা। এটা সরানোর জন্য text-decoration:none; বহুলভাবে ব্যবহৃত হয়।
white-space দিয়ে লেখা কি মুড়িয়ে নাকি হবহু যেমন ডকুমেন্টে টাইপ করা হয়েছে তেমন দেখাবে এসব ঠিক করা যায়।
white-space : nowrap;
or
white-space : pre;
বাই ডিফল্ট এটার মান normal থাকে।
nowrap থাকলে লেখা এক লাইনে দেখাবে আর pre দিলে হবহু যেমন ডকুমেন্টে লেখা হয়েছে তেমনি দেখাবে।
সিএসএস ৩ text-shadow নামে একটা নতুন প্রোপার্টি এসেছে এটা দিয়ে টেক্সট এ বিশেষ ইফেক্ট দেয়া যায়।
text-shadow: 2px 3px 3px #555;
প্রথম ৩ টি পিক্সেল মান হচ্ছে যথাক্রমে আড়াআড়িভাবে ছায়া, লম্বালম্বিভাবে ছায়া কতটুকু হবে এবং blur . সবশেষে #555 দিয়ে রং দিয়েছি আপনি ইচ্ছেমত রং দিতে পারেন।
সিএসএস ৩ আরেকটি প্রোপার্টি হল text-overflow. যখন কন্টেইনারের (যেখানে টেক্সটগুলি আছে) আয়তনের চেয়ে লেখা বেশি হয়ে যাবে। এটা তখনি কাজ করে যদি কন্টেইনারের মধ্যে overflow প্রোপার্টির মান hidden, auto বা scroll থাকে সাথে সাথে white-space এর মান nowrap থাকে।
p{
overflow:hidden;
white-space:nowrap;
text-overflow: ellipsis;
ellipsis দেয়ার কারনে অতিরিক্ত টেক্সট আর না দেখিয়ে ডট ডট (...) চিহ্ন দেখাবে। আপনি যদি ডট চিহ্ন না দেখিয়ে অন্য চিহ্ন দিতে চান তাহলে text-overflow: "--" এভাবে দিতে হবে মানে কোটেশনের ভিতর চিহ্নটি।
মান যদি clip দেন তাহলে বাকি লেখা দেখাবেনা এবং কোন ডট চিহ্নও দেখাবেনা।
এগুলিই বেশি ব্যবহৃত হয়। এগুলি ছাড়া সিএসএস ৩ আরো কিছু প্রোপার্টিজ আছে যেমন
text-wrap, word-wrap, text-emphasis, text-outline ইত্যাদি নিয়ে পরে বিস্তারিত দেয়া হবে।
=================================================================
>>সিএসএস প্যাডিং এবং মার্জিনপ্যাডিং হচ্ছে এইচটিএমএল এলিমেন্টের বর্ডার এবং কনটেন্টের মাঝখানের দুরত্ব। যেকোন একটা এইচটিএমএল এলিমেন্টে সিএসএস দিয়ে বর্ডার দিন এবার সেখানে প্যাডিং দিন তাহলে স্পষ্ট দেখতে/বুঝতে পারবেন যে প্যাডিং দিলে কোথায় ফাকা বা স্পেস বাড়ে। যেমন
border : 2px solid #fff;
padding : 5px;
padding : 5px; দেয়াতে এলিমেন্টের চারিদিকে ৫ পিক্সেল করে স্পেস হবে। শুধু একদিকে বা কয়েক দিকেও প্যাডিং দেয়া যায়। যেমন
padding-top : 5px;
padding-bottom: 5px;
padding-right: 5px;
padding-left: 5px;
এভাবে চারবার লেখার কাজ একবারে করা যায়, এটাকে শর্টহ্যান্ড প্রোপার্টি বলে যেমন।
padding : 5px;
অথবা
padding : 5px 6px 2px 4px;
এখানে ঘরির কাটার মত করে হিসেব করে বের করতে হয় যেমন উপরে ৫ পিক্সেল এরপর ডানে ৬ পিক্সেল তারপর নিচে ২ এবং সবশেষে বামে ৪ পিক্সেল।
** padding এর মান পিক্সেল (px), em বা % দিয়ে দেয়া যাবে।
width এর সাথে padding যোগ হয়:
যেমন কোন এলিমেন্টের width : 100px; আছে এবং এখানে padding : 10px; আছে, তাহলে শেষ পর্যন্ত এলিমেন্টের width হয়ে যাবে ১২০ পিক্সেল। এই সমস্যার জন্য যদি box-sizing : border-box; ব্যবহার করেন তবে আসল width ফেরত আসবে।
মার্জিন (Margin)
==============================
মার্জিন দিয়ে এলিমেন্টের বাইরে (বর্ডারের বাইরে) দুরত্ব বা স্পেস তৈরী করা যায়। মান দেয়ার নিয়ম padding এর মতই শুধু এখানে অতিরিক্ত একটা মান auto দেয়া যায়।
কোথাও মান auto দিলে ব্রাউজার হিসেব করে একটা মান নিয়ে নেয়।
** কোন এলিমেন্টকে যদি div এর মাঝে আনতে হয় তবে সেখানে দুটি প্রোপার্টিজ দিয়ে করা যায়। মার্জিন margin : 0 auto; দেন এবং width নির্দিষ্ট করে দেন। সেটার parent div এর ঠিক মাঝামাঝি চলে আসবে (আড়াঅাড়ি ভাবে)। যদি কোন div এর ভিতর না থাকে তবে ব্রাউজারের মাঝে চলে আসবে।
** প্যাডিং এর মত এখানে width যোগ হয়না।
=================================================================
>>সিএসএস বর্ডার
এইচটিএমএল এলিমেন্ট এর চারপাশে বর্ডার দেয়া যায়। border-style, border-width, border-color ইত্যাদি প্রোপার্টি দিয়ে এই বর্ডারের অনেক স্টাইল করা যায়।যেমন
p.one {
border-style: solid;
border-width: 3px;
border-color: maroon;
}
p.two {
border-style: solid;
border-width: medium;
}
p.three{
border-style: double;
}
p.four{
border-style: groove;
}
p.five{
border-style: dotted;
}
p.six{
border-style: dashed;
}
p.seven{
border-style: inset;
}
p.eight{
border-style: outset;
}
p.nine{
border-style: ridge;
}
p.ten{
border-style: hidden;
}
** border-width প্রোপার্টি টি একা থাকলে কাজ করবেনা, তার আগে border-style দিয়ে আসতে হবে।চারদিকের বর্ডারের জন্য ৪ রকম স্টাইল করা যাবে যেমন
border-left-width: 10px;
border-right-width: 10px;
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: dashed;
border-left-style: ridge;
=================================================================
>>সিএসএস লিস্ট
এইচটিএমএল এ দুই ধরনের এলিমেন্ট আছে লিস্ট তৈরীর জন্য এটা আগে আমরা জেনে এসেছি। <ul></ul> এবং <ol></ol>নেভিগেশন মেনু বা যেকোন তালিকা তৈরীর সময় এই ul, ol এবং li ব্যবহার করে থাকি। এই লিস্ট স্টাইলিং এর জন্য সিএসএস এ বেশ কয়েকটি প্রোপার্টিজ আছে। যেমন
list-style-type, list-style-position, list-style-image, list-style, marker-offset
list-style-type
যখন লিস্ট তৈরী করা হয় তখন (ul দিয়ে) বাই ডিফল্ট প্রতিটি লিস্টের সামনে একটা করে বুলেট চলে আসে যেমন
<ul>
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
<li>MySQL</li>
</ul>
৭ নম্বর লাইনের "disc" বাই ডিফল্ট থাকে। অর্থ্যাৎ list-style-type: disc; না দিলেও বুলেট দেখাবে।
এখন list-style-type দিয়ে এই বুলেটের পরিবর্তে অন্যান্য চিহ্ন আনা যায়। যেমন ul এর জন্য যেসব চিহ্ন দেয়া যায়
<style>
ul.first li {
list-style-type:none;
}
ul.second li {
list-style-type:disc;
}
ul.third li {
list-style-type:circle;
}
ul.fourth li {
list-style-type:square;
}
</style>
ol এর জন্যও বেশ কয়েকটি মান ব্যবহার করা যায় যেমন
list-style-type:decimal;
list-style-type:decimal-leading-zero;
list-style-type:lower-alpha;
list-style-type:upper-alpha;
list-style-type:lower-roman;
list-style-type:upper-roman;
উদাহরন আর দিলাম না। খুব সহজ, মান দেখেই বোঝা যাচ্ছে কোনটা দেখতে কেমন হবে। দেখতে চাইলে ol এবং li দিয়ে লিস্ট বানিয়ে স্টাইলগুলি প্রয়োগ করে দেখুন।
list-style-position
এই প্রোপার্টিজ দিয়ে চিহ্নগুলি বা থেকে একটু ভিতরে না বাহিরে তা ঠিক করা যায়। এটার বাই ডিফল্ট মান থাকে "outside", এছাড়া inside দিলে বা থেকে সরে একটু ডানে দেখাবে যেমন
ul.third li {
list-style-type:circle;
list-style-position:inside;
}
list-style-image
এটা দিয়ে চিহ্নের বদলে ছবি দেয়া যায়। যেমন
ul.third li {
list-style:url(../images/cancel_f2.png) inside ;
}
list-style : আগে list-style-type এরপর list-style-position শেষে list-style-image
এই list-style টাই বেশি ব্যবহার হতে দেখবেন। বেশিরভাগ সময় মেনু তৈরীর সময় ul এর ভিতর যখন অনেক li থাকে তখন এর বাই ডিফল্ট বুলেট সরানোর জন্য list-style:none; ব্যবহার করা হয়।
** list-style:none; এভাবে একটা মানও ব্যবহার করা যায়। একটা মান দিলে সেটা list-style-type হিসেবে নেবে।
=================================================================
>>সিএসএস লিংক
এইচটিএমএল লিংক কে সিএসএস দিয়ে চমৎকার স্টাইল করা যায়। যেমনa{
color: maroon;
text-decoration:none;
}
এখন ধরুন আপনি চান লিংকের রং মেরুন রংয়ের দেখাক কিন্তু যখন একবার ইউজার লিংটিতে ক্লিক করবে এরপর থেকে লাল দেখাবে যাতে করে ইউজার বুঝতে পারে কোন কোন লিংক সে ভিজিট করেছে। এসব করতে সিএসএস বিশেষ ক্লাস আছে নাম pseudo-class.
কয়েক ধরনের সিডো ক্লাস আছে যেমন
a{
color:maroon;
text-decoration:none;
}
a:visited{
olor:red;
}
a:hover{
color: #000;
text-decoration : underline;
}
a:focus{
color: magenta;
}
a:active{
color: yellow;
}
** সিডো ক্লাস দিয়ে স্টাইলিং করতে সিলেক্টর এরপর কোলন (:) দিয়ে বিশেষ নামটি (যেমন visited, active, hover ইত্যাদি) দিতে হয়। যেমন উপরের নামগুলি দেখুন বোঝাই যাচ্ছে কোনটার কাজ কি।
a:visited দিয়ে যে স্টাইল দিয়েছি সেটা শুধু কোন লিংক ভিজিট হলেই সেই লিংকের উপর প্রয়োগ হবে আবার a:hover এর কারনে লিংকের উপর মাউস নিয়ে গেলে রং কালো এবং লিংকের নিচে রেখা চলে আসবে।
এভাবে a:active এর কারনে লিংক একটিভ থাকলে এখানকার স্টাইলগুলি কার্যকর হবে এভাবে বাকিগুলি।
** বাই ডিফল্ট লিংকের নিচে একটা রেখা থাকে যদি উঠিয়ে দিতে চান তাহলে text-decoration : none; দিতে হয় যেমন ৩ নম্বর লাইনে দিয়েছি।
** আমি এখানে দু/একটি করে প্রোপার্টিজ দিয়ে স্টাইল করেছি আপনি সিএসএস এর যেকোন প্রোপার্টিজ ব্যবহার করে ইচ্ছেমত স্টাইল করতে পারেন এমনকি ছবিও দিতে পারেন।
=================================================================
সিএসএস কার্সর যেকোন লিংক বা লেখার উপরে মাউস নিয়ে গেলে সাধারনত হাতের চিহ্ন বা তীর চেহ্ন ইত্যাদি দেখায়। সিএসএস দিয়ে এই চিহ্ন পরিবর্তন করা যায়।cursor নামের একটি প্রোপার্টিজ আছে সেটা দিয়ে পরিবর্তন করা যায়, cursor এর অনেকগুলি মান আছে যেমন
a.one{
cursor : wait;
}
a.two{
cursor: crosshair;
}
p.three{
cursor: help;
}
a.four{
cursor: pointer;
}
p.five{
cursor: text;
}
p.six{
cursor: none;
}
p.seven{
cursor: context-menu;
}
p.eight{
cursor: cell;
}
p.nine{
cursor: vertical-text;
}
p.ten{
cursor: alias;
}
p.eleven{
cursor: n-resize;
}
p.twelve{
cursor: no-drop;
}
p.thirteen{
cursor: not-allowed;
}
p.fourteen{
cursor: all-scroll;
}
p.fifteen{
cursor: col-resize;
}
p.sixteen{
cursor: row-resize;
}
p.seventeen{
cursor: n-resize;
}
এরুপ আরো আছে
{ cursor: w-resize; }
{ cursor: ns-resize; }
{ cursor: ew-resize; }
{ cursor: ne-resize; }
{ cursor: nw-resize; }
{ cursor: se-resize; }
{ cursor: sw-resize; }
{ cursor: nesw-resize; }
{ cursor: nwse-resize; }
{cursor: url(images/my-cursor.png), auto;}
** কিছু কিছু ব্রাউজারে কিছু কিছু cursor এর মান সাপোর্ট করেনা যেমন cursor : none; ফায়ারফক্স ৩, সাফারি ৫ এবং ক্রোম ৫ এ সাপোর্টেড না। আবার ছবি অপেরাতে সাপোর্ট করেনা এবং IE + Opera তে নিম্নোক্তগুলি সাপোর্ট করেনা
view sourceprint?
{cursor: not-allowed;}
{cursor: no-drop;}
{cursor:vertical-text;}
{cursor: all-scroll;}
{cursor: col-resize;}
{cursor: row-resize;}
=================================================================
>>সিএসএস প্রোপার্টিজ
এইচটিএমএল এ তার ট্যাগ ( <b>, <body>, <a>, ইত্যাদি) গুলো হল এইচটিএমএল language এর গোসত এবং আলু। সিএসএস এ আপনারা tutorial পড়ার সময় অনেক গুলো property ( Font, Text, Box, Color ইত্যাদি) লক্ষ্য করেছেন ।নিচে আলোচনা করা হলো।সিএসএস ফন্ট প্রোপার্টিজ:
সিএসএস ফন্ট প্রোপার্টিজ এর সাহায্যে এর টেক্সট এর graphical representation কে নিয়ন্ত্রন করা যায়।
নিচে সিএসএস ফন্ট property গুলো দেয়া হলো ।
font
font-family
font-size
font-style
font-weight
font-variant
সিএসএস টেক্সট প্রোপার্টিজ:
সিএসএস টেক্সট প্রোপার্টিজ যা টেক্সট এর spacing, alignment, decoration ইত্যাদি বিষয়গুলো নিয়ন্ত্রন করে। নিচে সিএসএস টেক্সট property গুলো দেয়া হলো ।
letter-spacing
word-spacing
text-decoration
vertical-align
text-transform
text-align
text-indent
line-height
সিএসএস বক্স প্রোপার্টিজ:
সিএসএস বক্স প্রোপার্টিজ যা এইচটিএমএল এলিমেন্ট এর ভিতরে এবং চারপাশের অংশকে নির্দেশ করে।এদের মধ্যে Border, Margin এবং Padding property গুলোর আবার চারটি property রয়েছে সেগুলো হল top, right, bottom এবং left ।নিচে সিএসএস box property গুলো দেয়া হলো ।
Margin
Padding
Border
Border-width
Border-color
Border-style
Width
Height
Float
Clear
সিএসএস কালার প্রোপার্টিজ:
সিএসএস কালার property নির্দেশ করে যে, কি ধরনের কালার আমরা নির্দিষ্ট এইচটিএমএল এলিমেন্ট এর টেক্সট এর জন্য ব্যবহার করবো। নিচে সিএসএস কালার property দেয়া হলো ।
Color
সিএসএস ব্যাকগ্রাউন্ড প্রোপার্টিজ:
সিএসএস background প্রোপার্টিজ যা background এর এমন বিষয় নিয়ন্ত্রন করে ,তা হলো যদি background টি single color বা image হয়ে থাকে । যদি তা image হয়ে থাকে তাহলো আপনি image এর position ঠিক করতে পারেন । আপনি image কে repeat left-to-right অথবা top-to-bottom করতে পারেন। নিচে সিএসএস background property গুলো দেয়া হলো ।
Background
Background Color
Background Image
Background Repeat
Background Attachment
Background Position
সিএসএস Classification প্রোপার্টিজ:
Display
Whitespace
List Style
List Style Type
List Style Image
List Style Position
=================================================================
>>সিএসএস পজিশন
সিএসএস এ পজিশনিং খুব গুরত্বপূর্ন একটি বিষয়। পরিষ্কার ধারনা না থাকলে অনেক কাজে গিয়ে আটকা পরে যাবে। বিশেষ করে পেজের অপ্রত্যাশিত কোন জায়গায় কোন ছবি ইত্যাদি বসাতে হলে, একটা div বা এলিমেন্টের উপর আরেকটা div বা এলিমেন্ট নিতে হলে ইত্যাদি।৪ ধরনের পজিশন আছে
static
বাই ডিফল্ট position:static; থাকে, এটার অর্থ হচ্ছে কোন পজিশনিং করা নেই। ডকুমেন্টের কোডের কারনে এলিমেন্টটি যেখানে আঝে পেজেও সেখানে দেখাবে।
relative
এটাও static এর মতই কিন্তু এখানে top, left, bottom, right এবং z-index ব্যবহার করে এলিমেন্ট কে তার অবস্থান থেকে সরানো যাবে। relative পজিশন করলে এলিমেন্ট তার স্বীয় অবস্থান সাপেক্ষে থাকে। যেমন
div.one{
position:relative;
top:50px;
left:30px;
width:200px;
height:200px;
background: red;
}
div.two{
width:200px;
height:200px;
background: maroon;
}
div.three{
width:200px;
height:200px;
background: black;
}
দেখুন ১ নম্বর ডিভটি তার অবস্থান থেকে ৫০ পিক্সেল নিচে এবং ৩০ পিক্সেল বামে সরে এসেছে। এমনকি ২ নম্বর ডিভের উপরে চলে এসেছে। যদি চান ১ নম্বর ডিভটি নিচে দেখাক তাহলে z-index : -1; বা যেকোন মাইনাস মান দিয়ে দিন নিচে চলে যাবে।
** লক্ষনীয় বিষয় হচ্ছে বামে নিচে যাবার কারনে যে ফাকাটুকু সৃষ্টি হল সেখানে আর কাউকে ঢুকতে দেয়নি। মানে ডিভটি তার আসল স্পেসটুকু হারাবেনা বরং ধরে রাখবে।
** z-index কাজ করে তখনই যখন কোন এলিমেন্টের সিএসএস এ position করা থাকে।
absolute
position:absolute; দিলে এলিমেন্টটি তার immediate আগের প্যারেন্ট ডিভের সাপেক্ষে সরবে (top, left ইত্যাদি দিয়ে)। যদি কোন প্যারেন্ট ডিভ না থাকে তাহলে <html> তথা ব্রাউজারের সর্ববাম এবং উপর থেকে হিসেব করে সরবে। যেমন আগের উদাহরনেই position:absolute করে দেন আর প্রয়োগ দেখুন।
** এখানে এলিমেন্ট তার নিজের জন্য আর স্পেস ধরে রাখেনা
** absolute পজিশন করলে এলিমেন্ট ডকুমেন্টে স্বাভাবিক অবস্থান হারিয়ে ফেলে মানে absolute উঠিয়ে দিলে এলিমেন্ট টি যেখানে দেখাবে, absolute দিলে সেখানে আর দেখাবেনা।
fixed
কোন এলিমেন্টের পজিশন fixed দিলে সেটা ব্রাউজারের সাপেক্ষে স্থির হয়ে থাকবে এমনকি স্ক্রল করলেও ঐ এলিমেন্ট তার অবস্থান পরিবর্তন করবেনা। এটার কাজ হুবহু absolute এর মতই শুধু পার্থক্য হচ্ছে এটা সবসময় ব্রাউজারের সাপেক্ষে তার অবস্থান নেবে (top, left ইত্যাদি দিলে), absolute এর মত প্যারেন্ট এলিমেন্ট এর সাপেক্ষে সরবেনা।
p.f_text {
position: fixed;
top: 20px;
right: 15px;
color: maroon;
}
** IE7, IE8 এ DOCTYPE না দিলে fixed পজিশনিং কাজ করবেনা।
=================================================================
>>সিএসএস লেয়ার
এবার আমরা দেখবো লেয়ার ব্যবহার করার মাধ্যমে কোন এলিমেন্ট টি উপরে দেখাবে, যা সিএসএস লেয়ার এর মাধ্যমে আমরা নিয়ন্ত্রন করতে পারি। সিএসএস এ প্রত্যেক এলিমেন্ট কে priority দেয়া হয়ে থাকে। যদি দুটি overlapping CSS positioned elements থাকে, তাহলে যার priority বেশি তাকে আগে উপরে দেখাবে।Priority নির্ধারন করতে আমরা z-index value সেট করে থাকি ।যার z-index value যত বেশি তার priority তত বেশি।
view sourceprint?
h4{
position: relative;
top: 30px;
left: 50px;
z-index: 2;
background-color: #336699;
}
p {
position: relative;
z-index: 1;
background-color: #FFCCCC;
}
প্রদর্শন:
=================================================================
>>সিএসএস ফ্লট
লেআউট তৈরীর সময় সিএসএস ফ্লট দিয়ে সবচেয়ে গুরত্বপূর্ন কাজটি করা হয়। এছাড়া লেখা আর ছবি একসাথে থাকলে সেখানে ফ্লট ব্যবহার করা হয়। float এর মুলত দুটি মান দেয়া যায় left এবং right. left দিলে এলিমেন্ট টিকে ঠেলে বামে নিয়ে আসবে আর right দিলে ডানে নিয়ে যাবে। যেমন একটা ইমেজ বা ছবি যদি লেখার বামে নিতে চাই যেমন পত্র পত্রিকায় লেখার সাথে ছবি থাকে তাহলে.img {
float: left;
}
float:right ডানে চলে যাবে।
** float দিয়ে এলিমেন্ট গুলিকে পাশাপাশি (আড়াআড়িভাবে) বা side-by-side বসানো যায়। float সবসময় আড়াআড়িভাবে কাজ করে।
সাধারনত এইচটিএমএল এ এলিমেন্টগুলি লম্বালম্বি ভাবে একটার পর একটা অবস্থান করে যেমন অনেকগুলি li, p বা div ইত্যাদি। এখন এগুলিকে পাশাপাশি আনতে অর্থ্যাৎ একটার ডানে আরেকটা এভাবে ব্রাউজারের শেষ পর্যন্ত আনতে float:left; দিলে কাজ করবে।
** যেকোন ব্লক লেভেল এলিমেন্ট ব্রাউজারের বা থেকে ডানে শেষ পর্যন্ত জায়গা দখল করে থাকে ফলে ব্লক লেভেল এলিমেন্টের পাশে অন্য আরেকটা ব্লক লেভেল এলিমেন্ট ঢোকেনা। তবে যখন float দিবেন তখন এলিমেন্টের কনটেন্ট পরিমান জায়গা নিয়ে বাকি জায়গা সে অন্য floated এলিমেন্টের জন্য ছেড়ে দিবে।
লেআউট তৈরীর সময় কোন ডিভের পাশে কোন ডিভ হবে এসব ফ্লট দিয়ে ঠিক করা হয়। যেমন
.header{
float:left;
width : 100%;
border: 1px solid;
height: 100px;
}
.left_menu{
width : 24.999%;
float:left;
border: 1px solid;
height: 250px;
clear: both;
}
.content{
float: left;
width: 74%;
border: 1px solid;
height: 250px;
}
.footer{
float:left;
width:100%;
border: 1px solid;
height: 100px;
}
** float এর বাই ডিফল্ট মান none থাকে।
clear একটা প্রোপার্টিজ আছে এটা দিয়ে floated এলিমেন্ট সরানো যায়। left, right এবং both মানগুলি ব্যবহার করে বামে, ডানে অথবা উভয়দিকের floated এলিমেন্ট সরিয়ে ফেলা যায়। একটা floated এলিমেন্টের কোনদিকে floated এলিমেন্ট থাকবে আর কোনদিকে থাকবেনা এটা clear প্রোপার্টিজ দিয়ে ঠিক করা যায়। যেমন
body {
width: 400px;
margin: 1em auto;
}
h1 {
float: left;
margin-top: 0;
}
.navigation {
float: right;
margin: 0;
list-style: none;
}
.navigation li {
float: left;
}
.navigation a {
display: block;
margin-left: 0.5em;
padding: 5px;
border: 1px solid #000;
color: #000;
text-decoration: none;
}
.ntext{
clear: both;
}
** clear:both; উঠিয়ে দিয়ে দেখুন লেখাগুলি মেনুর আশেপাশে এলোমেলোভাবে দেখাবে।
=================================================================
>>সিএসএস ডিসপ্লে
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; করে দিতে হয়। যেমন
p{
display:inline;
}
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> মত কাজ হবে।
এরুপ আরো আছে, প্রয়োগ করে দেখতে পারেন।
display:inline-table;
display:list-item;
display:table-caption;
display:table-column-group;
display:table-header-group;
display:table-footer-group;
display:table-row-group;
display:table-column;
display:run-in;
display:flex;
=================================================================
