সিএসএস কি?
লিংকের সাধারণ অবস্থা (Normal Condition of link)
#nav ul li {float:left; list-style:none;}
#nav ul li a {padding:10px; display:block; text-decoration:none;}
#nav ul li a:link{background:#FCC;}
#nav ul li a:hover{background:#F60;}
#nav ul li a:hover { background: #639}
#nav ul li a:active { background:#39F;}
</style>
</head>
<body >
<a href="https://www.tutohost.com"><h1>This is a Link.</h1></a><br>
<div id="nav">
<ul>
<li><a href="https://www.tutohost.com"><h2>HTML</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>CSS </h2></a></li>
<li><a href="https://www.tutohost.com"><h2>PHP</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>Wordpress</h2></a></li>
</ul>
</div></body></html>
অনুশীলন প্রজেক্ট
এখন যদি প্রতিটা সেলের টেক্সট সমূহের ভার্টিক্যাল এলাইনমেন্ট অর্থাৎ প্রতিটা সেলের মধ্যে টেক্সট সমূহ উপরের দিকে থাকবে না নিচের দিকে থাকবে অথবা মাঝামাঝি অবস্থানে থাকবে কিনা নির্ধারণ করতে হয় তাহলে Declaration এ vertical-align নির্ধারণ করে দিতে হবে।টেক্সট সমূহ নিচের দিকে রাখার জন্য Declaration করতে হবে,
কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের ওয়াইডথ এর হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:2px 8px 6px 4px; এখানে ১ম 2pxনির্দেশ করে top border ; ২য় 8px নির্দেশ করে right border; ৩য় 6px নির্দেশ করে down border ; ৪র্থ 4px নির্দেশ করে left border।
Cascading Style Sheet এর সংক্ষিপ্ত রূপ হচ্ছে CSS । সহজ ভাষায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের সহজ কৌশল হচ্ছে CSS ।
একটা সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হতো । সে সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর কালার, সাইজ, টেবিলের বিভিন্ন সেলের কালার, পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার, এবং প্রয়োজনীয় ইমেজ সংযোজনকে বোঝানো হতো।
সিএসএস কেন প্রয়োজন?
একটা সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হতো । সে সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর কালার, সাইজ, টেবিলের বিভিন্ন সেলের কালার, পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার, এবং প্রয়োজনীয় ইমেজ সংযোজনকে বোঝানো হতো।
প্রতিটা পেজের প্রতিটা উপাদানের জন্যই আলাদা আলাদাভাবে কালার, সাইজ নির্ধারণ করতে হতো। যা ছিল একটা জটিল প্রক্রিয়া, এবং সময় সাপেক্ষ ব্যাপার । বর্তমানে যদি একটা ওয়েব সাইটে ১০০০ বা এর অধিক একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট ব্যবহার করে ডিজাইন সম্পূর্ণ করা হয়।
সিলেক্টর
CSS এর মাধ্যমে HTML দ্বারা তৈরি করা ওয়েব পেজের বিভিন্ন অংশকে নির্দিষ্ট করে গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণ করা হয়। HTML দ্বারা তৈরি ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করার জন্য সিলেক্টর ব্যবহার করা হয়। CSS এ বেশ কয়েক ধরণের সিলেক্টর ব্যবহার করা হয় । এ গুলোর মধ্যে উল্লেখযোগ্য হচ্ছে ....
- ট্যাগ সিলেক্টর
- ক্লাস সিলেক্টর
- আইডি সিলেক্টর
ট্যাগ সিলেক্টর
CSS এ ওয়েব পেজের কোন অংশকে নির্দিষ্টভাবে চিহ্নিত করার জন্য যখন HTML ট্যাগ সমূহ ব্যবহার করা হয় তাকে ট্যাগ সিলেক্টর বলে। যেমন
- body{background: #FC9;
- font-family: Tahoma;
- color: #F60;}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FC9;
font-family: Tahoma;
color: #F60;}
</style>
body{background: #FC9;
font-family: Tahoma;
color: #F60;}
</style>
</head>
<body >
<marquee>
<h1>www.tutohost.com</h1>
</marquee>
</body>
<h1>www.tutohost.com</h1>
</marquee>
</body>
</html>
body {background: #FC9; font-family: Tahoma; color: #F60;} এখানে body ট্যাগ সিলেক্টর।
ক্লাস সিলেক্টর
CSS এ ওয়েব পেজের কোন অংশ বা এক বা একাধিক উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি অন্যতম পদ্ধতি ক্লাস সিলেক্টর । একাধিক উপাদানকে একই ক্লাস সিলেক্টর দ্বারা চিহ্নিত করা যায়, তাই এটি কোডিং এর পরিমাণ হ্রাস করতে সাহায্য করে।
যেমন <p class="mar"> 24 / 7 Support</p> এর জন্য css কোড
.mar{color: #C03;
font-size:36px}
ক্লাস সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে class কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p class="mar">। এখানে marক্লাসের নাম। স্টাইল সিটে ক্লাসকে চিহ্নিত করতে (.)ডট চিহ্ন ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
.mar{color: #C03;
font-size:36px}
</style>
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<h1>www.tutohost.com</h1>
<p class="post">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
<p class="post">
We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
<p class="post"> এর মাধ্যমে একটি প্যারাগ্রাফের জন্য post নামে একটি ক্লাস নির্ধারণ করা হয়েছে।
<p class="post"> এর মাধ্যমে অপর একটি প্যারাগ্রাফের জন্য post নামে একটি ক্লাস নির্ধারণ করা হয়েছে।
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
এর মাধ্যমে post নামে নির্ধারিত ক্লাসযুক্ত উভয় প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
<p class="mar">এর মাধ্যমে একটি প্যারাগ্রাফের জন্য mar নামে একটি ক্লাস নির্ধারণ করা হয়েছে।
.mar{color: #C03;
font-size:36px}
এর মাধ্যমে mar নামে নির্ধারিত ক্লাসযুক্ত প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
আইডি সিলেক্টর
CSS এ ওয়েব পেজের কোন অংশ বা কোন উপাদানকে নির্দিষ্টভাবে চিহ্নিত করার একটি জনপ্রিয় পদ্ধতি আইডি সিলেক্টর । একাধিক উপাদানকে ক্লাস সিলেক্টর এর মত একই আইডি সিলেক্টর দ্বারা চিহ্নিত করা যায় না।
যেমন <p id="post1"> We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. information. </p>এর জন্য css কোড
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
আইডি সিলেক্টর নির্দেশ করার জন্য HTML ট্যাগের মধ্যে id কি-ওয়ার্ড ব্যবহার করা হয় এর পর = চিহ্ন দিয়ে ডাবল কোটেশন এর ভেতরে ক্লাস এর নাম লেখা হয়। যেমন <p id="post1">। এখানে post1আইডির নাম। স্টাইল শীটে আইডিকে চিহ্নিত করতে (#) চিহ্ন ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee></body></html>
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
প্রজেক্ট বিশ্লেষণ
<p id="post1"> এর মাধ্যমে একটি প্যারাগ্রাফের জন্য post1 নামে একটি আইডি নির্ধারণ করা হয়েছে।
<p id="post2"> এর মাধ্যমে অপর একটি প্যারাগ্রাফের জন্য post2 নামে একটি আইডি নির্ধারণ করা হয়েছে।
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
এর মাধ্যমে post1 নামে নির্ধারিত আইডিযুক্ত প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
এর মাধ্যমে post2 নামে নির্ধারিত আইডিযুক্ত প্যারাগ্রাফের জন্য স্টাইল নির্ধারণ করা হয়েছে।
কোড লেখার পদ্ধতি
যে কোন প্রোগ্রাম লেখার জন্যই কোন একটা এডিটর ব্যবহার করে কোডিং করতে হয়। সি এস এস এর জন্য প্রাথমিকভাবে এডিটর হিসেবে উইন্ডোজ অপারেটিং সিস্টেমের ডিফল্ট এডিটর notepadব্যবহার করা যেতে পারে এবং বাড়তি সুবিধা পাবার জন্য এডভান্স এডিটর হিসেবে Dreamweaverব্যবহার করলে কাজ অনেক সহজ হয়ে যাবে।
সি এস এস Syntax
সি এস এস syntax দুটি অংশে বিভক্ত ।যথা Selector এবং Declaration ।
Selector অংশে ট্যাগ সিলেক্টর হিসেবে HTML ট্যাগ বা ক্লাস সিলেক্টর হিসেবে HTML ট্যাগ এর ক্লাস এর নাম অথবা আইডি সিলেক্টর হিসেবে HTML ট্যাগ এর আইডি এর নাম বসে।
প্রতিটা Declaration এর একটি property এবং একটি value থাকে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Syntax</title>
<style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee></body></html>
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of your company with our secured and hacking proof server. We are taking care of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
এইচ টি এম এল এবং সি এস এস
এইচ টি এম এল এর সাথে সি এস এস যুক্ত করার বিষয়টি খুবই গুরুত্বপূর্ণ। এইচ টি এম এল এর সাথে সি এস এস যুক্ত করার জন্য তিনটি পদ্ধতি রয়েছে। যথা
- ইমবেডেড স্টাইল শীট
- ইন-লাইন স্টাইল শীট
- এক্সটার্নাল স্টাইল শীট
ইমবেডেড স্টাইল শীট
এ পদ্ধতিতে <head>………….</head> এর মধ্যে<style>..</style> বা স্টাইল ট্যাগ ব্যাবহার করা হয়। এবং <style>….</style> এর মধ্যেই সি এস এস এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ রাখা হয়। যেমন
<style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
ইমবেডেড স্টাইল শীটকে ইন লাইন স্টাইল শীটও বলা হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
</head>
<body ><h1>www.tutohost.com</h1>
<p class="post">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটিMozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
এক্সটার্নাল স্টাইল শীট
এ পদ্ধতিতে সি এস এস এর জন্য প্রয়োজনীয় Selector এবং Declaration সমূহ আলাদা স্ক্রিপ্টে রাখা হয় এবং স্ক্রিপ্টটিকে বা স্টাইল শীটটিকে style.css বা এর অনুরূপ নামে save করা হয়।<head>………….</head> এর মধ্যে <link rel="stylesheet" type="text/css" href="css.css"> যুক্ত করে এক্সটার্নাল স্টাইল শীট এর সাথে এইচ টি এম এল এর লিংক তৈরি করা হয়।
অনুশীলন প্রজেক্ট
HTML Code
<html>
<head>
<title> Selectors</title>
<link rel="stylesheet" type="text/css" href="css.css">
</head>
<body ><h1>www.tutohost.com</h1>
<p class="post">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করতে হবে।
CSS Code
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
font-family:Tahoma;
text-align:justify;}
স্টাইল সিটটিকে style.css নামে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
কখন এক্সটার্নাল স্টাইল শীট ব্যবহার করা উচিৎ
যে কোন ওয়েব সাইটের অধিকাংশ পেজই একই ডিজাইনের হয়। এক্ষেত্রে এক্সটার্নাল স্টাইল শীট ব্যবহার করলে প্রতিটা পেজের জন্য আলাদা স্টাইল শীটের প্রয়োজন হয় না। অর্থাৎ যখন কোন ওয়েব সাইটের অধিকাংশ পেজই একই ডিজাইনের তখন এক্সটার্নাল ইস্টাইল শীট ব্যবহার করা উচিৎ ।
ইন-লাইন স্টাইল শীট
এ পদ্ধতিতে এইচ টি এম এল এর প্রতিটা ট্যাগের এট্রিবিউটস হিসেবে style এট্রিবিউটস যুক্ত করে এর মধ্যে সি এস এস এর জন্য প্রয়োজনীয় Declarationসমূহ যুক্ত করা হয়।
যেমন <p style="color:#066; font-family:Tahoma; text-align:justify;">
অনুশীলন প্রজেক্ট
HTML Code
<html>
<head>
<title> Selectors</title>
</head>
<body ><h1>www.tutohost.com</h1>
<p style="color:#066; font-family:Tahoma; text-align:justify;">
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
কখন ইন-লাইন স্টাইল শীট ব্যবহার করা উচিৎ
কোন ওয়েব পেজের ডিজাইন তৈরির জন্য যখন এক্সটার্নাল ইস্টাইল শীট বা ইমবেডেড স্টাইল শীট থাকে অথবা কোন স্টাইল শীটই থাকে না এক্ষেত্রে কোন বিশেষ HTML ট্যাগের স্টাইল নির্ধারণের জন্য ইনলাইন স্টাইল শীট ব্যবহার করা উচিৎ ।
ব্যাকগ্রাউন্ড (Background)
ওয়েবপেজের বিভিন্ন উপাদান যেমন Body, Pragaph, Table ইত্যাদির জন্য ব্যাগ্রাউন্ড একটি অপরিহার্য উপাদান।এ সকল উপাদান সমূহের ব্যাকগ্রাউন্ড হিসেবে কালার অথবা ইমেজ ব্যবহার করা্ যায়।
ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহার
ব্যাকগ্রাউন্ড হিসেবে কালার ব্যবহারের জন্য Declaration হতে পারে background:#900;অথবা background-color:#900; । যেমন body{ background-color:#900; } ।
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহার
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের জন্য Declaration হবে background: url(../images/4.png); ।
যেমন body{ background: url(../images/4.png); }
ব্যাকগ্রাউন্ড হিসেবে ইমেজ ব্যবহারের ক্ষেত্রে আরো কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- ব্যাকগ্রাউন্ড রিপিটেশন (Background repeatation)
- ব্যাকগ্রাউন্ড পজিশন (Background position)
- ব্যাকগ্রাউন্ড এটাচমেন্ট (Background attachment)
ব্যাকগ্রাউন্ড রিপিটেশন
ব্যাগ্রাউন্ড ইমেজটি কতবার ব্যবহৃত হবে তা নির্দেশ করার জন্য ব্যাকগ্রাউন্ড রিপিটেশন ব্যবহার করা হয়। যদি পুরো ব্যাকগ্রাউন্ড জুড়ে ইমেজটিকে বারবার রিপিট করতে হয় তাহলে Declaration হবে background-repeat:repeat; যদি ইমেজটিকে মাত্র একবার ব্যবহার করতে হয় তাহলে Declaration হবে background-repeat:no-repeat ; যদি ইমেজটিকে X-অক্ষ বরাবর বারবার রিপিট করতে হয় তাহলে Declaration হবে background-repeat:repeat-x ; ইমেজটিকে Y-অক্ষ বরাবর বারবার রিপিট করতে হয় তাহলে Declaration হবে background-repeat:repeat-y ; । যেমন body { background: url(images/4.png); background-repeat:repeat-x;} । যদি body { background: url(images/4.png); } এভাবে Declaration করা হয় তাহলে পুরো ব্যাকগ্রাউন্ড জুড়ে ইমেজটি বারবার রিপিট হবে।
ব্যাকগ্রাউন্ড পজিশন
ব্যাকগ্রাউন্ড ইমেজটির অবস্থান কোথায় হবে তা নির্দেশ করার জন্য ব্যাকগ্রাউন্ড পজিশন ব্যবহার করা হয়। যদি ইমেজটিকে বামে রাখতে হয় তাহলে Declaration হবে background-position:left; এখানে left এর স্থানে right, center, bottom, top ইত্যাদি হতে পারে। যদি ইমেজটিকে উপর দিক থেকে বামে রাখতে হয় তাহলে Declaration হবে background-position:top-left; ।
ব্যাকগ্রাউন্ড এটাচমেন্ট
ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং হবে কিনা তা প্রকাশ করার জন্য ব্যাকগ্রাউন্ড এটাচমেন্ট ব্যবহার করা হয়। ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং করার জন্য Declaration হবে background-attachment:scroll ; । সাধারণত কিছু উল্লেখ না করলে ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং হয়। ব্যাকগ্রাউন্ড ইমেজ পেজের অন্যান্য উপাদানের সাথে সাথে স্ক্রলিং না করার জন্য Declaration হবে background-attachment:fixed; ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> Selectors</title>
<style>
body{ background: url(../images/bg.png); background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-left:50px;}
h1{ margin-top:50px; color:#C00}
</style>
body{ background: url(../images/bg.png); background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-left:50px;}
h1{ margin-top:50px; color:#C00}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p></body></html>
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেক্সট (Text)
ওয়েব সাইটের প্রধান উপাদান হচ্ছে টেক্সট। সৌন্দর্য বৃদ্ধির জন্য এবং বিশেষ কিছু সুবিধা পাবার জন্য css এর মাধ্যমে টেক্সট এর স্টাইল তৈরি করা হয়। টেক্সট এর স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- টেক্সট কালার (Text Color)
- টেক্সট এলাইনমেন্ট (Text Alignment)
- টেক্সট ডেকরেশন (Text Decoration)
- টেক্সট ট্রান্সফরমেশন (Text Transformation)
টেক্সট কালার (Text Color)
আমরা সাধারণত HTML এর মাধ্যমে টেক্সট ব্যবহারের জন্য <P>, <h1>,<h2>,<a> সহ আরো কিছু ট্যাগ ব্যবহার করি। এসকল টেক্সট এর কালার নির্ধারণের জন্য Declaration করতে হবে p { color: #FC9 } বা এর অনুরূপ। p এর স্থানে অন্যান্য ট্যাগের ক্ষেত্রে h1, h2 , a, body, অথবা কোন ট্যাগের id বা class বসতে পারে। টেক্সট এর কালার নির্ধারণের জন্য তিন ধরণের Declaration হতে পারে। যেমন
p { color: #FC9}
p {color:blue;}
p {color:rgb(255,0,0);}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h1{color:#C00;}
p{color:blue;}
.mar{color:rgb(150,0,0); font-size:25px;}
</style>
body{background:#090}
h1{color:#C00;}
p{color:blue;}
.mar{color:rgb(150,0,0); font-size:25px;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p>
We are bangladeshi Hostgator hosting provider.<br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee></body></html>
<h1>www.tutohost.com</h1>
<p>
We are bangladeshi Hostgator hosting provider.<br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেক্সট এলাইনমেন্ট (Text Alignment)
ওয়েব পেজে টেক্সটকে সাজানোর জন্য টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। টেক্সটকে পেজের বাম পাশে রাখার জন্য Declaration করতে হবে text-align:left; অনুরূপভাবে ডান পাশে রাখার জন্য Declaration করতে হবে text-align:right;মধ্যস্থানে রাখার জন্য Declaration করতে হবে text-align:center; । যদি টেক্সট এর প্রতিটা লাইন একই আকারে সাজাতে চাই তাহলে Declarationকরতে হবে text-align:justify ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#right{text-align:right;}
#left{text-align:left;}
#center{text-align:center}
#justify{text-align: justify;}
</style>
body{background:#090}
#right{text-align:right;}
#left{text-align:left;}
#center{text-align:center}
#justify{text-align: justify;}
</style>
</head>
<body >
<h2>Example of right align </h2>
<p id="right">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of left align </h2>
<p id="left">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of center align </h2>
<p id="center">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of justify align </h2>
<p id="justify">
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
</p></body></html>
<h2>Example of right align </h2>
<p id="right">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of left align </h2>
<p id="left">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of center align </h2>
<p id="center">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of justify align </h2>
<p id="justify">
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
</p></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেক্সট ডেকরেশন (Text Decoration)
কোন টেক্সট এর সাথে HTML এর <a> ট্যাগের মাধ্যমে লিংক যুক্ত করলে টেক্সটটির নিচে স্ট্রেট লাইন আসে। উক্ত স্ট্রেট লাইন স্থানান্তরিত করার জন্য, টেক্সট ডেকরেশন ব্যবহার করা হয়। স্ট্রেট লাইনকে টেক্সট এর উপরে স্থান দেয়ার জন্য Declarationকরতে হবে text-decoration:overline;। স্ট্রেট লাইনকে টেক্সট এর মধ্যস্থানে স্থান দেয়ার জন্য Declaration করতে হবে text-decoration:line-through; । স্ট্রেট লাইনকে টেক্সট এর নিচে স্থান দেয়ার জন্য Declarationকরতে হবে text-decoration:underline; টেক্সট কে পর্যয়ক্রমিকভাবে দৃশ্যমান এবং অদৃশ্য করার জন্য Declaration করতে হবে text-decoration:blink; স্ট্রেট লাইনকে সম্পূর্ণরূপে দূর করার জন্য Declaration করতে হবে text-decoration:none;।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h3 {text-decoration:overline;}
h4{text-decoration:line-through;}
h5{text-decoration:underline;}
h6 {text-decoration:blink;}
#none{text-decoration:none}
</style>
body{background:#090}
h3 {text-decoration:overline;}
h4{text-decoration:line-through;}
h5{text-decoration:underline;}
h6 {text-decoration:blink;}
#none{text-decoration:none}
</style>
</head>
<body >
<h3>This is an example of overline</h3>
<h4>This is an example of line-through</h4>
<h5>This is an example of underline</h5>
<h6>This is an example of blink</h6>
<a href="www.tutohost.com"id="none"><h2>This is a link and an example of text-decoration none </h2></a></body></html>
<h3>This is an example of overline</h3>
<h4>This is an example of line-through</h4>
<h5>This is an example of underline</h5>
<h6>This is an example of blink</h6>
<a href="www.tutohost.com"id="none"><h2>This is a link and an example of text-decoration none </h2></a></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেক্সট ট্রান্সফরমেশন (Text Transformation)
টেক্সট অন্তর্ভূক্ত অক্ষর সমূহকে বড় হাতের বা ছোট হাতের অক্ষরে অথবা প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য টেক্সট ট্রান্সফরমেশন ব্যবহার করা হয়। টেক্সট এর অন্তর্ভূক্ত সকল অক্ষরকে বড় হাতের অক্ষরে রূপান্তরের জন্য Declarationকরতে হবে text-transform:uppercase; ছোট হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:lowercase; প্রতিটি শব্দের প্রথম অক্ষর বড় হাতের অক্ষরে রূপান্তরের জন্য Declaration করতে হবে text-transform:capitalize; ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body >
<p class="uppercase">This is an example of uppercase.</p>
<p class="lowercase">This is an example of lowercase.</p>
<p class="capitalize">This is an example of capitalize.</p></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>
</head>
<body >
<p class="uppercase">This is an example of uppercase.</p>
<p class="lowercase">This is an example of lowercase.</p>
<p class="capitalize">This is an example of capitalize.</p></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ফন্ট (Font)
একটা ওয়েব সাইটের প্রধান উদ্দেশ্য হচ্ছে ব্যবহারকারীকে প্রয়োজনীয় তথ্য সেবা প্রদান করা। কোন ওয়েব সাইটে তথ্য প্রদর্শনের ক্ষেত্রে প্রধান ভূমিকা পালন করে টেক্সট । সাইটে কোথায় কি ধরণের টেক্সট ব্যবহার করা হবে, আকার আকৃতি কেমন হবে এ সকল কিছুই নিয়ন্ত্রিত হয় সি এস এস এর ফন্ট এর মাধ্যমে। টেক্সট এর ফন্ট স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয় Declaration এ উল্লেখ করতে হয়। এগুলো হচ্ছে
- ফন্ট ফ্যামিলি (Font family)
- ফন্ট সাইজ(Font size)
- ফন্ট ভেরিয়েন্ট (Font variant)
- ফন্ট ওয়েট (font-weigh)
ফন্ট ফ্যামিলি (Font family)
টেক্সট সমূহে কি ধরণের ফন্ট ব্যবহার করা হবে, তা নির্দেশ করার জন্য ফন্ট ফ্যামিলি ব্যবহার করা হয়। টেক্সট সমূহের জন্য Arial ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Arial;অনুরূপভাবে Tahoma ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-family:Tahoma; । অনেক সময় টেক্সট সমূহের জন্য একটির পরিপূরক হিসেবে একাধিক ফন্ট Declaration এ উল্লেখ করা হয় যেমন font-family:Verdana, Geneva, Tahoma; । যখন ব্রাউজার প্রথম ফন্ট সাপোর্ট করবে না তখন টেক্সট সমূহ ২য় বা ৩য় ফন্টে প্রদর্শিত হবে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h1{font-family:Arial;}
h2{font-family:Tahoma; color: #C00}
p{ font-family:Verdana, Geneva, Tahoma}
</style>
</head>
<body >
<h1>This text is written by Arial font.</h1>
<h2>This text is written by Tahoma font.</h2>
<p>Normaly,this text is written by Verdana font, But when browser does not support Verdana font, this text will be displayed by Geneva font or Tahoma font. </p> </body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h1{font-family:Arial;}
h2{font-family:Tahoma; color: #C00}
p{ font-family:Verdana, Geneva, Tahoma}
</style>
</head>
<body >
<h1>This text is written by Arial font.</h1>
<h2>This text is written by Tahoma font.</h2>
<p>Normaly,this text is written by Verdana font, But when browser does not support Verdana font, this text will be displayed by Geneva font or Tahoma font. </p> </body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ফন্ট সাইজ(Font size)
টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ কেমন হবে, তা নির্দেশ করার জন্য ফন্ট সাইজ ব্যবহার করা হয়। টেক্সট সমূহের জন্য 25px এর ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:25px; অনুরূপভাবে 20px ফন্ট সিলেক্ট করার জন্য Declaration করতে হবে font-size:20px;। টেক্সট সমূহে ব্যবহৃত ফন্ট সমূহের আকার বা সাইজ পিক্সেলে বা px এ না দিয়ে শতকরা হিসেবেও দেযা যেতে পারে, এক্ষেত্রে Declaration করতে হবে font-size:100% এর অনুরূপ। টেক্সট সমূহের ফন্ট সাইজ Declaration এর আরো বেশ কিছু পদ্ধতি আছে যেমন font-size:larger; font-size:medium; font-size:small; font-size:smaller; font-size:xx-large; font-size:large; font-size:x-large; font-size:x-small; font-size:xx-small; ইত্যাদি।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
p{font-size:25px;}
h3{font-size:20px;}
#100{ font-size:100%}
#250{ font-size:150%}
#xx-large{ font-size:xx-large;}
</style>
</head>
<body >
<p> The font size of the text is 25px. </p>
<h3>The font size of the text is 20px.</h3>
<p id="100">The font size of the text is 100%.</p>
<p id="250">The font size of the text is 150%.</p>
<p id="xx-large">The font size of the text is xx-large</p> </body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
p{font-size:25px;}
h3{font-size:20px;}
#100{ font-size:100%}
#250{ font-size:150%}
#xx-large{ font-size:xx-large;}
</style>
</head>
<body >
<p> The font size of the text is 25px. </p>
<h3>The font size of the text is 20px.</h3>
<p id="100">The font size of the text is 100%.</p>
<p id="250">The font size of the text is 150%.</p>
<p id="xx-large">The font size of the text is xx-large</p> </body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ফন্ট ভেরিয়েন্ট (Font variant)
যদি কোন ওয়েব পেজে বিশেষ কোন শিরোনাম এমনভাবে প্রদর্শনের প্রয়োজন পড়ে, যেখানে স্বাভাবিকভাবে লেখা টেক্সট সমূহের সবগুলো অক্ষর বড় হাতের হবে কিন্তু যেস্থানে ছোট হাতের অক্ষর হওয়ার কথা সেই স্থানের বড় হাতের অক্ষরগুলোর ফন্ট সাইজ তুলনামূলক স্বাভাবিক ফন্ট সাইজের চেয়ে ছোট হবে, এক্ষেত্রে ফন্ট ভেরিয়েন্ট ব্যবহার করা হয়। This Is an Example Of Variant Text লেখাটির ভারিয়েন্ট স্টাইল তৈরির জন্য Declaration করতে হবে font-variant: small-caps; ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#variant{ font-variant: small-caps; color:#C00;}
</style>
</head>
<body >
<h2>This is an example of normal h2 text .</h2>
<h2 id="variant">This Is an Example Of h2 Variant Text .</h2></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#variant{ font-variant: small-caps; color:#C00;}
</style>
</head>
<body >
<h2>This is an example of normal h2 text .</h2>
<h2 id="variant">This Is an Example Of h2 Variant Text .</h2></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ফন্ট ওয়েট (font-weigh)
কোন ওয়েব পেজে ব্যবহৃত টেক্সট সমূহ কতটা মোটা হবে বা চিকন হবে তা নির্ধারণ করার জন্য ফন্ট ওয়েট ব্যবহার করা হয়। বোল্ড টেক্সট তৈরির জন্য Declaration করতে হবে font-weight:bold; । টেক্সট সমূহ কতটা মোটা হবে তা নির্ধারণের জন্য সংখ্যা ব্যবহার করা যেতে পারে, যেমন font-weight:900; অথবা font-weight:800; । এছাড়া ফন্ট ওয়েট স্টাইল হিসেবে font-weight:lighter;এবং font-weight:bolder; ব্যবহার করা হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#normal{font-weight:normal;}
#bold{font-weight:bold;}
#lighter{font-weight:lighter;}
#ni{font-weight:900;}
</style>
</head>
<body >
<p id="normal"> This is an example of normal p text . </p>
<p id="bold"> This is an example of bold p text . </p>
<p id="lighter"> This is an example of lighter p text . </p>
<p id="ni"> This is an example of 900 p text . </p></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#normal{font-weight:normal;}
#bold{font-weight:bold;}
#lighter{font-weight:lighter;}
#ni{font-weight:900;}
</style>
</head>
<body >
<p id="normal"> This is an example of normal p text . </p>
<p id="bold"> This is an example of bold p text . </p>
<p id="lighter"> This is an example of lighter p text . </p>
<p id="ni"> This is an example of 900 p text . </p></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
লিংক (Link)
HTML এ অন্যান্য পেজের সাথে সংযোগ স্থাপনের জন্য <a></a> বা এঙ্কর ট্যাগ ব্যবহার করে লিংক তৈরি করা হয়। আর লিংক সবচেয়ে বেশি ব্যবহার করা হয় নেভিগেশনবারে। সাধারণত কোন একটি লিংক এর চারটি অবস্থা থাকে। যথা
লিংকের সাধারণ অবস্থা (Normal Condition of link)
লিংকের ভিজিটেড অবস্থা (Visited Condition of link)
লিংকের হোবার অবস্থা (Hover Condition of link)
লিংকের সক্রিয় অবস্থা (Active Condition of link)
লিংকের সাধারণ অবস্থা (Normal Condition of link)
কোন একটি লিংক প্রথমবার ব্যবহার না করা পর্যন্ত যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সাধারণ অবস্থা বলে। এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:link {color: #090;}।
লিংকের ভিজিটেড অবস্থা (Visited Condition of link )
কোন একটি লিংক এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের ভিজিটেড অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:visited {color:#303}।
লিংকের হোবার অবস্থা (Hover Condition of link)
কোন একটি লিংক ব্যবহার করা হোক বা না হোক, লিংকের উপর মাউস রাখলে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের হোবার অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:hover { background: #639}।
লিংকের সক্রিয় অবস্থা (Active Condition of link)
যখন লিংকটি সক্রিয় অবস্থায় থাকে, অর্থাৎ মাউস ক্লিক করার মূহর্তে লিংকটি যেভাবে প্রদর্শিত হয় তাকে ঐ লিংকের সক্রিয় অবস্থা বলে।এ অবস্থায় লিংকটি কেমন দেখাবে তার স্টাইল তৈরি করার জন্য স্টাইল শীটে লেখতে হবে a:active {color:#960;}
চারটি অবস্থাতেই লিংকের ব্যগ্রাউন্ড পরিবর্তন করা যায়। এবং নেভিগেশন বারে এই লজিকটিই বেশি ব্যবহৃত হয়। লিংকের ব্যগ্রাউন্ড পরিবর্তন করার জন্য স্টাইল সিটে লেখতে হবে
a:hover{background:#F60; এর অনুরূপ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}
#nav ul li {float:left; list-style:none;}
#nav ul li a {padding:10px; display:block; text-decoration:none;}
#nav ul li a:link{background:#FCC;}
#nav ul li a:hover{background:#F60;}
#nav ul li a:hover { background: #639}
#nav ul li a:active { background:#39F;}
</style>
</head>
<body >
<a href="https://www.tutohost.com"><h1>This is a Link.</h1></a><br>
<div id="nav">
<ul>
<li><a href="https://www.tutohost.com"><h2>HTML</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>CSS </h2></a></li>
<li><a href="https://www.tutohost.com"><h2>PHP</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>Wordpress</h2></a></li>
</ul>
</div></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
আনঅর্ডার লিস্ট (Unrdered List)
আন অর্ডার লিস্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে, আন অর্ডার লিস্ট বেশ কয়েক ধরণের হতে পারে। যেমন ডিক্স স্টাইল, সার্কেল স্টাইল, স্কয়ার স্টাইল ইত্যাদি। ডিক্স স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:disc;। সার্কেল স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:circle; স্কয়ার স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:square;।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
h1{color:#F00;}
#disc {list-style-type:disc;}
#circle {list-style-type:circle}
#square {list-style-type:square;}
</style>
</head>
<body >
<h1>Unordered list</h1>
<h4>Disc Type list</h4>
<ul id="disc">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<h4>Circle Type list</h4>
<ul id="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
<ul id="square">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ul></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
h1{color:#F00;}
#disc {list-style-type:disc;}
#circle {list-style-type:circle}
#square {list-style-type:square;}
</style>
</head>
<body >
<h1>Unordered list</h1>
<h4>Disc Type list</h4>
<ul id="disc">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<h4>Circle Type list</h4>
<ul id="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
<ul id="square">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ul></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
লিস্টে ইমেজের ব্যবহার
লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।নেভিগেশন বারে লিস্টের ব্যবহার খুবই জনপ্রিয়। সাধারণত সাইডবার নেভিগেশনে ব্যবহৃত লিস্টে লিস্ট স্টাইল হিসেবে ইমেজের ব্যবহার বেশি দেখা যায়।লিস্ট স্টাইল হিসেবে ইমেজ ব্যবহারের জন্য Declaration করতে হবে list-style-image:url(images/b.png)।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#c9f3fa; margin-left:120px;}
h1{color:#F00;}
ul{list-style-image:url(images/b.png)}
</style>
</head>
<body >
<h1>List Style Image</h1>
<ul id="disc">
<li><a href="www.tutohost.com">Home</a></li>
<li><a href="www.tutohost.com">About Us</a></li>
<li><a href="www.tutohost.com">HTML</a></li>
<li><a href="www.tutohost.com">CSS</a></li>
<li><a href="www.tutohost.com">PHP</a></li>
<li><a href="www.tutohost.com">Contact Us</a></li>
</ul> </body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#c9f3fa; margin-left:120px;}
h1{color:#F00;}
ul{list-style-image:url(images/b.png)}
</style>
</head>
<body >
<h1>List Style Image</h1>
<ul id="disc">
<li><a href="www.tutohost.com">Home</a></li>
<li><a href="www.tutohost.com">About Us</a></li>
<li><a href="www.tutohost.com">HTML</a></li>
<li><a href="www.tutohost.com">CSS</a></li>
<li><a href="www.tutohost.com">PHP</a></li>
<li><a href="www.tutohost.com">Contact Us</a></li>
</ul> </body></html>
কার্যপ্রণালী
imstyle নামে একটা folder তৈরি করে তার মধ্যে images নামে নতুন একটা folder তৈরি করতে হবে। images folder এর মধ্যে যে ইমেজটি লিস্টে প্রদর্শন করা হবে তা রাখতে হবে।এই প্রজেক্টটিতে b.png নামে একটা ইমেজ ব্যবহার করা হয়েছে।ইমেজটির ডাউনলোড লিংক http://www.tutohost.com/bangla/css/images/pic/b.png।
এর পর imstyle নামে তৈরি folder এর মধ্যে একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটিMozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেবিল (Table )
ওয়েব পেজে টেবিল ব্যাবহার করে খুব সহজেই তথ্য-উপাত্ত,পরিসংখ্যান উপস্থাপন করা যায়। টেবিল খুবই গুরুত্বপূর্ণ একটি উপাদান।সি এস এস ব্যবহার করে এইচ টি এম এল এ তৈরিকৃত টেবিলকে আরো আকর্ষণীয় এবং ব্যবহার বান্ধব করা যায়। সি এস এস ব্যবহার করে টেবিলের স্টাইল তৈরির জন্য বেশ কয়েকটি বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,
- টেবিল বর্ডার (Table Border)
- টেবিল ওয়াইডথ এন্ড হাইট (Table Width and Height)
- টেবিল টেক্সট এলাইনমেন্ট (Table Text Alignment)
- টেবিল কালার (Table Color)
টেবিল বর্ডার (Table Border)
মূলত টেবিলের দৃশ্যমান মূল গঠন তৈরি করা হয় টেবিল বর্ডার দ্বারা।টেবিলের প্রতিটা সারি তৈরির জন্য HTML এ <tr></tr> ব্যবহার করা হয়, এবং প্রতিটা সেল তৈরির জন্য <td></td>ব্যবহার করা হয়। <th></th> এর মাধ্যমে টেবিল হেডার তৈরি করা হয়।CSS দ্বারা টেবিল বর্ডার স্টাইল তৈরির জন্য স্ট্যাইল শীটে লেখতে হবে,
table,th,td
{
border:1px solid #F00;
}
{
border:1px solid #F00;
}
এখানে মূল টেবিল, টেবিলের প্রতিটা সারি এবং প্রতিটা সেল এর জন্য একই স্ট্যাইলের বর্ডার নির্ধারণ করা হয়েছে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
table,th,td
{
border:1px solid #F00;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
table,th,td
{
border:1px solid #F00;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটিMozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
ছবিটাতে আসলে সাধারণ টেবিলের মত বর্ডার তৈরি হয়নি। প্রতিটা সেল পরস্পর থেকে আলাদা হয়েছে।
{
border-collapse:collapse;
}
border-collapse:collapse;
}
এখন যদি স্টাইল শীটে উপরের কোড টুকু যুক্ত করা হয় তাহলে টেবিলটি দেখতে সাধারণ টেবিলের মত হবে এবং Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেবিল ওয়াইডথ এন্ড হাইট (Table Width and Height)
টেবিল ডিজাইনের ক্ষেত্রে যে বিষয়টি প্রথমে চিন্তা করতে হয়, তা হচ্ছে টেবিলটি কতটুকু চওড়া হবে এবং এর উচ্চতা কতটুকু হবে, টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল কেমন হবে। টেবিলের চওড়া কেমন হবে এবং এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
table
{
width:300px; height:100px;
}
{
width:300px; height:100px;
}
মানসমূহ px তথা পিক্সেলে অথবা পেজের শতকরা হিসেবে দেয়া যেতে পারে।যেমন,
table
{
width:50%; height:20%;
}
{
width:50%; height:20%;
}
শতকরা হিসেবে মান দিলে মনিটরের সাইজ অনুসারে টেবিলের আকার পরিবর্তিত হবে কিন্তু পিক্সেলে মান দিলে কোন পরিবর্তন হবে না।
টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
th
{
height:50px;
}
{
height:50px;
}
এক্ষেত্রেও মানসমূহ px তথা পিক্সেলে অথবা পেজের শতকরা হিসেবে দেয়া যেতে পারে। সাধারণত টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল এর উচ্চতা নির্ধারণ করে দিলে বাকি সেল গুলোর আকার টেবিলের width দ্বারা নির্ধারিত হয়।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:100px;
}
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:100px;
}
th
{
height:50px;
}
{
height:50px;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেবিল টেক্সট এলাইনমেন্ট (Table Text Alignment)
টেবিলে টেক্সট সমূহ কিভাবে থাকবে তা নির্দেশ করার জন্য টেবিল টেক্সট এলাইনমেন্ট ব্যবহার করা হয়। প্রতিটা সেলের টেক্সট সমূহ বামে রাখতে হলে স্টাইল শীটে লেখতে হবে,
td
{
text-align:right;
{
text-align:right;
}
ডানে রাখতে হলে Declaration করতে হবে text-align:left;
মাঝখানে রাখতে হলে Declaration করতে হবে text-align:center;
মাঝখানে রাখতে হলে Declaration করতে হবে text-align:center;
এখন যদি প্রতিটা সেলের টেক্সট সমূহের ভার্টিক্যাল এলাইনমেন্ট অর্থাৎ প্রতিটা সেলের মধ্যে টেক্সট সমূহ উপরের দিকে থাকবে না নিচের দিকে থাকবে অথবা মাঝামাঝি অবস্থানে থাকবে কিনা নির্ধারণ করতে হয় তাহলে Declaration এ vertical-align নির্ধারণ করে দিতে হবে।টেক্সট সমূহ নিচের দিকে রাখার জন্য Declaration করতে হবে,
td
{
vertical-align:bottom;
}
{
vertical-align:bottom;
}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:200px;
}
th
{
height:50px;
}
td
{
text-align:center;
}
td
{
vertical-align:bottom;
}
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:200px;
}
th
{
height:50px;
}
td
{
text-align:center;
}
td
{
vertical-align:bottom;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
টেবিল কালার (Table Color)
বর্তমানে একটা ওয়েব সাইট শুধুমাত্র তথ্য প্রকাশের উদ্দেশ্যে ডিজাইন করা হয় না।তথ্যটি কতটা সুন্দরভাবে এবং সহজে ব্যবহারযোগ্য করে ব্যবহারকারীর নিকট উপস্থাপন করা হল, সেটাও অধিক গুরুত্বপূর্ণ। ওয়েব পেজে টেবিলে উপস্থাপিত পরিসংখ্যান বা তালিকাকে সি এস এস ব্যবহার করে আকর্ষণীয়রূপে ব্যবহারকারীর নিকট প্রদর্শন করা যায়।এক্ষেত্রে টেবিলের হেডার এবং প্রতিটা সেলের কালার অধিক গুরুত্বপূর্ণ ভূমিকা পালন করে। টেবিল হেডার এর ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
th
{
background:#F69;
}
{
background:#F69;
}
টেবিলের প্রতিটা সেলের ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,
td
{
background:#FAC;
}
{
background:#FAC;
}
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
width:300px; height:200px;
}
table,th,td
{
border:1px solid #F00;
}
th
{
height:50px;
}
td
{
text-align:center;
vertical-align:bottom;
}
th
{
background: #F69;
}
td
{
background:#FAC;
}</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
width:300px; height:200px;
}
table,th,td
{
border:1px solid #F00;
}
th
{
height:50px;
}
td
{
text-align:center;
vertical-align:bottom;
}
th
{
background: #F69;
}
td
{
background:#FAC;
}</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
বর্ডার এবং বর্ডার স্টাইল
বর্ডার ওয়েব পেজের একটি গুরুত্বপূর্ণ উপাদান।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন উপাদানের জন্য সঠিক রং এবং আকৃতির বর্ডার তৈরি করার উপর ডিজাইনের মাধুর্য অনেকাংশে নির্ভর করে।সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার তৈরি করা যায়।
বিভিন্ন ধরণের বর্ডার তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,
বিভিন্ন ধরণের বর্ডার তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,
- বর্ডার স্টাইল (Border Style)
- বর্ডার ওয়াইডথ (Border Width)
- বর্ডার কালার (Border Color)
- পৃথক বর্ডার (Individual Border)
বর্ডার স্টাইল
বর্ডার স্ট্যাইল নির্দেশ করে বর্ডারটি দেখতে কেমন হবে।বর্ডার স্ট্যাইল তৈরির জন্য Declarationকরতে হবে, border-style:dotted এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার স্ট্যাইল তৈরি করা যায়। ডটেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dotted ; ড্যাসেড স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:dashed; ডাবল স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:double; গ্রোভ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:groove; রিডজ স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:ridge;ইনসেট স্ট্যাইল বর্ডার তৈরির জন্য Declarationকরতে হবে, border-style:inset; আউটসেট স্ট্যাইল বর্ডার তৈরির জন্য Declaration করতে হবে, border-style:outset; ।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
#dotted{border-style:dotted ;}
#dashed{border-style:dashed;}
#double{border-style:double;}
#groove{border-style:groove;}
#ridge{border-style:ridge;}
#inset{border-style:inset;}
#outset{border-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
<h3 id="groove">This is an example of groove border</h3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
#dotted{border-style:dotted ;}
#dashed{border-style:dashed;}
#double{border-style:double;}
#groove{border-style:groove;}
#ridge{border-style:ridge;}
#inset{border-style:inset;}
#outset{border-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
<h3 id="groove">This is an example of groove border</h3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
বর্ডার ওয়াইডথ (Border Width)
বর্ডার ওয়াইডথ নির্দেশ করে বর্ডারটি কতটা মোটা হবে।বর্ডার ওয়াইডথ নির্ধারণের জন্য Declarationকরতে হবে, border-width:thin; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার ওয়াইডথ নির্ধারণ করা যায়।থিন বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:thin;মিডিয়াম বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:medium; থিক বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:thick; 1px বা ১ পিক্সেল চওড়া বর্ডার তৈরির জন্য Declaration করতে হবে,border-width:1px; 15px বা ১৫ পিক্সেল চওড়া বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:15px; ।
কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের ওয়াইডথ এর হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-width:2px 8px 6px 4px; এখানে ১ম 2pxনির্দেশ করে top border ; ২য় 8px নির্দেশ করে right border; ৩য় 6px নির্দেশ করে down border ; ৪র্থ 4px নির্দেশ করে left border।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3{border-style:solid;}
#thin{border-width:thin;}
#medium{border-width:medium;}
#thick{border-width:thick;}
#1px{border-width:1px;}
#15px{border-width:15px;}
div{border-style:solid;
border-width:2px 8px 6px 4px;}
</style>
</head>
<body >
<h3 id="thin">This is an example of thin border</h3>
<h3 id="medium">This is an example of medium border</h3>
<h3 id="thick">This is an example of thick border</h3>
<h3 id="1px">This is an example of 1px border</h3>
<h3 id="15px">This is an example of 15px border</h3>
<div>
<p>
<h2>This is an example of multi size border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3{border-style:solid;}
#thin{border-width:thin;}
#medium{border-width:medium;}
#thick{border-width:thick;}
#1px{border-width:1px;}
#15px{border-width:15px;}
div{border-style:solid;
border-width:2px 8px 6px 4px;}
</style>
</head>
<body >
<h3 id="thin">This is an example of thin border</h3>
<h3 id="medium">This is an example of medium border</h3>
<h3 id="thick">This is an example of thick border</h3>
<h3 id="1px">This is an example of 1px border</h3>
<h3 id="15px">This is an example of 15px border</h3>
<div>
<p>
<h2>This is an example of multi size border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটিMozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
বর্ডার কালার (Border Color)
বর্ডার কালার নির্দেশ করে বর্ডারটির রং কেমন হবে।বর্ডার কালার নির্ধারণের জন্য Declaration করতে হবে, border-color:yellow; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের বর্ডার কালার নির্ধারণ করা যায়।হলুদ রঙের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:yellow; পিংক কালারের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:pink;rgb পদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:rgb(240,060,155); hexপদ্ধতিতেও বর্ডার কালার রির্ধারণ করা যায়, এ পদ্ধতিতে বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#ff0000; বর্ডার কালার ট্রান্সপারেন্ট হতে পারে, ট্রান্সপারেন্ট বর্ডার তৈরির জন্য Declaration করতে হবে,border-color:transparent; ।
কোন HTML উপাদানের চারপাশের বর্ডার চার ধরণের রঙের হতে পারে, এধরণের বর্ডার তৈরির জন্য Declaration করতে হবে, border-color:#a03090 #f00000 #C06000 #0030F0; এখানে ১ম #a03090 নির্দেশ করে top border color ; ২য় #f00000 নির্দেশ করে right border color; ৩য় #C06000 নির্দেশ করে down border color; ৪র্থ #0030F0; নির্দেশ করে left border color ;
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3{border-style:solid;}
#yellow{border-color:yellow;}
#pink{border-color:pink;}
#rgb{border-color:rgb(240,060,155);}
#hex{border-color:#ff0000;}
#transparent{border-color:transparent;}
div{border-style:solid;
border-color:#a03090 #f00000 #C06000 #0030F0;}
</style>
</head>
<body >
<h3 id="yellow">This is an example of yellow border</h3>
<h3 id="pink">This is an example of pink border</h3>
<h3 id="rgb">This is an example of rgb border</h3>
<h3 id="hex">This is an example of hex border</h3>
<h3 id="transparent">This is an example of transparent border</h3>
<div>
<p>
<h2>This is an example of multi colour border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
h3{border-style:solid;}
#yellow{border-color:yellow;}
#pink{border-color:pink;}
#rgb{border-color:rgb(240,060,155);}
#hex{border-color:#ff0000;}
#transparent{border-color:transparent;}
div{border-style:solid;
border-color:#a03090 #f00000 #C06000 #0030F0;}
</style>
</head>
<body >
<h3 id="yellow">This is an example of yellow border</h3>
<h3 id="pink">This is an example of pink border</h3>
<h3 id="rgb">This is an example of rgb border</h3>
<h3 id="hex">This is an example of hex border</h3>
<h3 id="transparent">This is an example of transparent border</h3>
<div>
<p>
<h2>This is an example of multi colour border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করেFile name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
পৃথক বর্ডার ( Individual Border )
কোন HTML উপাদানের চারপাশের বর্ডার এর স্টাইল, ওয়াইডথ এবং কালার এ সবই ভিন্ন হতে পারে।এ এধরণের বর্ডার তৈরির ক্ষেত্রে উপরের দিকের বর্ডারের জন্য Declaration করতে হবে, border-top:dotted 8px #F00 ; ডান দিকের বর্ডারের জন্য Declaration করতে হবে, border-right:dashed 6px #F60 ; নিচের দিকের বর্ডারের জন্য Declaration করতে হবে, border-bottom:double 6px #C09; বাম দিকের বর্ডারের জন্য Declaration করতে হবে, border-left:solid 5px #960;।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
div{
border-top:dotted 8px #F00 ;
border-right:dashed 6px #F60 ;
border-bottom:double 6px #C09;
border-left:solid 5px #960;}
</style>
</head>
<body >
<div>
<p>
<h2>This is an example of individual style border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
div{
border-top:dotted 8px #F00 ;
border-right:dashed 6px #F60 ;
border-bottom:double 6px #C09;
border-left:solid 5px #960;}
</style>
</head>
<body >
<div>
<p>
<h2>This is an example of individual style border</h2>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটিMozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
মার্জিন (Margin)
বিভিন্ন HTML উপাদানের চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য মার্জিন ব্যবহার করা হয়।এজন্য CSS এ margin Property ব্যবহার করা হয়। সাধারণভাবে কোন HTMLউপাদানের চারপাশে সমান পরিমান মার্জিন তৈরি করার জন্য Declaration করতে হয় margin:15px; এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।যদি উপরের দিকে মার্জিন দিতে হয় তাহলে Declaration করতে হবে margin-top:20px;নিচের দিকে মার্জিন দেয়ার জন্য Declarationকরতে হবে margin-bottom:25px; বাম দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-left:30px; ডান দিকে মার্জিন দেয়ার জন্য Declaration করতে হবে margin-right:35px;।চারদিকের মার্জিন একইসাথে Declaration করা যায় যেমন margin:20px 25px 30px 35pxএখানে 20px উপরের দিকের মার্জিন নির্দেশ করে, 25px ডান দিকের মার্জিন নির্দেশ করে, 30px নিচের দিকের মার্জিন নির্দেশ করে, 35px বাম দিকের মার্জিন নির্দেশ করে।
অনুশীলন প্রজেক্ট
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3,div{border-style:solid; border-color:rgb(240,060,155);}
#auto{margin-left:auto;}
#px{margin-left:50px;}
#cm{margin-left:3cm;}
#pt{ margin-left:120pt;}
#per{ margin-left:25%;}
div{margin:20px 25px 30px 35px; }
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left margin.</h3>
<h3 id="px">This is an example of 50px left margin.</h3>
<h3 id="cm">This is an example of 3cm left margin.</h3>
<h3 id="pt">This is an example of 120 pt left margin.</h3>
<h3 id="per">This is an example of 25% left margin.</h3>
<div>
<h2>This is an example of multi margin.</h2>
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3,div{border-style:solid; border-color:rgb(240,060,155);}
#auto{margin-left:auto;}
#px{margin-left:50px;}
#cm{margin-left:3cm;}
#pt{ margin-left:120pt;}
#per{ margin-left:25%;}
div{margin:20px 25px 30px 35px; }
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left margin.</h3>
<h3 id="px">This is an example of 50px left margin.</h3>
<h3 id="cm">This is an example of 3cm left margin.</h3>
<h3 id="pt">This is an example of 120 pt left margin.</h3>
<h3 id="per">This is an example of 25% left margin.</h3>
<div>
<h2>This is an example of multi margin.</h2>
<p>
We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
</div></body></html>
একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।
আজ এখানেই শেষ করছি, ভালো থাকুন সুস্থ থাকুন।
