How to CSS tutorial in Bangla | Best Tips Bangla

How to CSS tutorial in Bangla

এই আর্টিকেলটি পড়ার জন্য আপনাকে অনেক ধন্যবাদ। অনুগ্রহ করে আপনার মতামত দিন এবং এটি আপনার বন্ধুদের এবং পরিবারের সাথে শেয়ার করুন।

এই ওয়েবসাইটটি কোনও অবৈধ সামগ্রী প্রচার করে না, কোনও ধরণের অবৈধ কার্যকলাপকে উৎসাহ দেয় না। এই ওয়েবসাইটটি দরাবরাহিত সমস্ত আর্টিকেল কেবল মাত্র শিক্ষামূলক উদ্দেশ্যে করা হয়েছে।

সিএসএস কি?

Cascading Style Sheet এর সংক্ষিপ্ত রূপ হচ্ছে CSS । সহজ ভাষায় ওয়েব পেজের বিভিন্ন উপাদানের গঠন, আকার, আকৃতি, অবস্থান, রং, গতিশীলতা ইত্যাদি নির্ধারণের সহজ কৌশল হচ্ছে CSS ।

সিএসএস কেন প্রয়োজন?

একটা সময় ছিল যখন শুধুমাত্র HTML দিয়েই একটি ওয়েব সাইটের ডিজাইন করা হতো । সে সময়ে ডিজাইন বলতে একটা ওয়েব পেজের বিভিন্ন ফন্ট এর কালার, সাইজ, টেবিলের বিভিন্ন সেলের কালার, পুরো পৃষ্ঠার ব্যাকগ্রাউন্ড কালার, এবং প্রয়োজনীয় ইমেজ সংযোজনকে বোঝানো হতো। এবং প্রতিটা পেজের প্রতিটা উপাদানের জন্যই আলাদা আলাদাভাবে কালার, সাইজ নির্ধারণ করতে হতো। যা ছিল একটা জটিল প্রক্রিয়া, এবং সময় সাপেক্ষ ব্যাপার । বর্তমানে যদি একটা ওয়েব সাইটে ১০০০ বা এর অধিক একই ধরনের পেজ থাকে তাহলেও একটি মাত্র CSS স্ক্রিপ্ট ব্যবহার করে ডিজাইন সম্পূর্ণ করা হয়।

ফন্ট ট্যাগ

HTML এর মাধ্যমে কোন ডকুমেন্টকে সুন্দরভাবে উপস্থাপন করার জন্য <font> বা ফন্ট ট্যাগ খুবই গুরুত্বপূর্ণ ভূমিকা পালন করে।<font size="5" face="Tahoma" color="red"> Bangladesh is a beautiful country.</font> এখানে size="5" অংশটি হল font ট্যাগের একটি এট্রিবিউট, যা প্রকাশ করছে ইলিমেন্ট অর্থাৎ Bangladesh is a beautiful country. লেখাটির সাইজ কেমন হবে। এছাড়া face="Tahoma" প্রকাশ করছে লেখাটির font হবে Tahoma এবং color="red" দ্বারা প্রকাশ করছে লেখাটির রং হবে লাল।

উদাহরণ প্রোগ্রাম

<html>
<head>
<title> www.tutohost.com</title>
</head>
<body bgcolor=" green">
<font size="2" face="Verdana">
This is a paragraph.
</font>
<br />
<font size="5" face="Tahoma" color="red" >
Bangladesh is a beautiful country.
</font>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে পাশে প্রদর্শিত ছবির মত দেখাবে।

ক্লাস সিলেক্টর

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>

.mar{color: #C03;
font-size:36px}
</style>

</head>
<body >
<h1>tutorialbd.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>
</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>
</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>

একটা নোটপ্যাড 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>
</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>

একটা নোটপ্যাড 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 সমূহ রাখা হয়। যেমন

ইমবেডেড স্টাইল শীটকে ইন লাইন স্টাইল শীটও বলা হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> Selectors</title>

<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;}

স্টাইল সিটটিকে 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 ট্যাগের স্টাইল নির্ধারণের জন্য ইনলাইন স্টাইল শীট ব্যবহার করা উচিৎ ।

ইন-লাইন স্টাইল শীট

অনুশীলন প্রজেক্ট

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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

কখন ইন-লাইন স্টাইল শীট ব্যবহার করা উচিৎ

টেক্সট (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>
</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>

একটা নোটপ্যাড 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>
</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>

একটা নোটপ্যাড 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>
</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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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;}
#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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

লিস্ট (List)

ওয়েব পেজে তথ্য উপস্থাপনার একটি অন্যতম পদ্ধতি লিষ্ট । CSS দ্বারা তিন ধরণের লিস্ট তৈরি করা যায়, একটি হচ্ছে অর্ডার লিস্ট এবং অপরটি হচ্ছে আনঅর্ডার লিস্ট । অর্ডার লিস্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে, আন অর্ডার লিস্টে প্রতিটা লাইনের সামনে ছোট বৃত্তাকার বা বর্গাকার চিহ্ন থাকে। এছাড়া লিস্টে যেকোন সিম্বলের পরিবর্তে ছোট আকারের ইমেজ ব্যবহার করা যায়।

অর্ডার লিস্ট (Ordered List)

অর্ডার লিস্টে বিভিন্ন তথ্যকে পর্যায়ক্রমিকভাবে সাজিয়ে উপস্থাপন করা হয় এবং প্রতিটা লাইনের শুরুতে ক্রমিক সংখ্যা থাকে।অর্ডার লিস্ট বেশ কয়েক ধরণের হতে পারে। যেমন এ্যালফাবেটিক, ডেসিমাল, রোমান ইত্যাদি। এ্যালফাবেটিক স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:upper-alpha; অথবা list-style-type:lower-alpha; । ডেসিমাল স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:decimal; রোমান স্টাইল লিস্ট তৈরি করার জন্য Declaration করতে হবে list-style-type:upper-roman; অথবা list-style-type:lower-roman;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
h1{color:#F00;}
#alphabet {list-style-type:lower-alpha;}
#decimal {list-style-type:decimal;}
#roman {list-style-type:lower-roman; }
</style>
</head>
<body >
h1>Ordered list</h1>
<h3>Alphabet Type list</h3>
<ol id="alphabet">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<h3>Number Type list</h3>
<ol id="decimal">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<h3>Roman Number Type list</h3>
<ol id="roman">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ol>
</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>

একটা নোটপ্যাড 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>

কার্যপ্রণালী

imstyle নামে একটা folder তৈরি করে তার মধ্যে images নামে নতুন একটা folder তৈরি করতে হবে। images folder এর মধ্যে যে ইমেজটি লিস্টে প্রদর্শন করা হবে তা রাখতে হবে।এই প্রজেক্টটিতে b.png নামে একটা ইমেজ ব্যবহার করা হয়েছে।ইমেজটির ডাউনলোড লিংক https://tutorialbd.com/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;
}

এখানে মূল টেবিল, টেবিলের প্রতিটা সারি এবং প্রতিটা সেল এর জন্য একই স্ট্যাইলের বর্ডার নির্ধারণ করা হয়েছে।

অনুশীলন প্রজেক্ট

<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;
}

এখন যদি স্টাইল শীটে উপরের কোড টুকু যুক্ত করা হয় তাহলে টেবিলটি দেখতে সাধারণ টেবিলের মত হবে এবং Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

টেবিল ওয়াইডথ এন্ড হাইট (Table Width and Height)

টেবিল ডিজাইনের ক্ষেত্রে যে বিষয়টি প্রথমে চিন্তা করতে হয়, তা হচ্ছে টেবিলটি কতটুকু চওড়া হবে এবং এর উচ্চতা কতটুকু হবে, টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল কেমন হবে। টেবিলের চওড়া কেমন হবে এবং এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

table
{
width:300px; height:100px;
}

মানসমূহ px তথা পিক্সেলে অথবা পেজের শতকরা হিসেবে দেয়া যেতে পারে।যেমন,

table
{
width:50%; height:20%;
}

শতকরা হিসেবে মান দিলে মনিটরের সাইজ অনুসারে টেবিলের আকার পরিবর্তিত হবে কিন্তু পিক্সেলে মান দিলে কোন পরিবর্তন হবে না।
টেবিল হেডার তথা প্রথম সারির প্রতিটা সেল এর উচ্চতা নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

th
{
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;
}

th
{
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>

একটা নোটপ্যাড 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;

}

ডানে রাখতে হলে Declaration করতে হবে text-align:left;
মাঝখানে রাখতে হলে Declaration করতে হবে text-align:center;

এখন যদি প্রতিটা সেলের টেক্সট সমূহের ভার্টিক্যাল এলাইনমেন্ট অর্থাৎ প্রতিটা সেলের মধ্যে টেক্সট সমূহ উপরের দিকে থাকবে না নিচের দিকে থাকবে অথবা মাঝামাঝি অবস্থানে থাকবে কিনা নির্ধারণ করতে হয় তাহলে Declaration এ vertical-align নির্ধারণ করে দিতে হবে।টেক্সট সমূহ নিচের দিকে রাখার জন্য Declaration করতে হবে,

td
{
vertical-align:bottom;
}

অনুশীলন প্রজেক্ট

একটা নোটপ্যাড 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;
}

টেবিলের প্রতিটা সেলের ব্যকগ্রাউন্ড কালার নির্ধারণের জন্য স্টাইল শীটে লেখতে হবে,

td
{
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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড 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>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্যাডিং (Padding)

বিভিন্ন HTML উপাদানের যদি বর্ডার থাকে, তাহলে বর্ডার থেকে কনটেন্ট এর চারপাশে কতটুকু স্থান ফাঁকা থাকবে তা নির্দেশ করার জন্য প্যাডিং ব্যবহার করা হয। প্যাডিং মূলত বিভিন্ন HTML উপাদানের ব্যকগ্রাউন্ড এরিয়া বৃদ্ধি করে থাকে । প্যাডিং ব্যবহার করার জন্য CSS এ padding Property ব্যবহার করা হয়। সাধারণভাবে কোন HTML উপাদানের চারপাশে সমান পরিমান প্যাডিং তৈরি করার জন্য Declaration করতে হয় padding:15px;এর অনুরূপ।এখানে px এর পরিবর্তে cm, pt, auto, % ব্যবহার করা যায়।যদি উপরের দিকে প্যাডিং দিতে হয় তাহলে Declaration করতে হবে padding-top:20px; নিচের দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-bottom:25px; বাম দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-left:30px; ডান দিকে প্যাডিং দেয়ার জন্য Declaration করতে হবে padding-right:35px;।চারদিকের প্যাডিং একইসাথে Declaration করা যায় যেমন padding: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{padding-left:auto;}
#px{padding-left:50px;}
#cm{padding-left:3cm;}
#pt{padding-left:120pt;}
#per{padding-left:25%}
div{padding:20px 25px 30px 35px; }
</style>
</head>
<body >
<h3 id="auto">This is an example of auto left padding.</h3>
<h3 id="px">This is an example of 50px left padding.</h3>
<h3 id="cm">This is an example of 3cm left padding.</h3>
<h3 id="pt">This is an example of 120 pt left padding.</h3>
<h3 id="per">This is an example of 25% left padding.</h3>
<div>
<h2>This is an example of multi padding.</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

আউট লাইন এবং আউট লাইন স্টাইল

বর্ডার এর অনূরূপ ওয়েব পেজের অপর একটি গুরুত্বপূর্ণ উপাদান আউট লাইন।এইচ টি এম এল এবং সি এস এস ব্যবহার করে টেমপ্লেট ডিজাইন করার সময় বিভিন্ন মেসেজ বক্স, সাইডবার ইত্যাদি ডিজাইনের ক্ষেত্রে আউট লাইন ব্যবহার করা হয়।সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন তৈরি করা যায়।

বিভিন্ন ধরণের আউট লাইন তৈরির ক্ষেত্রে বেশ কিছু বিষয়ের উপর কাজ করতে হয়। এগুলো হচ্ছে,

আউট লাইন স্টাইল (Outline Style)
আউট লাইন ওয়াইডথ (Outline Width)
আউট লাইন কালার (Outline Color)

আউট লাইন স্ট্যাইল

আউট লাইন স্ট্যাইল নির্দেশ করে আউট লাইনটি দেখতে কেমন হবে।আউট লাইন স্ট্যাইল তৈরির জন্য Declaration করতে হবে, outline-style:dotted; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন তৈরি করা যায়। ডটেড স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:dotted; ড্যাসেড স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:dashed; ডাবল স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:double; গ্রোভ স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:groove; রিডজ স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:ridge; ইনসেট স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:inset; আউটসেট স্ট্যাইল আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-style:outset;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h3{border:solid #666 10px;}
#dotted{outline-style:dotted;}
#dashed{outline-style:dashed;}
#double{outline-style:double;}
#groove{outline-style:groove;}
#ridge{outline-style:ridge;}
#inset{outline-style:inset;}
#outset{ outline-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted outline.</h3>
<h3 id="dashed">This is an example of dashed outline.</h3>
<h3 id="double">This is an example of double outline.</h3>
<h3 id="groove">This is an example of groove outline.</h3>
<h3 id="ridge">This is an example of ridge outline.</h3>
<h3 id="inset">This is an example of inset outline.</h3>
<h3 id="outset">This is an example of outset outline.</h3>
</body>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

আউট লাইন ওয়াইডথ (Outline Width)

আউট লাইন ওয়াইডথ নির্দেশ করে আউট লাইনটি কতটা মোটা হবে।আউট লাইন ওয়াইডথ নির্ধারণের জন্য Declaration করতে হবে, outline-width:thin; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন ওয়াইডথ নির্ধারণ করা যায়।থিন আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:thin; মিডিয়াম আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:medium; থিক আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:thick; 1px বা ১ পিক্সেল চওড়া আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:1px; 10px বা ১০ পিক্সেল চওড়া আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-width:10px;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
div,h3{border:solid #666 10px; outline:dotted #C30; }
#thin{outline-width:thin;}
#medium{outline-width:medium;}
#thick{outline-width:thick;}
#apx{outline-width:1px;}
#bpx{outline-width:10px;}
div{outline:solid #C30;
outline-width:5px; }
</style>
</head>
<body >
<h3 id="thin">This is an example of thin outline.</h3>
<h3 id="medium">This is an example of mediumoutline.</h3>
<h3 id="thick">This is an example of thick outline.</h3>
<h3 id="apx">This is an example of 1px outline.</h3>
<h3 id="bpx">This is an example of 10px outline.</h3>
<div>
<p>
<h2>This is an example of solid 5px outline.</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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

আউট লাইন কালার (Outline Color)

আউট লাইন কালার নির্দেশ করে আউট লাইনটির রং কেমন হবে।আউট লাইন কালার নির্ধারণের জন্য Declaration করতে হবে, outline-color:yellow; এর অনুরূপ। সি এস এস ব্যবহার করে বিভিন্ন ধরণের আউট লাইন কালার নির্ধারণ করা যায়।হলুদ রঙের আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:yellow; পিংক কালারের আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:pink; rgb পদ্ধতিতেও আউট লাইন কালার রির্ধারণ করা যায়, এ পদ্ধতিতে আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:rgb(240,060,155); hex পদ্ধতিতেও আউট লাইন কালার রির্ধারণ করা যায়, এ পদ্ধতিতে আউট লাইন তৈরির জন্য Declaration করতে হবে, outline-color:#ff0000;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
div,h3{border:solid #666 10px; outline:dashed #C03; padding:5px;}
#yellow{outline-color:yellow;}
#pink{outline-color:pink;}
#rgb{outline-color:rgb(240,060,155);}
#hex{outline-color:#ff0000;}
div{outline:red 10px double}
</style>
</head>
<body >
<h3 id="yellow">This is an example of yellow outline.</h3>
<h3 id="pink">This is an example of pink outline.</h3>
<h3 id="rgb">This is an example of rgb outline.</h3>
<h3 id="hex">This is an example of hex outline.</h3>
<div>
<p>
<h2>This is an example of 10px red double outline.</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

বক্স মডেল (Box Model)

সকল HTML উপাদানকে CSS দ্বারা স্ট্যাইল যুক্ত করার ক্ষেত্রে বক্স হিসেবে বিবেচনা করা হয়।ওয়েব পেজের লে আউট ডিজাইনের ক্ষেত্রে বক্স মডেল খুবই গুরুত্বপূর্ণ।সি এস এস বক্স মডেল প্রকৃত পক্ষে একটা বক্স যা, কোন HTML উপাদানকে আবৃত করে রাখে।

বক্স মডেল তৈরি করার জন্য Declaration এ কয়েকটি প্রপার্টি নির্ধারণ করে দিতে হয়।এগুলো হচ্ছে,

width - ( বক্সের প্রস্থ)
border - ( বর্ডার এর রং, আকার এবং স্ট্যাইল নির্ধারণ করে দিতে হয়।)
padding - ( বক্সের ভেতরে দিকে যে পরিমান ফাঁকা স্থান থাকবে )
margin – ( বক্সের বাইরের দিকে যে পরিমান ফাঁকা স্থান থাকবে)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
}
.info, .success, .warning, .error, .validation {
border: 1px solid;
margin: 10px 0px;
padding:15px 10px 15px 50px;
background-repeat: no-repeat;
background-position: 10px center;
}
.info {
color:#00529B;
background-color: #BDE5F8;
background-image: url('info.png');
}
.success {
color:#4F8A10;
background-color:#DFF2BF;
}
.warning {
color:#9F6000;
background-color:#FEEFB3;
}
.error {
color:#D8000C;
background-color:#FFBABA;
}
div{width:350px;
border:#F5D349 10px solid;
margin:15px;
padding:8px;
background:#FEEFB3;}
</style>
</head>
<body >
<div class="info">Information message.</div>
<div class="success">Successful operation message.</div>
<div class="warning">Warning message.</div>
<div class="error">Error message.</div>
<div>
<p>
<h2 style="color:#C33;">This is an example of Box Model.</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

গ্রুপিং সিলেক্টর (Grouping Selector)

একজন ভাল কোডার বা প্রোগ্রামারের অন্যতম বৈশিষ্ট্য হচ্ছে, তিনি যতোটা সম্ভব কোডকে সক্ষিপ্ত করবেন। গ্রুপিং সিলেক্টর ব্যবহার করে CSS এর কোডকে অনেকাংশে কমানো সম্ভব হয়। অনেক সময় বেশ কিছু HTML উপাদানের জন্য একই ধরণের স্ট্যাইল ব্যবহার করার প্রয়োজন হয়। যেমন h1,h2,p ইত্যাদির জন্য একই color, font-family, text-align ইত্যাদি প্রোপার্টি ব্যবহারের প্রয়োজন হলে সবগুলোর জন্য আলাদা আলাদা ভাবে স্ট্যাইল না করে, একই সাথে সিলেক্টর সমূহকে কমা দিয়ে লিখে স্ট্যাইল নির্ধারণ করলে কোড অনেক কম হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
h1,h2,p{color:#333;
font-family:Tahoma;
text-align:justify;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<h2>Reliable & Fast Web Hosting</h2>
<p>
We are relaibale Bangladeshi hosting provider. The world wide technical and support team is working for your best movement. 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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

নেস্টিং সিলেক্টর (Nesting Selector)

সি এস এস এ একটি সিলেক্টরের অন্তর্ভূক্ত অপর একটি সিলেক্টরের জন্য স্ট্যাইল নির্ধারণ করার ক্ষেত্রে নেস্টিং সিলেক্টর ব্যবহার করা হয়।ধরা যাক স্ট্যাইল শীটে প্যারাগ্রাফ P এর জন্য স্ট্যাইল নির্ধারণ করা হল। rap নামের id বিশিষ্ট্য একটা div উপাদানের মধ্যে অপর একটা প্যারাগ্রাফ আছে। rap এর জন্যও স্ট্যাইল নির্ধারণ করা হল। এখন যদি rap মধ্যে অবস্থিত প্যারাগ্রাফটির জন্য অলাদা স্ট্যাইল তৈরি করার প্রয়োজন হয় তাহলে নেস্টিং সিলেক্টর ব্যবহার করতে হয়। এজন্য সিলেক্টরে লিখতে হবে rap p।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
p{color:#333;
font-family:Tahoma;
text-align:justify;}
#rap{
background:#00bbaa;
padding:15px;}
#rap p{color:#F00;}
</style>
</head>
<body >
<p>www.tutohost.com</p>
<h2>Reliable & Fast Web Hosting</h2>
<p>
We are relaibale Bangladeshi hosting provider. The world wide technical and support team is working for your best movement. We are dedicated with client requrement. </p>
<div id="rap">
<h2>24/7 World Class Support</h2>
<p>Reliable and fast server is here. You will get 99.99% uptime guaranty. Many Bangladeshi techie people have no ability to make their site with huge taka. So we are also offering Free hosting plan.</p>
</div>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ডাইমেনশন (Dimention)

কোন HTML উপাদানের প্রস্থ এবং উচ্চতা নিয়ন্ত্রণের জন্য সি এস এস এ ডাইমেনশন ব্যবহার করা হয়।সি এস এস এ ডাইমেনশন নির্ধারণের জন্য বেশ কিছু প্রোপার্টি ব্যবহার করা হয়।এগুলো হচ্ছে, height, width, max-height, max-width, min-width, min-height।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
h2{height:50px;
background:#C30;}
p{max-height:100px;
max-width:250px;
background:#C03}
h3{background:#C60;
margin-left:150px;}
#main{min-height:350px;
min-height:250px;
background:#F99;
padding:10px;}
</style>
</head>
<body >
<h2>This is an example of Box Model.</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>
<h3>24/7 World Class Support</h3>
<p id="main">Reliable and fast server is here. You will get 99.99% uptime guaranty. Many Bangladeshi techie people have no ability to make their site with huge taka. So we are also offering Free hosting plan.</p>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রদর্শন পদ্ধতি (display)

সি এস এস এ ডিসপ্লে প্রোপার্টি প্রকাশ করে কোন একটা উপাদান কিভাবে প্রদর্শিত হবে।ডিসপ্লে প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে সবচেয়ে বেশি ব্যাবহৃত হয়,

ডিসপ্লে নান -(display:none)
ডিসপ্লে ইন লাইন -(display:inline)
ডিসপ্লে ব্লক – (display:block)

ডিসপ্লে নান -(display:none)

কোন বিশেষ উপদানকে প্রদর্শন না করার জন্য ডিসপ্লে নান ব্যবহার করা হয়, এজন্য Declaration করতে হয় display:none;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
#none{width:265px;
background:#F30;
padding:10px;}
#none:hover{display:none;}
</style>
</head>
<body >
<h2>www.tutohost.com</h2>
<div id="none">
<h1>Please Touch Me.</h1></div>
<h2>We are bangladeshi Hostgator hosting provider.</h2>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ডিসপ্লে ইন লাইন - (display:inline)

সি এস এস এর মাধ্যমে HTML উপাদান সমূহকে একই লাইনে প্রদর্শনের জন্য ডিসপ্লে ইন লাইন ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় নেভিগেশন বারে। HTML উপাদান সমূহকে একই লাইনে প্রদর্শনের জন্য Declaration করতে হয় display:inline; এর অনুরূপ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
li{display:inline;
background:#C06;
color:#FFC;
padding:10px;}
a{color:#FCC;
font-size:24px;}
</style>
</head>
<body >
<ul>
<li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li>
<li><a href="http://tutohost.com/bangla/css/" target="_blank">CSS</a></li>
<li><a href="http://www.tutohost.com" target="_blank">PHP</a></li>
<li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li>
</ul>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ডিসপ্লে ব্লক (display:block)

সি এস এস এর মাধ্যমে HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য ডিসপ্লে ব্লক ব্যবহার করা হয়। এটা মূলত সবচেয়ে বেশি ব্যাবহৃত হয় ভার্টিক্যাল নেভিগেশন বারে, তথা সাইডবার নেভিগেশন বারে। HTML উপাদান সমূহকে একই কলামে প্রদর্শনের জন্য Declaration করতে হয় display:block; এর অনুরূপ।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
li{display:block;
background:#C06;
color:#FFC;
padding:10px;
width:140px;
border:#600 solid 1px;}
a{color:#FCC;
font-size:24px;}
</style>
</head>
<body >
<ul>
<li><a href="http://tutohost.com/bangla/html/" target="_blank">HTML</a></li>
<li><a href="http://tutohost.com/bangla/css/" target="_blank">CSS</a></li>
<li><a href="http://www.tutohost.com" target="_blank">PHP</a></li>
<li><a href="http://www.tutohost.com" target="_blank">Wordpress</a></li>
</ul>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ভিজিবিলিটি (visibility)

কোন উপাদানকে প্রদর্শন করা হবে কি না তা নির্দেশ করার জন্য সি এস এস এ ভিজিবিলিটি প্রোপার্টি ব্যবহার করা হয়।যেমন কোন উপাদানকে প্রদর্শন করার জন্য Declaration করতে হয় visibility:visible; । কোন উপাদানকে প্রদর্শন না করার জন্য Declaration করতে হয়, visibility:hidden; । ভিজিবিলিটি প্রোপার্টির বেশ কিছু value হতে পারে, এদের মধ্যে উল্লেখযোগ্য হচ্ছে,

ভিজিবিলিটি হিডেন – (visibility:hidden)
ভিজিবিলিটি ভিজিবল – (visibility:visible)
ভিজিবিলিটি কলাপস্ –(visibility:collapse)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
#hide{width:245px;
background:#F30;
visibility:hidden; }
#show{width:245px;
background:#F30;
visibility:visible;}
</style>
</head>
<body >
<h2>Hidden Text & Visible Text.</h2>
<div id="hide">
<h1>Hidden Text.</h1></div>
<div id="show">
<h1>Visible Text.</h1></div>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ভিজিবিলিটি হিডেন – (visibility:hidden)

ডিসপ্লে নান -(display:none) এবং ভিজিবিলিটি হিডেন – (visibility:hidden;)উভই HTML উপাদানকে লুকানোর জন্য ব্যবহার করা হয়।কিন্তু উভয়ের মধ্যে পার্থক্য রয়েছে। কোন HTML উপাদানের জন্য CSS এ visibility:hidden; করলে HTML উপাদানটি প্রদর্শিত হয় না ঠিকই কিন্তু HTML উপাদানটি সমপরিমান স্থান ফাঁকা রাখে। কিন্তু কোন HTML উপাদানের জন্য CSS এ display:none;করলে HTML উপাদানটি প্রদর্শিত হয় না এবং কোন ফাঁকা স্থান তৈরি হয় না।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;}
#none{width:245px;
background:#C6C; }
#none:hover{display:none;}
#hidde{width:245px;
background:#F30; }
#hidde:hover{visibility:hidden;}
</style>
</head>
<body >
<div id="none"><h1>Please touch me.</h1></div> <br /><br />
<div id="hidde">
<h1>Please touch me.</h1></div>
<h2>Please touch me.</h2>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

কোডিং বিশ্লেষণ:

উপরের Please Touch Me. টেক্সটির উপর মাউস নিয়ে গেলে তা অদৃশ্য হয়ে যায় এবং তার নিচের টেক্সটটি উপরে উঠে আসে। কারণ এ টেক্সটিতে display:none; ব্যবহার করা হয়েছে।

মাঝের Please Touch Me. টেক্সটির উপর মাউস নিয়ে গেলে তা অদৃশ্য হয়ে যায়। কিন্তু লেখাটির সমপরিমান স্থান ফাঁকা থাকে। কারণ এ টেক্সটিতে visibility:hidden; ব্যবহার করা হয়েছে।

ভিজিবিলিটি কলাপস্ – (visibility:collapse)

সাধারণত কোন টেবিলের কোন সাড়ি বা কলাম কে অদৃশ্য করার জন্য ভিজিবিলিটি কলাপস্ ব্যবহার করা হয়। এজন্য Declaration করতে হয় visibility:collapse; ।এটা অনেকটা display:none এর মত কাজ করে থাকে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
table{border:1px #C00 solid;
font-size:24px;}
td{border:1px #C00 solid;
background:#F63;
color:#CFF; }
tr.col:hover{visibility:collapse;}
</style>
</head>
<body >
<table>
<tr>
<td>HTML</td>
<td>CSS</td>
<td>PHP</td>
</tr>
<tr class="col">
<td>Text</td>
<td>Audio</td>
<td>Video</td>
</tr>
</table>
<h2>Please put your mouse pointer on text/audio/video.</h2>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

অবস্থান (Positioning)

ওয়েব পেজে বিভিন্ন HTML উপাদান সমূহ কোথায় কিভাবে প্রদর্শিত হবে তা প্রকাশ করার জন্য position প্রোপার্টি ব্যবহার করা হয়। এর সাথে top, bottom, left, and right প্রোপার্টি সমূহ ব্যবহার করে কোন HTML উপাদানের প্রকৃত অবস্থান নির্ধারণ করা হয়। position প্রোপার্টির চার ধরণের মান হতে পারে। এগুলো হচ্ছে,

পজিশন স্ট্যাটিক (position:static)
পজিশন ফিক্সড (position:fixed)
পজিশন রিলেটিভ (position:relative)
পজিশন এবসলিউট (position:absolute)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h1 {
color:#F09;
background:#CC9;
padding:10px;
border:#960 1px solid; }
#static{
position:static;
left:100px;
top:70px;}
#absolute{position: absolute;
left:150px;
top:100px;}
#fixed{position: fixed;
left:0px;
top:70px;}
#relative{position: relative;
left:150px;
top:100px;}
p{background:#FCF;
padding:10px;
border:#F09 1px solid;}
</style>
</head>
<body >
<h1 id="static">Position static</h1>
<h1 id="absolute">Position absolute</h1>
<h1 id="fixed">Position fixed</h1>
<h1 id="relative">Position relative</h1>
<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.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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

পজিশন স্ট্যাটিক (position:static)

কোন একটি HTML উপাদানের পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়; তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করবে। এক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ ডিক্লারেশন করলেও এ অনুযায়ী কোন কাজ হবে না; অর্থাৎ top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় হয়ে যাবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;}
h1{color:#F06;
background:#CC9;
border:#960 1px solid;
padding:10px;
position:static;
top:30px;
leftt:5px; }
p{ margin-top:100px;
background:#FCF;
border:#F0F 1px solid;
padding:10px;
text-align:justify;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<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.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. 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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

পজিশন ফিক্সড (position:fixed)

কোন একটি HTML উপাদানকে মনিটর স্ক্রিনের সাপেক্ষে কোন নির্দিষ্ট স্থানে স্থিরভাবে স্থাপন করার জন্য পজিশন ফিক্সড ব্যবহার করা হয়। এজন্য প্রথমে position:fixed; ডিক্লারেশন করে, এর পর top, bottom, left, and right প্রোপার্টি সমূহ ডিক্লারেশন করতে হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background: #FFC}
h1{color:#F06;
background:#CC9;
border:#960 1px solid;
padding:10px;
position:fixed;
top:30px;
leftt:5px; }
p{ margin-top:100px;
background:#FCF;
border:#F0F 1px solid;
padding:10px;
text-align:justify;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<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.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. 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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

পজিশন রিলেটিভ (position:relative)

HTML উপাদান সমূহের স্বাভাবিক অবস্থানের সাপেক্ষে top, bottom, left, and right প্রোপার্টি ব্যবহারের মাধ্যমে কোন বস্তুর অবস্থান নির্ধারণের জন্য রিলেটিভ পজিশন প্রোপার্টি ব্যবহার করা হয়। পজিশন প্রোপার্টি যদি স্ট্যাটিক করে দেওয়া হয়, তাহলে তা HTML উপাদান সমূহের সাধারণ এবং স্বভাবিক পজিশন নির্দেশ করে, কিন্তু পজিশন রিলেটিভ এবং পজিশন স্ট্যাটিক প্রোপার্টির মধ্যে পার্থক্য হচ্ছে পজিশন স্ট্যাটিক প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহ নিস্ক্রিয় থাকে; আর পজিশন রিলেটিভ প্রোপার্টির ক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমেই কোন বস্তুর অবস্থান নির্দেশ করা হয়।

পজিশন রিলেটিভ প্রোপার্টির ক্ষেতে সকল হিসাব শুরু হয় ঐ উপাদানটির স্বাভাবিক অবস্থান থেকে। অর্থাৎ পজিশনিং না করা হলে উপাদানটি যে স্থানে অবস্থান করতো সেখান থেকে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC; }
h3 {
color:#F09;
background:#CC9;
padding:10px;
border:#960 1px solid;
width:370px; }
#right{position:relative;
left:100px;}
#left{position:relative;
right:100px; }
#down{position:relative;
top:150px;}
</style>
</head>
<body >
<h1>Normal Position</h1>
<h1 id="right">Position 100px right from Normal Position. </h1>
<h1 id="left">Position 100px left from Normal Position. </h1>
<h1 id="down">Position 150px down from Normal Position.</h1>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

পজিশন এবসলিউট (position:absolute)

HTML উপাদান সমূহের প্রকৃত অবস্থান নির্ধারণের জন্য পজিশন এবসলিউট প্রোপার্টি ব্যবহার করা হয়। কোন একটি HTML উপাদানের পজিশন প্রোপার্টি যদি এবসলিউট করে দেওয়া হয় তাহলে তার অবস্থান স্বভাবিক ক্রমে নির্দেশিত হয় না, এক্ষেত্রে top, bottom, left, and right প্রোপার্টি সমূহের মাধ্যমে ঐ উপাদানটির অবস্থান নির্ধারিত হয়। এক্ষেত্রে অন্য একটি উপাদানের উপরেও ওভারল্যাপ করে ঐ উপাদানটির অবস্থান নির্ধারণ করা সম্ভব হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h1
{position:absolute;
left:100px;
top:70px;
color:#F09;
background:#CC9;
padding:10px;
border:#960 1px solid;
}
p{background:#FCF;
padding:10px;
border:#F09 1px solid;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<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.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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ওভার ফ্লো (Overflow)

top, left, height,width, padding, border ইত্যাদি প্রোপার্টি ব্যবহার করে একটি বক্স ডিজাইন করার পর যদি বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির চেয়ে ছোট হয়, তাহলে বাড়তি কনটেন্ট কিভাবে প্রদর্শিত হবে তা ওভার ফ্লো প্রোপার্টির মাধ্যমে নির্ধারণ করা হয়। ওভার ফ্লো প্রোপার্টির বেশ কিছু মান হতে পারে তার মধ্যে উল্লেখযোগ্য হচ্ছে,

ওভার ফ্লো ভিজিবল (overflow:visible)
ওভার ফ্লো হিডেন (overflow:hidden)
ওভার ফ্লো অটো (overflow:auto)
ওভার ফ্লো স্ক্রল(overflow:scroll)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
border:#F09 1px solid;}
#visible{overflow:visible;
margin-bottom:60px;}
#hidden{overflow:hidden;}
#auto{overflow:auto;}
#scroll{overflow:scroll;}
</style>
</head>
<body >
<h3> This is an example of visible overflow</h3>
<p id="visible">
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.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement. </p>
<h3> This is an example of hidden overflow</h3>
<p id="hidden">
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.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p>
<h3> This is an example of auto overflow</h3>
<p id="auto">
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.We are bangladeshi Hostgator hosting provider. The world wide technical and support team is working for your best movement.</p>
<h3> This is an example of scroll overflow</h3>
<p id="scroll">
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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ওভার ফ্লো ভিজিবল (overflow:visible)

ওভার ফ্লো প্রোপার্টির মান ভিজিবল করলে top, left, height,width, padding, border ইত্যাদি প্রোপার্টি ব্যবহার করে একটি বক্স ডিজাইন করার পর যদি বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির চেয়ে ছোট হয়, তাহলে বাড়তি কনটেন্ট বক্সের বাইরে প্রদর্শিত হবে।

যেমন একটা p এর জন্য বক্স ডিজাইন করা হল এখন এর অন্তর্ভূক্ত টেক্সট এর এরিয়া বক্সের এরিয়া এর চেয়ে বড় হলে এর স্টাইল সিটে ওভার ফ্লো প্রোপার্টির মান ভিজিবল (overflow:visible;) করলে বাড়টি টেক্সট এর ওভার ফ্লো ভিজিবল হবে, অর্থাৎ বক্সের বাইরে প্রদর্শিত হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
border:#F09 1px solid;}
#visible{overflow:visible;}
</style>
</head>
<body >
<h3> This is an example of visible overflow</h3>
<p id="visible">
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.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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ওভার ফ্লো হিডেন (overflow:hidden)

ওভার ফ্লো প্রোপার্টির মান হিডেন করলে top, left, height,width, padding, border ইত্যাদি প্রোপার্টি ব্যবহার করে একটি বক্স ডিজাইন করার পর যদি বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির চেয়ে ছোট হয়, তাহলে বাড়তি কনটেন্ট প্রদর্শিত হবে না।

যেমন একটা p এর জন্য বক্স ডিজাইন করা হল এখন এর অন্তর্ভূক্ত টেক্সট এর এরিয়া বক্সের এরিয়া এর চেয়ে বড় হলে এর স্টাইল সিটে ওভার ফ্লো প্রোপার্টির মান হিডেন (overflow:hidden;) করলে বাড়টি টেক্সট এর ওভার ফ্লো হাইড হবে, অর্থাৎ বাড়টি টেক্সট প্রদর্শিত হবে না।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
border:#F09 1px solid;}
margin-bottom:60px;}
#hidden{overflow:hidden;}
</style>
</head>
<body >
<h3> This is an example of hidden overflow</h3>
<p id="hidden">
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.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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ওভার ফ্লো অটো (overflow:auto)

ওভার ফ্লো প্রোপার্টির মান অটো করলে top, left, height,width, padding, border ইত্যাদি প্রোপার্টি ব্যবহার করে একটি বক্স ডিজাইন করার পর যদি বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির চেয়ে ছোট হয়, তাহলে বক্সের মধ্যে স্ক্রলবার দেখা যাবে এবং বাড়তি কনটেন্ট স্ক্রলবার টেনে দেখা যাবে।আর যদি বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির চেয়ে বড় হয় তাহলে স্ক্রলবার দেখা যাবে না।

যেমন একটা p এর জন্য বক্স ডিজাইন করা হল এখন এর অন্তর্ভূক্ত টেক্সট এর এরিয়া বক্সের এরিয়া এর চেয়ে বড় হলে এর স্টাইল সিটে ওভার ফ্লো প্রোপার্টির মান অটো (overflow:auto;) করলে বক্সের মধ্যে স্ক্রলবার দেখা যাবে বাড়টি টেক্সট স্ক্রলবার টেনে দেখা যাবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
border:#F09 1px solid;}
#auto{overflow:auto;}
</style>
</head>
<body >
<h3> This is an example of auto overflow</h3>
<p id="auto">
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.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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ওভার ফ্লো স্ক্রল (overflow:scroll)

ওভার ফ্লো প্রোপার্টির মান অটো করলে top, left, height,width, padding, border ইত্যাদি প্রোপার্টি ব্যবহার করে একটি বক্স ডিজাইন করার পর বক্সের আকার প্রয়োজনীয় কনটেন্ট এর আকৃতির ছোট বা বড় যাই হোক না কেন বক্সের মধ্যে স্ক্রলবার দেখা যাবে।

যেমন একটা p এর জন্য বক্স ডিজাইন করা হল এখন এর অন্তর্ভূক্ত টেক্সট এর এরিয়া বক্সের এরিয়া এর চেয়ে ছোট বা বড় যাই হোক না কেন স্টাইল সিটে ওভার ফ্লো প্রোপার্টির মান (overflow:scroll) করলে বক্সের মধ্যে স্ক্রলবার দেখা যাবে বাড়টি টেক্সট থাকলে তা স্ক্রলবার টেনে দেখা যাবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
border:#F09 1px solid;}
#scroll{overflow:scroll;}
</style>
</head>
<body >
<h3> This is an example of scroll overflow</h3>
<p id="scroll">
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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.htm, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ক্লিপ (Clip)

কোন HTML উপাদানের সম্পূর্ণ অংশ প্রদর্শন করা হবে, না কোন বিশেষ অংশ প্রদর্শন করা হবে তা নির্দেশ করার জন্য ক্লিপ প্রোপার্টি ব্যবহার করা হয়। এজন্য Declaration করতে হয় clip:rect(20px,200px,200px,20px); এর অনুরূপ। ক্লিপ প্রোপার্টি ব্যবহার করতে হলে সাথে পজিশন এবসলিউট (position:absolute) অবশ্যই ব্যবহার করতে হয়।ক্লিপ প্রোপার্টির দুটি উল্লেখযোগ্য মান হচ্ছে,

অটো ক্লিপ (clip:auto)
রেকটেংগুলার ক্লিপ (clip:ract)

ক্লিপ প্রোপার্টি ব্যবহার করে সহজেই একটি মাত্র ইমেজ ব্যবহার করে কোন বাটনের হোভার ইফেক্ট দেয়া যায়।নিচের উদাহরণটি ক্লিপ প্রোপার্টি ব্যবহার করে তৈরিকৃত একটি ইন্ট্রাকটিভ বাটনের।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
a #clip{
position:absolute;
top:50px;
clip: rect(27 130 69 30);}
a #clip:hover {
position:absolute;
top:50px;
clip:auto;}
</style>
</head>
<body >
<h3> This is an example of clip image.</h3>
<a href="www.tutohost.com"><img id="clip"src="https://tutorialbd.com/css/images/pic/clip.png"/></a>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

অটো ক্লিপ

কোন HTML উপাদানের সম্পূর্ণ অংশ প্রদর্শন করার জন্য ক্লিপ প্রোপার্টি মান অটো ব্যবহার করা হয়। এজন্য Declaration করতে হয় clip:auto; । এটি কোন ইমেজের বা কোন HTML উপাদানের ডিফল্ট ক্লিপ মান।

রেকটেংগুলার ক্লিপ

কোন HTML উপাদানের সম্পূর্ণ অংশ প্রদর্শন না করে বিশেষ কোন অংশ প্রদর্শন করার জন্য ক্লিপ প্রোপার্টি মান রেকটেংগুলার ফরমে দেয়া হয়। এজন্য Declaration করতে হয় clip:rect(20px,100px,200px,30px); এর অনুরূপ। এখানে 20px প্রকাশ করে উপর থেকে কতটুকু অংশ ক্লিপ হবে, 100px প্রকাশ করে বাম থেকে ডানে 100px এর পরের বাঁকী অংশ ক্লিপ হবে, 100px প্রকাশ করে উপর থেকে নিচে 200px এর পরের বাঁকী অংশ ক্লিপ হবে, 30px প্রকাশ করে বাম দিকে শুরু থেকে 30px ক্লিপ হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC}
#auto{
position:absolute;
top:50px;
clip:auto;}
#rect {
position:absolute;
top:350px;
clip:rect(20px,200px,200px,20px);}
</style>
</head>
<body >
<h3> This is an example of auto clip image.</h3>
<img id="auto"src="https://tutorialbd.com/css/images/pic/22cc.png"/>
<h3 style=" position:absolute; top:320px;"> This is an example of rect clip image.</h3>
<img id="rect" src="https://tutorialbd.com/css/images/pic/22cc.png"/>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

জেড ইনডেক্স (Z-index)

পজিশন এবসলিউট (position:absolute) করে এবং top, bottom, left, and right ইত্যাদি প্রোপার্টি ব্যবহার করে একাধিক HTML উপাদানকে পরস্পরের উপর ওভারল্যাপ করা যায়। একাধিক HTML উপাদানকে পরস্পরের উপর ওভারল্যাপ করা কোন উপাদানটি কার উপরে অবস্থান করবে তা জেড ইনডেক্স (Z-index) প্রোপার্টি ব্যবহার করে নির্ধারণ করা হয়। (Z-index) প্রোপার্টির মান হিসেবে আমরা auto এবং কোন সংখ্যা যেমন 1,2,3,-1 প্রভৃতি ব্যবহার করা হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFC;}
h2{color:#ffc;}
h1{color:#F30;}
div{
padding:10px;
border:#000 1px solid;
width:230px;
height:230px;
margin:30px;}
#box1{background:#F00;
position:absolute;
left:20px;
top:20px;
z-index:1; }
#box2{background:#F06;
position:absolute;
left:90px;
top:90px;
z-index:2; }
#box3{background:#F3F;
position:absolute;
left:160px;
top:160px;
z-index:3; }
#box4{background:#F9C;
position:absolute;
left:250px;
top:250px;
z-index:4; }
</style>
</head>
<body >
<h1>This is an example of Z-index.</h1>
<div id="box1"><h2>First box. Z-index 1</h2></div>
<div id="box2"><h2>Second box. Z-index 2</h2></div>
<div id="box3"><h2>Third box. Z-index 3</h2></div>
<div id="box4"><h2>Forth box. Z-index 4</h2></div>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ফ্লোটিং (Floating)

ওয়েব পেজের লে-আউট তৈরির ক্ষেত্রে পেজের বিভিন্ন উপাদানকে ডানদিকে এবং বামদিকে রাখার প্রয়োজন পরে। এক্ষেত্রে ফ্লট (Float) ব্যবহার করা হয়। কোন উপাদানকে বামদিকে স্থাপন করার জন্য Declaration করতে হয় float:left; আর বামদিকে স্থাপন করার জন্য Declaration করতে হয় float:right;।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align:justify;}
div{width:180px;
border:#F5D349 10px solid;
padding:8px;
background:#FEEFB3;
outline:#F60 1px solid;}
#first{float:left;}
#second{float:right;}
</style>
</head>
<body >
<div id="first">
<h2 style="color:#C33;">Float Left <br />First Box.</h2>
<hr>
<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>
<div id="second">
<h2 style="color:#C33;">Float Right<br /> Second Box.</h2>
<hr>
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

বাম দিকে ফ্লট(float:left)

ওয়েব পেজের লে-আউট তৈরির ক্ষেত্রে অনেক সময় সাইডবারকে মূল কন্টেন্ট বক্সের ঠিক বামদিকে রাখার প্রয়োজন পরে।এক্ষেত্রে বাম দিকে ফ্লট করতে হয়। প্রথমে সাইডবারকে রেখে উভয় বক্সকে বাম দিকে ফ্লট করতে হয়। এজন্য উভয় বক্সের জন্য Declaration করতে হয় float:left;। প্রথমে সাইডবারকে রাখার জন্য সাইডবার এর অবস্থান হবে সর্ববামে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align:justify;}
div{width:180px;
height:310px;
margin:3px;
border:#F99 10px solid;
padding:8px;
background:#ddEFB3;
outline:#F60 1px solid;}
#first{float:left;}
#second{float:left;}
</style>
</head>
<body >
<div id="first">
<h2 style="color:#C33;">Sidebar</h2>
<hr>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div>
<div id="second">
<h2 style="color:#C33;">Main Content</h2>
<hr>
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ডান দিকে ফ্লট(float:right)

ওয়েব পেজের লে-আউট তৈরির ক্ষেত্রে অনেক সময় সাইডবারকে মূল কন্টেন্ট বক্সের ঠিক ডানদিকে রাখার প্রয়োজন পরে। বিশেষ করে ওয়ার্ডপ্রেস এর জন্য টেমপ্লেট ডিজাইনের ক্ষেত্রে সাধারণত সাইডবারকে ডান দিকে রাখা হয়। এক্ষেত্রে ডান দিকে ফ্লট করতে হয়। প্রথমে সাইডবারকে রেখে উভয় বক্সকে ডান দিকে ফ্লট করতে হয়, এজন্য উভয় বক্সের জন্য Declaration করতে হয় float:right;। প্রথমে সাইডবারকে রাখার জন্য সাইডবার এর অবস্থান হবে সর্বডানে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align:justify;}
div{width:180px;
height:310px;
margin:3px;
border:#099 10px solid;
padding:8px;
background:#C9F;
outline:#F60 1px solid;}
#first{float:right;}
#second{float:right;}
</style>
</head>
<body >
<div id="first">
<h2 style="color:#C33;">Sidebar </h2>
<hr>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">PHP</a></li>
<li><a href="#">Wordpress</a></li>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Tutorials</a></li>
</ul>
</div>
<div id="second">
<h2 style="color:#033;">Main Content</h2>
<hr>
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ফ্লটিং দ্বারা প্যারাগ্রাফে ইমেজের অবস্থান নির্দেশ

ফ্লোটিং দ্বারা যে ওয়েব পেজের div তথা আয়তাকার খন্ড সমূহ এর অবস্থা নির্ধারণ করা হয় এমনটা নয়, আমরা যখন ওয়েব পেজে কনটেন্ট যুক্ত করি তখন প্যারাগ্রাফের মধ্যে ডানে বা বামে ইমেজ ব্যবহার করে থাকি এক্ষেত্রেও ফ্লোটিং ব্যবহার করা হয়ে থাকে।কোন ইমেজকে যদি কোন প্যারাগ্রাফের সর্ববামে স্থাপন করতে হয় তাহলে প্রথমে ইমেজ ট্যাগ রাখতে হবে এবং তারপর প্যারাগ্রাফ রাখতে হবে এবং শুধুমাত্র ইমেজ ট্যাগের স্ট্যাইল সিটে লেখতে হবে img{float:left;}।অনুরূপভাবে কোন ইমেজকে প্যারাগ্রাফের সর্বডানে স্থাপন করার প্রয়োজন হয় তাহলেও প্রথমে ইমেজ রেখে ইমেজ ট্যাগের স্ট্যাইল সিটে লেখতে হবে img{float:right;}।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
text-align:justify;}
div{width:380px;
margin:3px;
border:#F99 10px solid;
padding:8px;
background:#ddEFB3;
outline:#F60 1px solid;}
img{width:150px; height:150px;
margin:5px;
border:#C30 1px solid;}
#second{float:left;}
#right{float:right;}
#left{float:left;}
</style>
</head>
<body >
<div id="second">
<h2 style="color:#C33;">Main Content</h2>
<hr>
<img id="right" src="https://tutorialbd.com/css/images/pic/22hh.png" width="150px" height="150px" />
<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><br />
<img id="left" src="https://tutorialbd.com/css/images/pic/22hh.png" />
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

এলাইন (Align)

ওয়েব পেজের লে-আউট তৈরির ক্ষেত্রে এলাইন অত্যন্ত গুরুত্বপূর্ণ বিষয়। একটা ওয়েব পেজে ওয়েব সাইটটি কোন দিকে প্রদর্শিত হবে ডান দিকে বাম দিকে না মাঝখানে তা যেমন এলাইন করে নির্ধারণ করা হয়, এছাড়া সাইডবার নেভিগেশন বার, ফুটার, হেডার ইমেজের পজিশনও এলাইন করে নির্ধারণ করা হয়। এলাইন করার বেশ কিছু পদ্ধতি রয়েছে। যেমন;

মার্জিন প্রোপার্টি দ্বারা এলাইন
পজিশন প্রোপার্টি দ্বারা এলাইন
ফ্লট প্রোপার্টি দ্বারা এলাইন

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
font-size:13px;
color:#066;
text-align:justify;}
div{width:200px;
height:250px;
border:#099 10px solid;
padding:8px;
outline:#063 1px solid;}
#rap1{background:#F99;
margin-left:auto;
margin-right:auto;}
#rap2{background:#C9F;
position:absolute;
left:0px;}
#rap3{background:#b0e0e6;
float:right;
right:0px;}
</style>
</head>
<body >
<div id="rap1">
<h2 style="color:#666;">Center align</h2>
<hr>
<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>
<br />
<div id="rap2">
<h2 style="color:#666;">Left align</h2>
<hr>
<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>
<div id="rap3">
<h2 style="color:#666;">Right align</h2>
<hr>
<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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

মার্জিন প্রোপার্টি দ্বারা সেন্টার এলাইন

যে কোন ভাল একটি ওয়েব টেমপ্লেট খেয়াল করলে দেখা যায়, টেমপ্লেটটি ব্রাউজারে প্রদর্শন করলে ঠিক মাঝখানে প্রদর্শন করে, একটা ওয়েব সাইটকে সুন্দর ভাবে প্রদর্শনের জন্য বিষয়টি খুবই গুরুত্বপূর্ণ।মার্জিন প্রোপার্টি ব্যবহার করে সেন্টার এলাইন করার মাধ্যমে এর গুরুত্বপূর্ণ কাজটি করা হয়।কোন ওয়েব সাইটকে ব্রাউজারে ঠিক মাঝখানে প্রদর্শন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হয়, margin-left:auto; margin-right:auto;।

অনুশীলন প্রজেক্ট

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

পজিশন প্রপার্টি দ্বারা লেফট বা রাইট এলাইন

ওয়েব সাইটের টেমপ্লেট এর সৌন্দর্য অনেকাংশে নির্ভর করে সাইডবারের উপর। সাইডবার টিকে সাধারণত সাইটের কনটেন্ট এরিয়ার ডানদিকে অথবা বাম দিকে রাখা হয়। আবার অনেক ক্ষেত্রে একাধিক সাইডবারও ব্যবহার করা হয়।সাইডার এলাইনের বিষয়টিও তাই একজন ওয়েব ডিজাইনারকে বেশ সতর্কতার সাথে করতে হয়। এ কাজটি সঠিকভাবে করা না হলে বিভিন্ন ব্রাউজারে বা বিভিন্ন সাইজের মনিটরে সাইটের সাইডবারের অবস্থান পরিবর্তিত হয়ে যেতে পারে।সাইড বার তথা কোন div উপাদানকে পজিশন প্রোপার্টি ব্যবহার করে লেফট বা রাইট এলাইন করা যায়। লেফট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে position:absolute; left:0px; অনুরূপভাবে রাইট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে position:absolute; right:0px;।

অনুশীলন প্রজেক্ট

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ফ্লট প্রোপার্টি দ্বারা লেফট বা রাইট এলাইন

ফ্লট প্রোপার্টি ব্যবহার করেও সাইড বার তথা কোন div উপাদানকে লেফট বা রাইট এলাইন করা যায়। লেফট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে float:left; left:0px; অনুরূপভাবে রাইট এলাইন করার জন্য স্ট্যাইল সিটে উল্লেখ করতে হবে float:right; right:0px;।

অনুশীলন প্রজেক্ট

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

কার্সার ইফেক্ট (cursor effect)

সি এস এস ব্যবহার করে সহজেই বিভিন্ন উপাদানের জন্য বিভিন্ন ধরণের মাউস এর কার্সার ইফেক্ট তৈরি করা যায়। তাহলে মাউসটিকে ঐ উপাদানের উপর নিয়ে গেলে মাউস পয়েন্টারের আকৃতি পরিবর্তিত হবে।এজন্য স্ট্যাইল শীটে Declaration করতে হবে cursor:move এর অনুরূপ। এখানে move এর পরিবর্তে auto, crosshair, e-resize, move,default,help,n-resize,ne-resize,nw-resize,pointer, wait ,progress,s-resize, se-resize,sw-resize, w-resize ,text ব্যবহার করা যাবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;
font-family:Arial, Helvetica, sans-serif;
color:#066;}
</style>
</head>
<body >
<h2 style="cursor:auto">Touche me and see auto mouse effect</h2>
<h2 style="cursor:help">Touche me and see help mouse effect</h2>
<h2 style="cursor:s-resize">Touche me and see s-resize mouse effect</h2>
<h2 style="cursor:e-resize">Touche me and see e-resize mouse effect</h2>
<h2 style="cursor:progress">Touche me and see progress mouse effect</h2>
<h2 style="cursor:move">Touche me and see move mouse effect</h2>
<h2 style="cursor:crosshair">Touche me and see crosshair mouse effect</h2>
<h2 style="cursor:default">Touche me and see default mouse effect</h2>
<h2 style="cursor:wait">Touche me and see wait mouse effect</h2>
<h2 style="cursor:n-resize">Touche me and see n-resize mouse effect</h2>
<h2 style="cursor:nw-resize">Touche me and see nw-resize mouse effect</h2>
<h2 style="cursor:ne-resize">Touche me and see ne-resize mouse effect</h2>
<h2 style="cursor:pointer">Touche me and see pointer mouse effect</h2>
<h2 style="cursor:se-resize">Touche me and see se-resize mouse effect</h2>
<h2 style="cursor:sw-resize">Touche me and see sw-resize</h2>
<h2 style="cursor:text">Touche me and see text mouse effect</h2>
<h2 style="cursor:w-resize">Touche me and see w-resize mouse effect</h2>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

চাইল্ড সিলেক্টর (child selector)

একটি ভাল সি এস এস স্ট্যাইল শীট তৈরির জন্য চাইল্ড সিলেক্ট বিষয়টি সম্পর্কে প্রোগ্রামারকে অবশ্যই ভাল ধারণা থাকতে হবে।আমরা HTML এ একটি ট্যাগের মধ্যেই অন্য আরো কিছু ট্যাগ ব্যবহার করে থাকি যেমন, <div><h2></h2><p></p></div> এক্ষেত্রে স্ট্যাইল শীটে div এর চাইল্ড সিলেক্টর হবে p এবং h2 । স্ট্যাইল শীটে p এর জন্য চাইল্ড সিলেক্টর লিখতে হবে div>p । তাহলে div>p এর জন্য স্ট্যাইল নির্ধারণ করা হলে শুধুমাত্র p এর জন্যই স্ট্যাইল নির্ধারিত হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
div>p{font-family:Arial, Helvetica, sans-serif;
color:#066;
background:#FCC;
border:#F39 5px solid;
padding:10px;}
</style>
</head>
<body >
<div>
<h2>www.tutohost.com</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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

সিউডো ক্লাস (Psudo Class)

বিভিন্ন উপাদানের অবস্থান, অবস্থা ইত্যাদি সিলেক্টর দ্বারা সিলেক্ট করে, বিশেষ ইফেক্ট দেয়ার জন্য সিউডো ক্লাস ব্যবহার করা হয়।সিউডো ক্লাস এর সিনট্যাক্স হচ্ছে selector:pseudo-class {property:value;} । সি এস এস ক্লাস সিলেক্টরও সিউডো ক্লাসের সাথে ব্যবহার করা যায়, এক্ষেত্রে সিনট্যাক্স হবে selector.class:pseudo-class {property:value;} । নেভিগেশন বারের বিভিন্ন মেনু বিভিন্ন অবস্থায় কেমন দেখাবে তা সিউডো ক্লাস দ্বারা নির্ধারণ করা হয়। এছাড়া বিভিন্ন চাইল্ড সিলেক্টরের ফাস্ট চাইল্ড সিলেক্ট করা সহ আরো অনেক ধরণের কাজ সিউডো ক্লাস দ্বারা করা যায়।

বিভিন্ন ধরণের সিউডো ক্লাস

এংকর সিউডো ক্লাস (Anchor Pseudo class)
ফাস্ট চাইল্ড সিউডো ক্লাস (First child Pseudo-class)
ফল্যাঙ্গুয়েজ সিউডো ক্লাস (lang Pseudo-clas

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p:first-child{
font-family:Arial, Helvetica, sans-serif;
color:#066;
background:#FCC;
border:#F39 5px solid;
padding:10px;}
</style>
</head>
<body >
<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>
<h2>www.tutohost.com</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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

এংকর সিউডো ক্লাস (Anchor Pseudo class)

সাধারণত HTML এ লিংক তৈরির জন্য এংকর ট্যাগ(<a></a>) ব্যবহার করা হয়। সি এস এস ব্যবহার করে স্ট্যাইল তৈরির জন্য স্ট্যাইল শীটে সিলেক্টর হিসেবে a ব্যবহার করা হয়। কিন্তু একটি লিংকের চারটি ভিন্ন অবস্থা হতে পারে যা শুধু মাত্র সিলেক্টর হিসেবে a ব্যবহার করে নির্দেশ করা যায় না। এজন্য এংকর সিউডো ক্লাস ব্যবহার করা হয়; যেমন a:link , a:visited, a:hover এবং a:active।

a:link সিলেক্টর নির্দেশ করে প্রথমবার ব্যবহার না করা পর্যন্ত লিংকটি কিভাবে প্রদর্শিত হবে।
a:visited সিলেক্টর নির্দেশ করে লিংকটি এক বা একাধিক বার ব্যবহার করা হলে এবং লিংকের উপর মাউস না রাখলে লিংকটি কিভাবে প্রদর্শিত হবে।
a:hover সিলেক্টর নির্দেশ করে লিংকটি ব্যবহার করা হোক বা না হোক, লিংকের উপর মাউস না রাখলে লিংকটি কিভাবে প্রদর্শিত হবে।
a:active সিলেক্টর নির্দেশ করে লিংকটিতে মাউস ক্লিক করার মূহর্তে লিংকটি কিভাবে প্রদর্শিত হবে।

অনুশীলন প্রজেক্ট

<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;}
#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="www.tutohost.com"><h1>This is a Link.</h1></a><br>
<div id="nav">
<ul>
<li><a href="www.tutohost.com"><h2>HTML</h2></a></li>
<li><a href="www.tutohost.com"><h2>CSS </h2></a></li>
<li><a href="www.tutohost.com"><h2>PHP</h2></a></li>
<li><a href="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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ফাস্ট চাইল্ড সিউডো ক্লাস (First child Pseudo-class)

একটা সিলেক্টরের আন্ডারে অনেকগুলো একই ইলিমেন্ট এর চাইল্ড সিলেক্টর থাকতে পারে। যেমন <body><p></p><h2></h2><p></p></body> এখানে body এর মধ্যে দুইটি p চাইল্ড হিসেবে আছে। এখন যদি শুধুমাত্র প্রথম p এর জন্য স্ট্যাইল তৈরি করতে চাওয়া হয় তাহলে p এর ফাস্ট চাইল্ড সিউডো ক্লাস সিলেক্টর ব্যবহার করতে হবে; যেমন p:first-child।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p:first-child{
font-family:Arial, Helvetica, sans-serif;
color:#066;
background:#FCC;
border:#F39 5px solid;
padding:10px;}
</style>
</head>
<body >
<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>
<h2>www.tutohost.com</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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ল্যাঙ্গুয়েজ সিউডো ক্লাস (lang Pseudo-class)

কোন বিশেষ ল্যাঙ্গুয়েজ বা ভাষায় লিখিত কোন লাইন কে বিশেষ কোন নিয়মে বা বিশেষ উপায়ে প্রদর্শনের জন্য ল্যাঙ্গুয়েজ সিউডো ক্লাস ব্যবহার করা হয়। যেমন “এই লেখাটি বাংলা ভাষায় লেখা।তাই এখানে কোটেশনে দুটি স্টার চিহ্ন দেখা যাবে।” লেখাটির ডাবল কোটেশন (**) চিহ্ন দ্বারা পরিবর্তিত হবে।এজন্য প্রথমে HTML এ লেখাটিকে এর মধ্যে রাখাতে হবে।q:lang(bn) ল্যাঙ্গুয়েজ সিউডো ক্লাস দ্বারা স্ট্যাইল শীটে সিলেক্ট করে স্ট্যাইল নির্ধারণ করে দিতে হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
q:lang(bn)
{
quotes:"**" "**";
color:#C06;
font-size:20px;
}
</style>
</head>
<body >
<p>This is a paragaph.<q lang="bn">এই লেখাটি বাংলা ভাষায় লেখা।তাই এখানে কোটেশনে দুটি স্টার চিহ্ন দেখা যাবে।</q> This is a paragaph.</p>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

শিরোনামে সিউডো ক্লাসের ব্যবহার

কোন একটি ওয়েব পেজে অনেকগুলো আর্টিকেল থাকতে পারে এবং প্রত্যেকটি আর্টিকেলের একটি করে মূল শিরোনাম থাকতে পারে। এক্ষেত্রে শুধুমাত্র একটা মূল শিরোনামের জন্য স্ট্যাইল তৈরি করলেই সব গুলোর জন্য স্ট্যাইল তৈরি হয়ে যাবে এজন্য সিউডো ক্লাস ব্যবহার করা হয়। উদাহরণ স্বরূপ আর্টিকেল গুলো <p></p> ট্যাগের মধ্যে রাখা হল।এখন মূল শিরোনাম তৈরির জন্য <b></b>ব্যবহার করা হল।যদি b সিলেক্টর দ্বারা স্ট্যাইল তৈরি করা হয় তাহলে, প্যরাগ্রাফের মধ্যে আরো <b></b> থাকতে পারে তাহলে তাদেরও স্ট্যাইল তৈরি হয়ে যাবে।তাই শুধুমাত্র শিরোনাম তথা যেকোন <p></p> এর প্রথম <b></b> এর জন্য স্ট্যাইল তৈরি করার জন্য সিলেক্টর নির্ধারণ করতে হবে p > b:first-child।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p > b:first-child
{color:red;
font-size:28px;}
</style>
</head>
<body >
<p>
<b>www.tutohost.com</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>www.tutohost.com</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>www.tutohost.com</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

সাধারণ শিরোনামে সিউডো ক্লাসের ব্যবহার

কোন একটি ওয়েব পেজে অনেকগুলো আর্টিকেল থাকতে পারে এবং প্রত্যেকটি আর্টিকেলের একটি করে মূল শিরোনাম থাকতে পারে।আর্টিকেল গুলো <p></p> ট্যাগের মাধ্যমে তৈরি। চিন্তা করা হল যে পেজের শুরুতে একটা <p></p> ট্যাগ নিয়ে সকল শিরোনাম গুলো প্রদর্শন করা হবে।শিরোনাম গুলো <b></b> দ্বারা তৈরি ।তাহলে প্রথম <p></p> এর সবগুলো <b></b> এর জন্য স্ট্যাইল তৈরি করতে হবে।এজন্য স্ট্যাইলশীটে সিলেক্টর হিসেবে লেখতে হবে p:first-child b। পেজে আরো অনেক <p></p> এবং এর মধ্যে <b></b> থাকতে পারে সেগুলোর জন্য কোন স্ট্যাইল তৈরি হবে না।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#FCF;
font-size:12px;
border:#F39 5px solid;
padding:10px;}
p > b:first-child
{color:#366;
font-size:16px;}
p:first-child b
{color:#F00;
font-size:20px;}
</style>
</head>
<body >
<p>
<b>First Heading</b><br/ ><br/ >
<b>Second Heading</b><br/ ><br/ >
<b>Third Heading</b><br/ ><br/ >
</p>
<p>
<b>First Heading</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>Second Heading</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement.
</p>
<p>
<b>Third Heading</b><br/ ><br/ >
We are bangladeshi <b>Hostgator</b> 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

সিউডো ইলিমেন্ট (Psudo Element)

সিউডো ক্লাসের মতই বিভিন্ন উপাদানের অবস্থান, অবস্থা ইত্যাদি সিলেক্টর দ্বারা সিলেক্ট করে, বিশেষ ইফেক্ট দেয়ার জন্য সিউডো ইলিমেন্ট ব্যবহার করা হয়।সিউডো ইলিমেন্ট এর সিনট্যাক্স হচ্ছে selector:pseudo-element {property:value;} । সি এস এস ক্লাস সিলেক্টরও সিউডো ইলিমেন্ট এর সাথে ব্যবহার করা যায়, এক্ষেত্রে সিনট্যাক্স হবে selector.class:pseudo-element {property:value;} । কোন প্যারাগ্রাফের প্রথম অক্ষর বা প্রথম লাইন কেমন দেখাবে তা সিউডো ইলিমেন্ট দ্বারা নির্ধারণ করা হয়। এছাড়া কোন প্যারাগ্রাফ বা হেডিং এর শুরুতে কোন ইমেজ, বা বিশেষ কোন টেক্সট যুক্ত করা সহ আরো অনেক ধরণের কাজ সিউডো ইলিমেন্ট দ্বারা করা যায়।

বিভিন্ন ধরণের সিউডো ইলিমেন্ট

প্রথম অক্ষর সিউডো ইলিমেন্ট-(First letter Pseudoelement)
প্রথম লাইন সিউডো ইলিমেন্ট-(First first line Pseudoelement)
বিফোর সিউডো ইলিমেন্ট (Before Pseudo element)
আফটার সিউডো ইলিমেন্ট (After Pseudo element)

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p:after{
content:"Thank You";
background-color:#900;
color:#FCC;
font-weight:bold;}
h2:after {content:url(http://tutohost.com/images/services-icons/green.png);}
h2:first-letter
{color:#ff0000;
font-size:70px;}
</style>
</head>
<body >
<h2>WWW.TUTOHOST.COM</h2>
<p>
www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রথম অক্ষর সিউডো ইলিমেন্ট-(First letter Pseudoelement)

কোন প্যারাগ্রাফের বা হেডিং এর শুরুতে প্রথম অক্ষর অন্যান্য অক্ষর থেকে একটু ভিন্ন আকার, আকৃতি, রং এবং ডিজাইনে প্রদর্শন করার জন্য ফাস্ট লেটার সিউডো ইলিমেন্ট ব্যবহার করা হয়।এজন্য ফাস্ট লেটার সিউডো ইলিমেন্ট সিলেক্টর ব্যবহার করতে হবে; p:first-letter এর অনুরূপ।p এর স্থানে h1,h2,h3 ইত্যাদি হতে পারে।

অনুশীলন প্রজেক্ট

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

প্রথম লাইন সিউডো ইলিমেন্ট-(First first line Pseudoelement)

কোন প্যারাগ্রাফের শুরুতে প্রথম লাইন অন্যান্য লাইন থেকে একটু ভিন্ন আকার, আকৃতি, রং এবং ডিজাইনে প্রদর্শন করার জন্য ফাস্ট লাইন সিউডো ইলিমেন্ট ব্যবহার করা হয়।এজন্য ফাস্ট লাইন সিউডো ইলিমেন্ট সিলেক্টর ব্যবহার করতে হবে; p:first-line এর অনুরূপ।

অনুশীলন প্রজেক্ট

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html, Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

বিফোর সিউডো ইলিমেন্ট (Before Pseudo element)

অনেক সময় কোন একটা পেজের সকল প্যারাগ্রাফের অথবা হেডিং এর শুরুতেই একই টেক্সট বা ইমেজ যুক্ত করার প্রয়োজন পরে এক্ষেত্রে বিফোর সিউডো ইলিমেন্ট ব্যবহার করা হয়।এজন্য বিফোর সিউডো ইলিমেন্ট এর সিলেক্টর ব্যবহার করতে হবে; p:before । এবং স্ট্যাইল সিটে আপনি যে লেখাটি দেখাতে চান তা content:"About Tutohost-"; এর অনুরূপভাবে ডিক্লারেশন করতে হবে। যদি ইমেজ প্রদর্শন করতে চান তাহলে h2:before {content:url(http://tutohost.com/bangla/images/logo2.png);} এর অনুরূপে স্ট্যাইল সিটে লেখতে হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p:before{
content:"About Tutohost-";
background-color:#900;
color:#FCC;
font-weight:bold;}
h2:before {content:url(http://tutohost.com/bangla/images/logo2.png);}</style>
</head>
<body >
<h2>www.tutohost.com.</h2>
<p>
www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

আফটার সিউডো ইলিমেন্ট (After Pseudo element)

অনেক সময় কোন একটা পেজের সকল প্যারাগ্রাফের অথবা হেডিং এর শেষে একই টেক্সট বা ইমেজ যুক্ত করার প্রয়োজন পরে এক্ষেত্রে আফটার সিউডো ইলিমেন্ট ব্যবহার করা হয়।এজন্য আফটার সিউডো ইলিমেন্ট এর সিলেক্টর ব্যবহার করতে হবে; p:after । এবং স্ট্যাইল সিটে আপনি যে লেখাটি দেখাতে চান তা content:"Thank You"; এর অনুরূপভাবে ডিক্লারেশন করতে হবে। যদি ইমেজ প্রদর্শন করতে চান তাহলে h2:after {content:url(http://tutohost.com/images/services-icons/green.png);} অনুরূপে স্ট্যাইল সিটে লেখতে হবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#FFD;}
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
border:#F39 5px solid;
padding:10px;}
p:after{
content:"Thank You";
background-color:#900;
color:#FCC;
font-weight:bold;}
h2:after {content:url(http://tutohost.com/images/services-icons/green.png);}
</style>
</head>
<body >
<h2>WWW.TUTOHOST.COM</h2>
<p>
www.tutohost.com.We are bangladeshi <b>Hostgator</b> hosting provider. The world wide technical and support team is working for your best movement. We are bangladeshi <b>Hostgator</b> 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 করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইমেজ গ্যালারি (Image Gallery)

ইমেজ গ্যালারি হচ্ছে ওয়েব পেজে ইমেজ প্রদর্শনের একটা বিশেষ পদ্ধতি।ফ্যাশান ডিজাইন, কমার্শিয়াল ওয়েব সাইট, ইনটেরিয়র, এক্সটরিয়ার ডিজাইন, সেলস সেন্টার, স্কুল-কলেজ, অরগানাইজেশন, ওয়েব ডেভলপমেন্ট এবং ডিজাইন ভিত্তিক ওয়েব সাইট সমূহে তাদের প্রোডাক্ট, প্রজেক্ট, ডিজাইন, বিভিন্ন ইভেন্ট, অনুষ্ঠান এর ছবি ওয়েব গ্যালারির মাধ্যমে প্রদর্শন করে থাকেন।একসাথে অনেকগুলো ছবি প্রদর্শনের মাধ্যম ও বলা যেতে পারে। সাধারণত ওয়েব গ্যালারিতে ছোট ছোট সাইজের অনেকগুরো ছবি প্রদর্শন করা হয়। একজন ব্যবহারকারী যে ছবিটা ভালভাবে দেখতে চায় সেই ছবির উপর মাউস পয়েন্টার নিয়ে গেলে তা বড় আকারে প্রদর্শন করে।

ছবির অপাসিটি (Opasity)

আপাসিটি দ্বারা নিধারণ করা হয় অবজেক্টটি কতটা স্বচ্ছ।সাধারণত কোন ইমেজের অপাসিটি নিয়ন্ত্রণের মাধ্যমে ঐ ইমেজের উপর বিভিন্ন ইফেক্ট দেয়া যায়।অপাসিটি নিয়ন্ত্রণের জন্য CSS এ ইন্টারনেট এক্সপ্লোরার-৯ সহ নতুন সকল ব্যাউজারের জন্য opacity প্রোপার্টি ব্যবহৃত হয়। যেমন opacity:0.5; । কিন্তু ইন্টারনেট এক্সপ্লোরার-৮ এর জন্য লেখতে হয় filter:alpha(opacity=50);। কোন ইমেজে op আইডি যুক্ত কোন ইমেজের জন্য যদি স্ট্যাইল শীটে লেখা হয় #op{opacity:0.5; filter:alpha(opacity=50);} তাহলে তা 50% স্বচ্ছ হয়ে যাবে এবং পেছনের ব্যকগ্রাউন্ড দেখা যাবে।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> Gallery</title>
<style>
body{background:#fff;}
#op{opacity:0.5;
filter:alpha(opacity=50);}
</style>
</head>
<body>
<h1>সাধারণ ইমেজ</h1>
<img src="https://tutorialbd.com/css/example/gallery/1.jpg">
<h1> অপাসিটি 50% </h1>
<img id="op" src="https://tutorialbd.com/css/example/gallery/1.jpg">
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইমেজ স্প্রাইটস্ (Image Sprites)

ওয়েব সাইটের জন্য আকর্ষণীয় বাটন তৈরির জন্য এবং নেভিগেশন বার তৈরির ক্ষেত্রে ইমেজ স্প্রাইটস একটা ভালো কৌশল। এক্ষেত্রে অনেকগুলো ইমেজ একত্রে করে একটা সিঙ্গেল ইমেজ তৈরি করা হয়। এবং প্রয়োজন অনুসারে ইমেজের বিশেষ অংশ প্রদর্শন করা হয়। সাধারণত একটা বাটন তৈরির ক্ষেত্রে দুইটি অবস্থা বিবেচনা করা হয়। একটা হচ্ছে সাধারণ অবস্থা এবং বাটনের উপর মাউস নিয়ে গেলে বাটনটি কেমন দেখাবে সে অবস্থা। দুইটি অবস্থার জন্য, সাধারণত দুইটি ইমেজ ব্যবহার করা হয়। কিন্তু ইমেজ স্প্রাইটস এর মাধ্যমে একটা ইমেজ ব্যবহার করেই বাটনটি তৈরি করা যাবে।

ইমেজ স্প্রাইটস্ কৌশল ব্যবহার করে তৈরি একটি বাটন

<html>
<head>
<title> Gallery</title>
<style>
body{background:#FC9}
#nav a{height:130px;display:block;}
#nav li{list-style:none;}
li#s1
{ width:108px; height:106px;
background:url('button.png') 0 0 ;}
li#s1:hover
{ width:108px; height:106px;
background:url('button.png') 0 115px;}
</style>
</head>
<body>
<h2>Full single image.</h2>
<img src="button.png">
<h2>Button: Click on the button.</h2>
<ul id="nav">
<li id="s1"><a href="#"></a></li>
<li id="s2"><a href="#"></a></li>
</ul>
</body>
</html>

উপরের প্রজেক্টটি তৈরি করার জন্য button নামে একটা ফোল্ডার তৈরি করতে হবে। ফোল্ডারটির মধ্যে button.png ইমেজটি রাখতে হবে। button.png ইমজটি এখান থেকে ডাউনলোড করুন। button নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইমেজ স্প্রাইটস্ কেন করা হয়

যখন কোন একটা ওয়েব পেজে অসংখ্য ইমেজ থাকে তখন পেজটি স্বভাবিক ভাবেই লোড হতে বেশি সময় লাগে । শুধু তাই নয় প্রতি বার প্রতিটি ইমেজ লোড হওয়ার জন্য সার্ভার রিকোয়েস্ট যায়, ফলে বাড়তি ব্যান্ডওয়াইডথ খরচ খরচ হয়। এক্ষেত্রে ইমেজ স্প্রাইটস এর মাধ্যমে অনেকগুলো ইমেজ একত্রে করে একটা সিঙ্গেল ইমেজ তৈরি করলে মাত্র একবার সার্ভার রিকোয়েস্টেই কাজ হয়ে যায়। ফলাফল হিসেবে বাড়তি ব্যান্ডওয়াইডথ খরচ বন্ধ করা সম্ভব হয়।

ইমেজ স্প্রাইটস্ এর মাধ্যমে প্রদর্শিত চারটি আইকন

<html>
<head>
<title> Gallery</title>
<style>
body{background:#FC9}
#nav li{list-style:none;}
li#s1
{ width:130px; height:130px;
background:url('f1.png') 0 0 ;}
li#s2
{ width:130px; height:130px;
background:url('f1.png') -130px 0;}
li#s3
{ width:130px; height:118px;
background:url('f1.png') -30px -130px ;}
li#s4
{ width:130px; height:115px;
background:url('f1.png') -160px -130px;}
</style>
</head>
<body>
<h2>Full single image.</h2>
<img src="f1.png">
<h2>Sprites image.</h2>
<ul id="nav">
<li id="s1"></li>
<li id="s2"></li>
<li id="s3"></li>
<li id="s4"></li>
</ul>
</body>
</html>

উপরের প্রজেক্টটি তৈরি করার জন্য sprites নামে একটা ফোল্ডার তৈরি করতে হবে । ফোল্ডারটির মধ্যে f1.png ইমেজটি রাখতে হবে। f1.png ইমেজটি এখান থেকে ডাউনলোড করুন। sprites নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইমেজ স্প্রাইটস্ করার কৌশল

ইমেজ ইমেজ স্প্রাইটস কৌশল টি ব্যবহারের জন্য কোন একটি HTML ইলিমেন্ট যেমন <div> <li> <p> এর ব্যাকগ্রাউন্ড ইমেজ হিসেবে এমন একটি সিঙ্গেল ইমেজ ব্যবহার করতে হবে যেখানে একটা পেজের মোটামটি সকল ইমেজ একটু দূরত্ব রেখে অবস্থান করবে। আইকন হিসেবে ব্যবহার করার জন্য সিঙ্গেল ইমেজের ব্যাকগ্রাউন্ড না থাকলে ভাল হয় এবং .png ফরমেটের ইমেজ হলে ভাল হয়।ধরে নেয়া যাক চারটি আইকন এর সমন্বয়ে একটা সিঙ্গেল ইমেজ তৈরি করা হল। এখন এগুলোকে আলাদা আলাদা ভাবে পর্যাক্রমে প্রদর্শন করতে হবে। এজন্য HTML ইলিমেন্ট হিসেবে আন অর্ডার লিস্ট ব্যবহার করা যেতে পারে। যেমন <ul id="nav"><li id="s1"></li><li id="s2"></li><li id="s3"></li><li id="s4"></li></ul> ।

ইমেজ স্প্রাইটস্ এর মাধ্যমে প্রদর্শিত চারটি আইকন

উপরের প্রজেক্টটি তৈরি করার জন্য sprites নামে একটা ফোল্ডার তৈরি করতে হবে । ফোল্ডারটির মধ্যে f1.png ইমেজটি রাখতে হবে। sprites নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

ইমেজ স্প্রাইটস্ করার দ্বিতীয় কৌশল

ইমেজ স্প্রাইটস্ পদ্ধতি ব্যবহারের জন্য এমন একটা সিঙ্গেল ইমেজ তৈরি করা হয় যেখানে তিনটি একই মাপের ইমেজ পর্যায়ক্রমে যথাক্রমে top, center এবং bottom পজিশনে থাকে তাহলে background-position প্রোপার্টি ব্যবহার করে ইমেজ স্প্রাইটস্ করা যায়। ইমেজটিতে তিনটি ইমেজ রয়েছে; যদি একটি পেজে প্রথমে সম্পূর্ণ ইমেজটি প্রথমে তারপর ৩য় ইমেজটি এবং তারপর ১ম ইমেজটি এবং শেষে ২য় ইমেজটি আলাদাভাবে প্রদর্শন করার প্রয়োজন হয় তাহলে HTML অংশে নিচের কোড অংশটুকু যুক্ত করতে হবে।

<h1>Single image</h1>
<div id="img"></div>
<h1>3rd image</h1>
<div id="img3"></div>
<h1>1st image</h1>
<div id="img1"></div>
<h1>2nd image</h1>
<div id="img2"></div>

এখানে <h1></h1>ব্যবহার করা হয়েছে ইমেজ সম্পর্কিত তথ্য যুক্ত করা এবং ইমেজ গুলোকে যেন আলাদাভাবে সহজেই বোঝা যায়। মূলত প্রতিটা <div></div> এর ব্যাকগ্রাউন্ড হিসেবে ইমেজ সমূহ যুক্ত করা হবে এবং প্রদর্শন করা হবে। এখানে প্রতিটা <div></div> কে আলাদাভাবে চিহ্নিত করার জন্য id সিলেক্টর যুক্ত করা হয়েছে।

ইমেজ স্প্রাইটস্ এর মাধ্যমে প্রদর্শিত চারটি ইমেজ

<html>
<head>
<title> Gallery</title>
<style>
* { margin: 0; padding: 0; /* Reset */ }
body{background:#9CC;}
div {margin:20px;}
h1{color:#C00;}
#img {width: 207px; height: 253px;
background-image: url(img.png);}
#img1 {display: block;
width: 207px; height: 70px;
background-image: url(img.png);}
#img2{display: block;
width: 207px; height: 70px;
background-image: url(img.png);
background-position: center;}
#img3{display: block;
width: 207px; height: 70px;
background-image: url(img.png);
background-position: bottom;}
</head>
<body>
<center>
<h1>Single image</h1>
<div id="img"></div>
<h1>3rd image</h1>
<div id="img3"></div>
<h1>1st image</h1>
<div id="img1"></div>
<h1>2nd image</h1>
<div id="img2"></div>
</center>
</body>
</html>

উপরের প্রজেক্টটি তৈরি করার জন্য sprites নামে একটা ফোল্ডার তৈরি করতে হবে । ফোল্ডারটির মধ্যে img.png ইমেজটি রাখতে হবে। sprites নামে তৈরিকৃত ফোল্ডারের মধ্যেই একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

মিডিয়া টাইপ (Media Type)

কোন একটি ওয়েব পেজ বিভিন্ন মিডিয়ায় কেমন দেখাবে তা স্টাইল শীটে নির্ধারণ করার জন্য মিডিয়া টাইপ ব্যবহার করা হয়। মিডিয়া সমূহ হচ্ছে প্রিন্ট (print), স্ক্রিন (screen), আউরাল (aural), ব্রেইলি (braille), হ্যান্ডহেল্ড (handheld), প্রজেকশন (projection), টিভি (tv) ইত্যাদি।সাধারণত বিভিন্ন মিডিয়ায় প্রদর্শনের ক্ষেত্রে টেক্সট সমূহের ফন্ট, ফন্ট সাইজ, লাইন-হাইট, টেক্সট কালার কেমন হবে তা মিডিয়া টাইপের মাধ্যমে নির্ধারণ করা হয়। এজন্য স্ট্যাইল শীটে @media print{ } এর অনূরপ যুক্ত করে তার মধ্যে স্ট্যাইল সমূহ লেখা হয়।

অনুশীলন প্রজেক্ট

<html>
<head>
<title> Gallery</title>
<style>
@media screen
{
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
.mar{color: #C03;
font-size:36px}
}
@media print{
body{background:#fff;}
.post{color:#000;
font-family:Verdana, Geneva, sans-serif;
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>
<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>
</body>
</html>

একটা নোটপ্যাড open করে উপরের code টুকু লিখে file মেনু থেকে Save as এ ক্লিক করে File name: index.html , Save as type : All files, দিয়ে save করে index.html ফাইলটি Mozilla Firefox দিয়ে open করলে নিচে প্রদর্শিত ছবির মত দেখাবে।

How to CSS tutorial in Bangla | Best Tips Bangla

HTML Code

CSS Code

HTML Code

HTML Code

অনুশীলন প্রজেক্ট

অনুশীলন প্রজেক্ট

ARMAN ISLAM

Popular Posts

Categories