14. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
13
িসএসএস িক ?
Cascading Style Sheet এর সংি�� রূপ হে� CSS । সহজ ভাষায় ওেয়ব েপেজা িবিভ�
উপাদাে্া গঠন, আকাা, আকৃিত, অব�া্, াং, গিতশীলতা ইতযািদ ি্ধরাােণা সহজ েকৗশল হে�
CSS ।
িসএসএস েক্ �েয়াজ্ ?
একটা সময় িছল যখন শুধুমা� HTML িদেয়ই একিট ওেয়ব
সাইেটা িডজাই্ কাা হেতা । েস সমেয় িডজাই্ বলেত একটা
ওেয়ব েপেজা িবিভ� ফনট এর কালাা, সাইজ, েটিবেলা িবিভ�
েসেলা কালাা, পুোা পৃ�াা বযাক�াউনড কালাা, এবং �েয়াজ্ীয়
ইেমজ সংেযাজ্েক েবাঝাে্া হেতা। এবং �িতটা েপেজা �িতটা
উপাদাে্া জ�ই আলাদা আলাদাভােব কালাা, সাইজ ি্ধরাাণ
কােত হেতা। যা িছল একটা জিটল �ি�য়া, এবং সময় সােপ�
বযাপাা । বতরমাে্ যিদ একটা ওেয়ব সাইেট ১০০০ বা এর অিধক
একই ধাে্া েপজ থােক তাহেলও একিট মা� CSS ি�� বযবহাা
কো িডজাই্ স�ূণর কাা হয়।
িসএসএস বযবহাা কো ৈতিা একিট ে্িভেগশ্ বাা
িসেল�া
CSS এর মাধযেম HTML �াাা ৈতিা কাা ওেয়ব েপেজা িবিভ�
অংশেক ি্িদর� কো গঠন, আকাা, আকৃিত, অব�া্, াং,
গিতশীলতা ইতযািদ ি্ধরাাণ কাা হয়। HTML �াাা ৈতিা ওেয়ব
েপেজা েকা্ অংশেক ি্িদর�ভােব িচি�ত কাাা জ� িসেল�া
বযবহাা কাা হয়। CSS এ েবশ কেয়ক ধােণা িসেল�া বযবহাা
কাা হয় । এগুেলাা মেধয উে�খেযাগয হে� ....
টযাগ িসেল�া
�াস িসেল�া
আইিড িসেল�া
15. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
14
টযাগ িসেল�া
CSS এওেয়ব েপেজা েকা্ অংশেক ি্িদর�ভােব িচি�ত কাাা জ�
যখন HTML টযাগ সমূহ বযবহাা কাা হয় তােক টযাগ িসেল�া বেল। েযম্
body {
background: #FC9;
font-family: Tahoma;
color: #F60;
}
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title><style>
body{background: #FC9;
font-family: Tahoma;
color: #F60;}
</style>
</head>
<body >
<marquee>
<h1>www.tutohost.com</h1>
</marquee>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
উপোা উদাহাণিটেত body{background: #FC9; font-family: Tahoma; color: #F60;}
এখাে্ body টযাগ িসেল�া।
16. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
15
�াস িসেল�া
CSS এ ওেয়ব েপেজা েকা্ অংশ বা এক বা একািধক
উপাদা্েক ি্িদর�ভােব িচি�ত কাাা একিট অ�তম প�িত
�াস িসেল�া । একািধক উপাদা্েক একই �াস িসেল�া
�াাা িচি�ত কাা যায়, তাই ইহা েকািডং এর পিামাণ �াস
কােত সাহাযয কো।
েযম্ <p class="mar"> 24 / 7 Support</p> এর জ�
css েকাড .mar{color: #C03; font-size:36px}
�াস িসেল�া ি্েদরশ কাাা জ� HTML টযােগর মেধয
class িক-ওয়াডর বযবহাা কাা হয় এর পর = িচ� িদেয় ডাবল েকােটশ্ এর েভতো �াস এর ্াম
েলখা হয়। েযম্ <p class="mar">। এখাে্ mar �ােসা ্াম। �াইল শীেট �াসেক িচি�ত কােত
(.) ডট িচ� বযবহাা কাা হয়।
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
.mar{color: #C03;
font-size:36px}
</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>
17. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
16
একটা ে্াটপযাড 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 ্ােম ি্ধরািাত �াসযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
18. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
17
আইিড িসেল�া
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>
<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
19. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
18
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 বযবহাা কােল কাজ অে্ক
সহজহেয় যােব।
20. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
19
িস এস এস 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>
21. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
20
<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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
এইচ িট এম এল এবং িস এস এস
এইচ িট এম এল এর সােথ িস এস এস যু� কাাা িবষয়িট খুবই
গুরু�পূণর। এইচ িট এম এল এর সােথ িস এস এস যু� কাাা
জ� িত্িট প�িত ােয়েছ। যথা
ইমেবেডড বা ইনটাা্রাল �াইল শীট
ইন-লাই্ �াইল শীট
এ�টা্রাল �াইল শীট
22. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
21
ইমেবেডড �াইল শীট
এ প�িতেত <head>………….</head> এর মেধয <style>..</style> বা �াইল টযাগ বযাবহাা
কাা হয়। এবং <style>….</style> এর মেধযই িস এস এস এর জ� �েয়াজ্ীয় Selector এবং
Declaration সমূহ াাখা হয়। েযম্
<style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
ইমেবেডড �াইল শীটেক ইন লাই্ �াইল শীটও বলা হয়।
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p class="post">We are bangladeshi Hostgator hosting provider. The world
wide technical and support team is working for your best movement. </p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
23. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
22
কখন ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ
যখন েকা্ ওেয়ব সাইেট এমন েকা্ একিট সত� েপজ থােক যাা িডজাই্ অ�া� েপজ েথেক িভ�
এে�ে� ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ ।
এ�টা্রাল �াইল শীট
এ প�িতেত িস এস এস এর জ� �েয়াজ্ীয় 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;}
24. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
23
�াইল িসটিটেক style.css ্ােম save কো index.html ফাইলিট Mozilla Firefox িদেয়
open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
কখন এ�টা্রাল �াইল শীট বযবহাা কাা উিচৎ
েয েকা্ ওেয়ব সাইেটা অিধকাংশ েপজই একই িডজাইে্া হয়। এে�ে� এ�টা্রাল �াইল শীট
বযবহাা কােল �িতটা েপেজা জ� আলাদা �াইল শীেটা �েয়াজ্ হয় ্া। অথরাৎ যখন েকা্ ওেয়ব
সাইেটা অিধকাংশ েপজই একই িডজাইে্া তখন এ�টা্রাল ই�াইল শীট বযবহাা কাা উিচৎ ।
ইন-লাই্ �াইল শীট
এ প�িতেত এইচ িট এম এল এর �িতটা টযােগা
এি্িবউটস িহেসেব style এি্িবউটস যু� কো এর
মেধয িস এস এস এর জ� �েয়াজ্ীয় Declaration
সমূহ যু� কাা হয়। েযম্<p style="color:#066;
font-family:Tahoma; text-align:justify;">
25. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
24
অনুশীল্ �েজ�
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 টযােগা �াইল ি্ধরাােণা
জ� ই্লাই্ �াইল শীট বযবহাা কাা উিচৎ ।
28. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
27
বযাক�াউনড পিজশ্
বযাক�াউনড ইেমজিটা অব�া্ েকাথায় হেব তা ি্েদরশ কাাা জ� বযাক�াউনড পিজশ্ বযবহাা কাা
হয়। যিদ ইেমজিটেক বােম াাখেত হয় তাহেল Declaration হেব background-position:left ;
এখাে্ left এর �াে্ right, center, bottom, top ইতযািদ হেত পাো। যিদ ইেমজিটেক উপর িদক
েথেক বােম াাখেত হয় তাহেল Declaration হেব background-position:top-left; ।
বযাক�াউনড এটাচেমনট
বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হেব িক্া তা �কাশ কাাা জ�
বযাক�াউনড এটাচেমনট বযবহাা কাা হয়। বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ
�িলং কাাা জ� Declaration হেব background-attachment:scroll ; । সাধাাণত িকছু উে�খ ্া
কােল বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হয়। বযাক�াউনড ইেমজ
েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং ্া কাাা জ� Declaration হেব background-
attachment: fixed; ।
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
body{ background: url(../images/bg.png); background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-left:50px;}
h1{ margin-top:50px; color:#C00}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
29. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
28
েট�ট (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);}
30. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
29
অনুশীল্ �েজ�
<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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
31. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
30
েট�ট এলাই্েমনট (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>
32. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
31
<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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
33. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
32
েট�ট েডকোশ্ (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>
34. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
33
একটা ে্াটপযাড 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>
35. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
34
</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)
36. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
35
ফনট ফযািমিল (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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
37. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
36
ফনট সাইজ (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:20p;}
#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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
38. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
37
ফনট েভিােয়নট (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>
39. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
38
একটা ে্াটপযাড 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; বযবহাা কাা হয়।
40. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
39
অনুশীল্ �েজ�
<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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
