CSS TUTOHOST E-BOOK - (Hiractg - Blogspot.com)

Want More books & Software Go to http://hiractg.blogspot.
com
CSS
S
tyl
eMas
ter
As
him Kuma
rPa
ul
As
him KumarPa
ul
St
yleMaster
CSS
Want More books & Software Go to http://hiractg.blogspot.com
িস এস এস �াইল মা�াা
েলখকঃ অসীম কমাা পাল
স�াদক �থম �কাশ
মাহাবুব িটউেটা ১৫ আগ� ২০১৩
��দ আিথর্ সহেযািগতায়
অসীম কমাা পাল িটউেটােহা�
�কাশক ওেয়ব পাটর্নার
িটউেটােহা� http://tutohost.com
�ুফ িািডং http://tutorialbd.com
ি্লুফাা ইয়াসিম্ http://technologybd.org
বইিটা অ্লাই্ সং�াণঃ http://tutorialbd.com/css
কিপাাইট
বইিটা ��ািধকাা িটউেটােহা� এবং েলখেকা। বইিট িব্ামূেলয িবতাণ কাা যােব
এবং েলখক ও �কাশেকা ্াম িঠক োেখ �েয়াজে্ মু�ণ কাা যােব। িক� বইিটা
েকা্ অংশ পিাবতর্ কো মু�ণ কাা এবং বইেয়া েকা্ অংশ �গ বা ওেয়ব সাইেট
�কাশ কাা যােব ্া। তেব বইিটা ডাউ্েলাড িলংক �কাশ কাা যােব।
েযাগােযাগ
েলখকঃ ashimkumar50@yahoo.com ওেয়বঃ http://technologybd.org
�কাশকঃ tutohost@gmail.com ওেয়বঃ http://tutohost.com

1
েফা্ঃ 01975634328 েফসবুকঃ https://www.facebook.com/TutoHost
বইিট িব�েয়া জ� ্য়, িব্ামূেলয িবতােণা উে�ে� ৈতিা কাা হেয়েছ।

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
েলখক পিরিচিত:
েলখেকা কথা
বতরমা্ সমেয় ওেয়ব িডজাইে্া উপা সম�
েলখক, িব� জুেড় গেবষণা চলেছ। একটা ওেয়ব
সাইট এখন শুধুমা� তথয �চাোা মাধযম
অসীম কুমা পাল ১৯৮৭ সােল কুি�য়া অ�গর্ েচৗঁড়হাঁস ্য়। েকা্ একটা ওেয়ব সাইট কত
�ােম জ��হণ কেরন। বতর্মাে িতিন ঢাকা �েকৗশল ও �যুি� সহজভােব এবং সু�াভােব বযবহাাকাাীা
িব�িবদয্া(DUET)এ EEE েত েলখাপড়া করেছন। িতিন চািহদা পূাণ কােত পাােব, এ িবষয়িটই
িটউেটািরয়ালিবিড ,েটকিটউনস, িব�ান �যুি� �েগ ওেয়ব িডজাইন
সবেচেয় েবিশ আেলািচত। বযবহাাকাাীা
এবং েডভলপেমন্ , মাইে�াকেন্�ালা, ইেলক�িন� ও চািহদাা িবষয়িট িবেবচ্ায় োেখ একটা
েটকেনালিজর িবিভ� িবষেয়র উপর �গ, িটউটিরয়াল এবং ই-বুক সু�া ওেয়ব ইনটাােফস ৈতিা কাাা ে�ে�
িলেখেছন।
িস এস এস এা ভূিমকা অপিাশীম। িস এস
এস এা �েয়াজ্্ীয় িবষয় সমূহ
িতিন বতর্মাে েলখাপড়ার পাশাপািশ িটউেটােহাে� কমর্র আেছন। িব�ািাতভােব, সহেজ এবং মাি�ভাষায়
এডভা�ড ওেয়ব িডজাইন এন্ েডভলপেমন্, �িগং, ে�া�ািমং, েশখাা জ� আশা কািছ “িস এস এস
UI/UX, ইেলক�িন�, মাইে�াকেন্�ালা এবং আরডুইেনা েবজড �াইল মা�াা” বইিট সবাইেক সাহাযয
কেন্�র্ িসে�ম এবং েরাবিট� েটকেনালিজেক সবার মােঝ ছিড়েয় কােব।
েদয়ার জ� গেবষণা করেছন।
বইিটেত �িতটা িবষয় বা�ব �েজ�িভি�ক
িতিন ইেতামেধয্ িটউেটােহাে�র হেয় আেলাচ্াা মাধযেম এবং �েয়াজ্ীয় ইেমজ
ও ি�্শটর বযবহাোা মাধযেম সহজভােব
• এইচ িট এম এল উপ�াপ্াা েচ�া কোিছ,যা ্তু্েদােক
• িস এস এস
সহেজ এবং �ত েশখাা ে�ে� সহায়ক
• জাভাি��
ভূিমকা পাল্ কােব বেল আশা কািছ।
• িপ এইচ িপ
বইিটেত ে্িভেগশ্ বাা, ইেমজ

এর উপর বাংলা ভাষায় িটউেটািরয়াল িলেখেছন। যা নতুন এবং
স্�াইটস,বাট্ এবং একটা ইেমজ
এডভা� ওেয়ব িডজাইনার এবং েডভলপারেদর মােঝ ইেতামেধয্
গযালািাাা �েফশ্াল �েজ� িব�ািাতভােব
জনি�য়তা অজর্ কেরেছ।তার েলখা
আেলাচ্াা েচ�া কোিছ ,যা �েফশ্াল
িটউেটােহা� এইচ িট এম এল ই-বুক ১.০ বইিটও পাঠকেদর কােছ িডজাই্ ৈতিাা ধাাণা ৈতিা কােব।
এখেনা েবশ জনি�য়।
িস এস এস এা িবিভ� েকৗশল অয়� কাাা
======================== ে�ে� ২০০+ পৃ�াা এই বইিট যিদ কাোা
সামা�তম উপকাো আেস আমাা �েচ�া
েলখেকর ই-েমইল এে�স: ashimkumar50@yahoo.com
সাথরক হেব। আা বইিটা �থম সং�ােণ
েলখেকর ওেয়ব সাইট: technologybd.org েবশ িকছু ভুল্ুিট থাকাটা অ�াভািবক িকছু
্য়। অনু�হ কো এধােণা আপ্াাা ভুল্ুিট
েলখেকর েফসবুক েপজ: �মাসু�া দৃি�েত েদখেব্।
http://www.facebook.com/ashim.kumar.9803 2
- - অসীম কমাা পাল- -

কৃত�তা �ীকাা
িটউেটােহা� মা্স�� ও �তগিতা েহাি�ং েসবা �দা্কাাী িহেসেব

আমােদা মােঝ িবেশষ পিািচত। িটউেটােহা� ওেয়ব িডজাই্ এনড
েডভলপেমনট িশখেত আ�হীেদা জ� সহজ বাংলা ভাষায় মা্স�ত
�েজ�িভি�ক িটউেটািায়াল এবং ই- বুক �কােশা উে�াগ �হণ কোেছ।
ইেতাপূেবর HTML এবং WordPress এর উপর ই- বুক �কািশত হেয়েছ । িপ
এইচ িপ , জাভাি��, েজ েকােয়িা, জুমলা, এইচ িট এম এল ৫, িস
এস এস ৩ এর মত এডভা� িবষেয়া উপর বাংলাভাষায় সহজ িটউেটািায়াল
ৈতিাা জ� িটউেটা েহাে�া ে�া�ামাাগণ কাজ কো যাে�। এরই
ধাাাবািহকতায় িটউেটােহাে�া সািবরক সহেযািগতায় আিম বাংলাভাষায় িস এস
এস িটউেটািায়াল েলখা শুরু কিা। িটউেটােহাে�া ��াধীকাাী মাহাবুব িটউেটা
ভাই আিথরক সহেযািগতা সহ সকল �কাা সহেযািগতা কো আমাা কাজেক
অে্ক সহজ কো িদেয়েছ্, এজ� িটউেটােহা� এবং মাহাবুব িটউেটা
ভাইেয়া কােছ আিম কৃত�। বযা�তাা কাােণ যিদও অে্ক আেগই িস এস
এস িটউেটািায়াল েলখাা কাজ েশষ হেয়িছেলা, িক� ই- বুক িহেসেব বইিটেক
সবাা কােছ েপৗেছ েদয়াা উপেযাগী কো তুলেত েবশ সময় েলেগেছ, এরই
মেধয পাঠকেদা কাছ েথেক অে্ক মযােসজ েপেয়িছ, যা আমােক বইিট
স�� কােত অনু�ািণত কোেছ। অবেশেষ “িস এস এস �াইল মা�াা” বইিট
আপ্ােদা কােছ েপৗেছ িদেত েপো আিম আ্ি�ত। আপ্ােদা েয েকা্
পাামশর আ�িাকতাা সােথ িবেবচ্া কাা হেব।
অসীম কমাা পাল

স�াদেকা ব�বয
বাংলােদেশর িশ�ামূলক অ্লাই্ �কাশ্াগুেলা এেকবাো হােতগুে্ েফলা

যায়। এেদেশা তরু্ সমাজ তথয �যুি�েত ্তু্ ্তু্ েমধা একি�ত হেয়
�া্ অজরে্া জ� কাজ কো যাে�। িবষয়িট একটা ি্াব িব�েবা মত।
আর এই সৃজ্শীল বযাি�েদা িশ�া কাযর�ম ও উ�াব্ী শি�া �কাশ্া
ধাাাবািহক িস এস এস িটউেটািায়াল যা এখন ই বুক আকাো �কাশ কাা
হল।
�যুি�ে�মী েলখক অসীম কমাোা হাত ধো ৈতিা “িস এস এস �াইল

মা�াা” বইিট ওেয়ব িডজাই্ েশখাা ে�ে� সকেলা িবেশষ সহায়ক হেব
বেল আশা কািছ।
মাহাবুব িটউেটা

িটউেটােহা� িদে� ……………
o একিট টপ েলেভল েডােমই্ এবং এক িগগাবাইট

এেয়ব েহাি�ং মা� ৮০০ টাকায়।
o িােসলাা, মা�াা িােসলাা এবং িভিপএস – এ

৩০% পযর� ছাড়।
o এছাড়াও ােয়েছ ২৪ ঘনটা কা�মাা সািভরস এবং

৯৯. ৯% আপটাইম গযাাািনট।
তাই সময় ফুিােয় যাওয়াা আেগই আপ্াা জ�

উপযু� অফাািট লুেফ ি্্।
েফা্ঃ ০১৭৭০৮৪৮৮৮৮
ওেয়ব সাইটঃ www.tutohost.com

সূিচপ�ঃ
িস এস এস েবিসক
িসএসএস িক? (What is CSS)
টযাগ িসেল�া (Tag Selector)
�াস িসেল�া (Class Selector)
আইিডিসেল�া (ID Selector)
েকাড েলখাা প�িত (Syntax)
ইমেবেডড �াইল শীট (Embeded Style Sheet)
এ�টা্রাল �াইল শীট ( External Style Sheet)
ইন-লাই্ �াইল শীট (Inline Style Sheet)
�াইলঃ
বযাক�াউনড (Background)
েট�ট কালাা (Text Color)
েট�ট এলাই্েমনট (Text Alignment)
েট�ট েডকোশ্ (Text Decoration)
েট�ট ্া�ফােমশ্ (Text Transformation)
ফনট ফযািমিল (Font family)
ফনট সাইজ(Font size)
ফনট েভিােয়নট (Font variant)
ফনট ওেয়ট (font-weight) 6
িলংক (Link)
অডরাা িল� (Ordered List)

আ্অডরাা িল� (Unrdered List)
িলে� ইেমেজা বযবহাা
েটিবল এবং েটিবল বডরাা (Table & Table Border)
েটিবল ওয়াইডথ এনড হাইট (Table Width and Height)
েটিবল েট�ট এলাই্েমনট (Table Text Alignment)
েটিবল কালাা (Table Color)
ব্� ও েলআউটঃ
বডরাা এবং বডরাা �াইল
বডরাা ওয়াইডথ (Border Width)
বডরাা কালাা (Border Color)
পৃথক বডরাা ( Individual Border )
মািজর্ (Margin)
পযািডং (Padding)
আউট লাই্ এবং আউট লাই্ �াইল
আউট লাই্ ওয়াইডথ (Outline Width)
আউট লাই্ কালাা (Outline Color)
ব� মেডল (Box Model)

এডভা�ঃ
�িপং িসেল�া (Grouping Selector)
ে্ি�ং িসেল�া (Nesting Selector)
ডাইেম্শ্ (Dimention)
�দশরণ প�িত (Display)
িডসে� ইন লাই্ (display:inline)
িডসে� �ক (display:block)
িভিজিবিলিট (visibility))
িভিজিবিলিট িহেড্(visibility:hidden)
িভিজিবিলিট কলাপস্(visibility:collapse)
অব�া্ (Positioning)
পিজশ্ �যািটক (position:static)
পিজশ্ িফ�ড (position:fixed)
পিজশ্ িােলিটভ (position:relative)
পিজশ্ এবসিলউট (position:absolute)
ওভাা ে�া (Overflow)
ওভাা ে�া িভিজবল (overflow:visible)
ওভাা ে�া িহেড্ (overflow:hidden)
ওভাা ে�া অেটা (overflow:auto)
ওভাা ে�া �ল(overflow:scroll)
ি�প (Clip)
অেটা ি�প এবং োকেটংগুলাা ি�প 8
েজড ই্েড� (Z-index)

ে�ািটং (Floating)
বাম িদেক �ট(float:left)
ডা্ িদেক �ট(float:right)
�িটং �াাা পযাাা�ােফ ইেমেজা অব�া্ ি্েদরশ
এলাই্ (Align)
মািজর্ ে�াপািটর �াাা েসনটাা এলাই্
পিজশ্ �পািটর �াাা েলফট বা াাইট এলাই্
�ট ে�াপািটর �াাা েলফট বা াাইট এলাই্
কাসরাা ইেফ� (cursor effect)
চাই� িসেল�া (child selector )
িসউেডা �াস (Psudo Class)
এংকা িসউেডা �াস (Anchor Pseudo class)
ফা� চাই� িসউেডা �াস (First child Pseudo-class)
লযা�ুেয়জ িসউেডা �াস (lang Pseudo-class)
িশোা্ােম িসউেডা �ােসা বযবহাা
সাধাাণ িশোা্ােম িসউেডা �ােসা বযবহাা
িসউেডা ইিলেমনট (Psudo Element)
�থম অ�া িসউেডা ইিলেমনট-(First letter Pseudoelement)
�থম লাই্ িসউেডা ইিলেমনট-(First first line Pseudoelement)
িবেফাা িসউেডা ইিলেমনট (Before Pseudo element)
আফটাা িসউেডা ইিলেমনট (After Pseudo element)

ছিব ও িমিডয়াঃ
ইেমজ গযালািা (Image Gallery)
ছিবা অপািসিট (Opasity)
ইেমজ স্�াইটস্ (Image Sprites)
ইেমজ স্�াইটস্ েক্ কাা হয়
ইেমজ স্�াইটস্ কাাা েকৗশল
ইেমজ স্�াইটস্ কাাা ি�তীয় েকৗশল
িমিডয়া টাইপ (Media Type)
স�ূণর �েজ�ঃ
ে্িভেগশ্ বাা
ে্িভেগশ্ (Navigation)
ে্িভেগশ্ বাোা সাধাাণ গঠ ন
ে্িভেগশ্ বাোা বাটে্ িলংক যু� করন
ে্িভেগশ্ বাোা div উপাদাে্া িডজাই্
ে্িভেগশ্ বাো ul,li উপাদাে্া িডজাই্
ে্িভেগশ্ বাো a উপাদাে্া িডজাই্
ে্িভেগশ্ বাোা মাউস ইেফ�
ে্িভেগশ্ বাো ইেমজ িািপেটশ্
ভািটরকযাল ে্িভেগশ্ বাা 10
হিাজনটাল ে্িভেগশ্ বাা

ইেমজ গযালািা
ইেমজ গযালািাা ৈবিশ�য সমূহ
ইেমজ গযালািাা ইেমেজা গঠ ন
স�ূণর ইেমজ গযালািাা গঠ ন
স�ূণর ইেমজ গযালািাা এিায়া,বযাক�াউনড এবং বডরাা ি্ধরাাণ
ইেমজ গযালািােত ি্িদর� আকৃিতা ইেমজ সংেযাজ্
সাধাাণ অব�ায় ইেমজ গযালািােত বড় আকৃিতা ইেমজ লুকাে্া
ইেমজ গযালািােত েছাট ইেমেজা বডরাা এবং মািজর্
গযালাাী ি�্ (Gallery Screen)
ইেমজ গযালাাীা েছাট ইেমেজা বডরাা পিাবতর্
ইেমজ গযালাাীেত বড় ইেমজ �দশর্
ইেমজ গযালাাীেত বড় ইেমেজা জ� �যাইল ৈতিা
ইেমজ গযালাাীেত বড় ইেমেজা ি্েচ ইেমজ স�িকরত েলখা �দশর্
ইেমজ গযালাাী পূণরা� �েজ�
ওেয়ব েপেজ ইেমজ গযালাাী যু� কাাা �ণালী
ইেমজ স্�াইটস্ বাট্
ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা-(১ম অংশ)
ইেমজ স্�াইটস্ বাটে্া HTML �াকচাা এবং িলংক ৈতিা-(২য় পবর)
ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা-(েশষ অংশ)
11

িস এস এস েবিসক
12

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

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

টযাগ িসেল�া
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 টযাগ িসেল�া। 14

�াস িসেল�া
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 >
<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> 15
</marquee>
</body>
</html>

�েজ� িবে�ষণ
<p class="post"> এর মাধযেম একিট পযাাা�ােফা জ� post ্ােম একিট �াস ি্ধরাাণ কাা
হেয়েছ।
<p class="post"> এর মাধযেম অপর একিট পযাাা�ােফা জ� post ্ােম একিট �াস ি্ধরাাণ কাা
হেয়েছ।
.post{color:#066;
font-family:Tahoma;
এর মাধযেম post ্ােম ি্ধরািাত �াসযু� উভয় পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
<p class="mar">এর মাধযেম একিট পযাাা�ােফা জ� mar ্ােম একিট �াস ি্ধরাাণ কাা
হেয়েছ।
.mar{color: #C03;
font-size:36px}
এর মাধযেম mar ্ােম ি্ধরািাত �াসযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
16

আইিড িসেল�া
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>
<style>
#post1{color:#066;
font-family:Tahoma;
#post2{color: #639;
font-family:Tahoma;
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical 17
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>
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবর মত েদখােব।
<p id="post1"> এর মাধযেম একিট পযাাা�ােফা জ� post1 ্ােম একিট আইিড ি্ধরাাণ কাা
হেয়েছ।
<p id="post2"> এর মাধযেম অপর একিট পযাাা�ােফা জ� post2 ্ােম একিট আইিড ি্ধরাাণ
কাা হেয়েছ।
#post1{color:#066;
font-family:Tahoma;
এর মাধযেম post1 ্ােম ি্ধরািাত আইিডযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
#post2{color:#639;
font-family:Tahoma;
এর মাধযেম post2 ্ােম ি্ধরািাত আইিডযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
েকাড েলখাা প�িত

েয েকা্ ে�া�াম েলখাা জ�ই েকা্ একটা এিডটা
বযবহাা কো েকািডং কােত হয়। িস এস এস এর জ�
�াথিমকভােব এিডটা িহেসেব উইেনডাজ অপাোিটং
িসে�েমা িডফ� এিডটা notepad বযবহাা কাা েযেত
পাো এবং বাড়িত সুিবধা পাবাা জ� এডভা� এিডটা
িহেসেব Dreamweaver বযবহাা কােল কাজ অে্ক
সহজ হেয় যােব।
18

িস এস এস Syntax
িস এস এস syntax দুিট অংেশ িবভ� । যথা Selector এবং Declaration ।
Selector অংেশ টযাগ িসেল�া িহেসেব HTML টযাগ বা �াস িসেল�া িহেসেব HTML টযাগ এর �াস
এর ্াম অথবা আইিড িসেল�া িহেসেব HTML টযাগ এর আইিড এর ্াম বেস।
�িতটা Declaration এর একিট property এবং একিট value থােক।
<html>
<head>
<title> Syntax</title>
<style>
#post1{color:#066;
font-family:Tahoma;
#post2{color: #639;
font-family:Tahoma;
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical
</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
of more than 1000 bangladeshi websites and their huge information.
</p>

<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
এইচ িট এম এল এবং িস এস এস
এইচ িট এম এল এর সােথ িস এস এস যু� কাাা িবষয়িট খুবই
গুরু�পূণর। এইচ িট এম এল এর সােথ িস এস এস যু� কাাা
জ� িত্িট প�িত ােয়েছ। যথা
ইমেবেডড বা ইনটাা্রাল �াইল শীট

ইন-লাই্ �াইল শীট
এ�টা্রাল �াইল শীট
20

ইমেবেডড �াইল শীট

এ প�িতেত <head>………….</head> এর মেধয <style>..</style> বা �াইল টযাগ বযাবহাা
কাা হয়। এবং <style>….</style> এর মেধযই িস এস এস এর জ� �েয়াজ্ীয় Selector এবং
Declaration সমূহ াাখা হয়। েযম্
<style>
.post{color:#066;
font-family:Tahoma;
</style>
ইমেবেডড �াইল শীটেক ইন লাই্ �াইল শীটও বলা হয়।
<html>
<head>
<style>
.post{color:#066;
font-family:Tahoma;
</style>
</head>
<body >
<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>
21

কখন ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ

যখন েকা্ ওেয়ব সাইেট এমন েকা্ একিট সত� েপজ থােক যাা িডজাই্ অ�া� েপজ েথেক িভ�
এে�ে� ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ ।
এ�টা্রাল �াইল শীট

এ প�িতেত িস এস এস এর জ� �েয়াজ্ীয় Selector এবং
Declaration সমূহ আলাদা ি�ে� াাখা হয় এবং ি��িটেক বা
�াইল শীটিটেক style.css বা এর অনুরূপ ্ােম save কাা হয়।
<head>………….</head> এর মেধয <link rel="stylesheet"
type="text/css" href="css.css"> যু� কো এ�টা্রাল �াইল
শীট এর সােথ এইচ িট এম এল এর িলংক ৈতিা কাা হয়।
অনুশীল্ �েজ�:
HTML Code:
<html>
<head>
<link rel="stylesheet" type="text/css" href="css.css" />

</head>
<body >
<p class="post">

and support team is working for your best movement. </p>
</body>
</html>
File name: index.html , Save as type : All files, িদেয় save কােত হেব।
CSS Code :
22
.post{color:#066;
font-family:Tahoma;

�াইল িসটিটেক style.css ্ােম save কো index.html ফাইলিট Mozilla Firefox িদেয়
open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
কখন এ�টা্রাল �াইল শীট বযবহাা কাা উিচৎ

েয েকা্ ওেয়ব সাইেটা অিধকাংশ েপজই একই িডজাইে্া হয়। এে�ে� এ�টা্রাল �াইল শীট
বযবহাা কােল �িতটা েপেজা জ� আলাদা �াইল শীেটা �েয়াজ্ হয় ্া। অথরাৎ যখন েকা্ ওেয়ব
সাইেটা অিধকাংশ েপজই একই িডজাইে্া তখন এ�টা্রাল ই�াইল শীট বযবহাা কাা উিচৎ ।
ইন-লাই্ �াইল শীট
এ প�িতেত এইচ িট এম এল এর �িতটা টযােগা

এি্িবউটস িহেসেব style এি্িবউটস যু� কো এর
মেধয িস এস এস এর জ� �েয়াজ্ীয় Declaration
সমূহ যু� কাা হয়। েযম্<p style="color:#066;
font-family:Tahoma; text-align:justify;">
23

HTML Code
স্টাইল
<head>
</head>
<body >
<p style="color:#066; font-family:Tahoma; text-align:justify;">

and support team is working for your best movement. </p>
</body>
</html>
কখন ইন-লাই্ �াইল শীট বযবহাা কাা উিচৎ

েকা্ ওেয়ব েপেজা িডজাই্ ৈতিাা জ� যখন এ�টা্রাল ই�াইল শীট বা ইমেবেডড �াইল শীট
থােক অথবা েকা্ �াইল শীটই থােক ্া এে�ে� েকা্ িবেশষ HTML টযােগা �াইল ি্ধরাােণা
জ� ই্লাই্ �াইল শীট বযবহাা কাা উিচৎ ।
24

স্টাইল
25

বযাক�াউনড (Background)
ওেয়বেপেজা িবিভ� উপাদা্ েযম্
Body, Pragaph, Table ইতযািদা জ�
বযা�াউনড একিট অপিাহাযর উপাদা্। এ
সকল উপাদা্ সমূেহা বযাক�াউনড
িহেসেব কালাা অথবা ইেমজ বযবহাা কাা্
যায়।
বযাক�াউনড িহেসেব কালাা বযবহাা

বযাক�াউনড িহেসেব কালাা বযবহাোা জ� Declaration হেত পাো background:#900; অথবা
background-color:#900; । েযম্ body{ background-color:#900; }
বযাক�াউনড িহেসেব ইেমজ বযবহাা

বযাক�াউনড িহেসেব ইেমজ বযবহাোা জ� Declaration হেব background:
url(../images/4.png);।েযম্ body{ background: url(../images/4.png);}
বযাক�াউনড িহেসেব ইেমজ বযবহাোা ে�ে� আোা কেয়কিট িবষয় Declaration এ উে�খ কােত
হয়। এগুেলা হে�
বযাক�াউনড িািপেটশ্ (Background repeatation )

বযাক�াউনড পিজশ্ (Background position )
বযাক�াউনড এটাচেমনট (Background attachment )
বযাক�াউনড িািপেটশ্
বযা�াউনড ইেমজিট কতবাা বযবহৃত হেব তা ি্েদরশ কাাা জ� বযাক�াউনড িািপেটশ্ বযবহাা কাা
হয়। যিদ পুোা বযাক�াউনড জুেড় ইেমজিটেক বাাবাা িািপট কােত হয় তাহেল Declaration হেব
background-repeat:repeat; যিদ ইেমজিটেক মা� একবাা বযবহাা কােত হয় তাহেল Declaration
হেব background-repeat:no-repeat ; যিদ ইেমজিটেক X-অ� বাাবা বাাবাা িািপট কােত হয়
তাহেল Declaration হেব background-repeat:repeat-x ; ইেমজিটেক Y-অ� বাাবা বাাবাা
িািপট কােত হয় তাহেল Declaration হেব background-repeat:repeat-y ; । েযম্ body {
26
background: url(images/4.png); background-repeat:repeat-x;} । যিদ body { background:
url(images/4.png); } এভােব Declaration কাা হয় তাহেল পুোা বযাক�াউনড জুেড় ইেমজিট
বাাবাা িািপট হেব।

বযাক�াউনড পিজশ্
বযাক�াউনড ইেমজিটা অব�া্ েকাথায় হেব তা ি্েদরশ কাাা জ� বযাক�াউনড পিজশ্ বযবহাা কাা
হয়। যিদ ইেমজিটেক বােম াাখেত হয় তাহেল Declaration হেব background-position:left ;
এখাে্ left এর �াে্ right, center, bottom, top ইতযািদ হেত পাো। যিদ ইেমজিটেক উপর িদক
েথেক বােম াাখেত হয় তাহেল Declaration হেব background-position:top-left; ।
বযাক�াউনড এটাচেমনট
বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হেব িক্া তা �কাশ কাাা জ�
বযাক�াউনড এটাচেমনট বযবহাা কাা হয়। বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ
�িলং কাাা জ� Declaration হেব background-attachment:scroll ; । সাধাাণত িকছু উে�খ ্া
কােল বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হয়। বযাক�াউনড ইেমজ
েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং ্া কাাা জ� Declaration হেব background-
attachment: fixed; ।
<html>
<head>
<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 >
<p id="post1">
We are bangladeshi Hostgator hosting provider. <br />
</p>
</body>
</html>
27

েট�ট (Text)
ওেয়ব সাইেটা �ধা্ উপাদা্ হে� েট�ট। েসৗ�যর বৃি�া জ�
এবং িবেশষ িকছু সুিবধা পাবাা জ� css এর মাধযেম েট�ট এর
�াইল ৈতিা কাা হয়। েট�ট এর �াইল ৈতিাা জ� েবশ
কেয়কিট িবষয় Declaration এ উে�খ কােত হয়। এগুেলা
হে�

েট�ট ্া�ফােমশ্ (Text
transformation)

আমাা সাধাাণত 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);}
28

<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 >
<p>
We are bangladeshi Hostgator hosting provider.<br />
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
29


ওেয়ব েপেজ েট�টেক সাজাে্াা জ� েট�ট
এলাই্েমনট বযবহাা কাা হয়। েট�টেক েপেজা বাম
পােশ াাখাা জ� Declaration কােত হেব text-
align:left; অনুরূপভােব ডা্ পােশ াাখাা জ�
Declaration কােত হেব text-align:right; মধয�াে্
াাখাা জ� Declaration কােত হেব text-
align:center; । যিদ েট�ট এর �িতটা লাই্ একই
আকাো সাজােত চাই তাহেল Declaration কােত হেব
text-align:justify ।
<html>
<head>
<style>
#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">
</p>
<h2>Example of center align </h2>
<p id="center">
</p> 30
<h2>Example of justify align </h2>

<p id="justify">
We are bangladeshi Hostgator hosting provider.
</p>
</body>
</html>
31


েকা্ েট�ট এর সােথ 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>
<style>
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>
32

েট�ট ্া�ফােমশ্ (Text Transformation)

েট�ট অ�ভূর� অ�া সমূহেক বড় হােতা বা েছাট
হােতা অ�ো অথবা �িতিট শে�া �থম অ�া বড়
হােতা অ�ো রূপা�োা জ� েট�ট ্া�ফােমশ্
বযবহাা কাা হয়। েট�ট এর অ�ভূর� সকল
অ�ােক বড় হােতা অ�ো রূপা�োা জ�
Declaration কােত হেব text-
transform:uppercase; েছাট হােতা অ�ো
রূপা�োা জ� Declaration কােত হেব text-
transform:lowercase; �িতিট শে�া �থম অ�া
বড় হােতা অ�ো রূপা�োা জ� Declaration
কােত হেব text-transform:capitalize; ।
<html>
<head>
<style>
33
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>
ফনট (Font)
একটা ওেয়ব সাইেটা �ধা্ উে�� হে�
বযবহাাকাাীেক �েয়াজ্ীয় তথয েসবা �দা্
কাা। েকা্ ওেয়ব সাইেট তথয �দশরে্া
ে�ে� �ধা্ ভূিমকা পাল্ কো েট�ট ।
সাইেট েকাথায় িক ধােণা েট�ট বযবহাা
কাা হেব, আকাা আকৃিত েকম্ হেব এ
সকল িকছুই ি্য়ি�ত হয় িস এস এস এর
ফনট এর মাধযেম। েট�ট এর ফনট �াইল
ৈতিাা জ� েবশ কেয়কিট িবষয়
Declaration এ উে�খ কােত হয়। এগুেলা
হে�

ফনট সাইজ(Font size)
ফনট ওেয়ট (font-weigh)
34


েট�ট সমূেহ িক ধােণা ফনট বযবহাা কাা হেব, তা ি্েদরশ কাাা জ� ফনট ফযািমিল বযবহাা কাা হয়।
েট�ট সমূেহা জ� Arial ফনট িসেল� কাাা জ� Declaration কােত হেব font-family:Arial;
অনুরূপভােব Tahoma ফনট িসেল� কাাা জ� Declaration কােত হেব font-family:Tahoma; ।
অে্ক সময় েট�ট সমূেহা জ� একিটা পিাপূাক িহেসেব একািধক ফনট Declaration এ উে�খ
কাা হয় েযম্ font-family:Verdana, Geneva, Tahoma; । যখন �াউজাা �থম ফনট সােপাটর
কােব ্া তখন েট�ট সমূহ ২য় বা ৩য় ফেনট �দিশরত হেব।
<html>
<head>
<style>
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>
35

ফনট সাইজ (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>
<style>
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>
36


যিদ েকা্ ওেয়ব েপেজ িবেশষ েকা্ িশোা্াম এম্ভােব
�দশরে্া �েয়াজ্ পেড়, েযখাে্ �াভািবকভােব েলখা
েট�ট সমূেহা সবগুেলা অ�া বড় হােতা হেব িক� েয�াে্
েছাট হােতা অ�া হওয়াা কথা েসই �াে্া বড় হােতা
অ�াগুেলাা ফনট সাইজ তুল্ামূলক �াভািবক ফনট
সাইেজা েচেয় েছাট হেব, এে�ে� ফনট েভিােয়নট বযবহাা
কাা হয়।This Is an Example Of Variant
Text েলখািটা ভািােয়নট �াইল ৈতিাা জ�
Declaration কােত হেব font-variant: small-caps; ।
<html>
<head>
<style>
#variant{ font-variant: small-caps; color:#C00;}
</style>
</head>
<body > 37
<h2>This is an example of normal h2 text .</h2>
<h2 id="variant">This Is an Example Of h2 Variant Text .</h2>
</body>
</html>

ফনট ওেয়ট (font-weigh)

েকা্ ওেয়ব েপেজ বযবহৃত েট�ট সমূহ কতটা েমাটা হেব
বা িচক্ হেব তা ি্ধরাাণ কাাা জ� ফনট ওেয়ট বযবহাা
কাা হয়। েবা� েট�ট ৈতিাা জ� Declaration কােত
হেব font-weight:bold; । েট�ট সমূহ কতটা েমাটা হেব
তা ি্ধরাােণা জ� সংখযা বযবহাা কাা েযেত পাো, েযম্
font-weight:900; অথবা font-weight:800; । এছাড়া
ফনট ওেয়ট �াইল িহেসেব font-weight:lighter; এবং
font-weight:bolder; বযবহাা কাা হয়।
38

<html>
<head>
<style>
#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>
39

িলংক (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;}
40
চাািট অব�ােতই িলংেকা বয�াউনড পিাবতর্ কাা যায়। এবং ে্িভেগশ্ বাো এই লিজকিটই েবিশ
বযবহৃত হয়। িলংেকা বয�াউনড পিাবতর্ কাাা জ� �াইল িসেট েলখেত হেব
a:hover{background:#F60; এর অনুরূপ।

<html>
<head>
<style>
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>
41

িল� (List)
ওেয়ব েপেজ তথয উপ�াপ্াা একিট অ�তম
প�িত িল� । CSS �াাা িত্ ধােণা িল� ৈতিা
কাা যায়, একিট হে� অডরাা িল� এবং অপািট
হে� আ্অডরাা িল� । অডরাা িলে� িবিভ�
তথযেক পযরায়�িমকভােব সািজেয় উপ�াপ্ কাা
হয় এবং �িতটা লাইে্া শুরুেত �িমক সংখযা
থােক, আন অডরাা িলে� �িতটা লাইে্া সামে্
েছাট বৃ�াকাা বা বগরাকাা িচ� থােক। এছাড়া
িলে� েযেকা্ িস�েলা পিাবেতর েছাট আকাোা
ইেমজ বযবহাা কাা যায়।
42

অডরাা িল� (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>
<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> 43
</body>
</html>

আ্অডরাা িল� (Unrdered List)

আন অডরাা িলে� �িতটা লাইে্া সামে্ েছাট বৃ�াকাা বা
বগরাকাা িচ� থােক, আন অডরাা িল� েবশ কেয়ক ধােণা
হেত পাো। েযম্ িড� �াইল, সােকরল �াইল, �য়াা
�াইল ইতযািদ। িড� �াইল িল� ৈতিা কাাা জ�
Declaration কােত হেব list-style-type:disc;। সােকরল
�াইল িল� ৈতিা কাাা জ� Declaration কােত হেব
list-style-type:circle; �য়াা �াইল িল� ৈতিা কাাা
44
জ� Declaration কােত হেব list-style-type:square;।

<html>
<head>
<style>
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>
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। 45

িলে� ইেমেজা বযবহাা

িলে� েযেকা্ িস�েলা পিাবেতর েছাট আকাোা
ইেমজ বযবহাা কাা যায়।ে্িভেগশ্ বাো িলে�া
বযবহাা খুবই জ্ি�য়। সাধাাণত সাইডবাা
ে্িভেগশে্ বযবহৃত িলে� িল� �াইল িহেসেব
ইেমেজা বযবহাা েবিশ েদখা যায়।িল� �াইল
িহেসেব ইেমজ বযবহাোা জ� Declaration কােত
হেব list-style-image:url(images/b.png)।
46

<html>
<head>
<style>
body{background:#c9f3fa; margin-left:120px;}
h1{color:#F00;}
ul{list-style-image:url(images/b.png)}
</style>
</head>
<body >
<h1>List Style Image</h1>
<ul id="disc">
<li><a href="www.tutohost.com">Home</a></li>
<li><a href="www.tutohost.com">About Us</a></li>
<li><a href="www.tutohost.com">HTML</a></li>
<li><a href="www.tutohost.com">CSS</a></li>
<li><a href="www.tutohost.com">PHP</a></li>
<li><a href="www.tutohost.com">Contact Us</a></li>
</ul>
</body>
</html>
কাযর�ণালী
imstyle ্ােম একটা folder ৈতিা কো তাা মেধয images ্ােম ্তু্ একটা folder ৈতিা কােত
হেব। images folder এর মেধয েয ইেমজিট িলে� �দশর্ কাা হেব তা াাখেত হেব।এই �েজ�িটেত
b.png ্ােম একটা ইেমজ বযবহাা কাা হেয়েছ।ইেমজিটা ডাউ্েলাড
িলংক http://www.tutohost.com/bangla/css/images/pic/b.png ।এর পর imstyle ্ােম ৈতিা
folder এর মেধয একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ
ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো index.html
ফাইলিট Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
47

েটিবল (Table)
ওেয়ব েপেজ েটিবল বযাবহাা কো খুব সহেজই
তথয-উপা�,পিাসংখযা্ উপ�াপ্ কাা যায়।
েটিবল খুবই গুরু�পূণর একিট উপাদা্।িস এস
এস বযবহাা কো এইচ িট এম এল এ ৈতিাকৃত
েটিবলেক আোা আকষরণীয় এবং বযবহাা
বা�ব কাা যায়। িস এস এস বযবহাা কো
েটিবেলা �াইল ৈতিাা জ� েবশ কেয়কিট
িবষেয়া উপর কাজ কােত হয়। এগুেলা হে�,
েটিবল বডরাা (Table Border)

েটিবল বডরাা (Table Border)

মূলত েটিবেলা দৃ�মা্ মূল গঠ ন ৈতিা কাা হয় েটিবল বডরাা �াাা।েটিবেলা �িতটা সািা ৈতিাা
জ� HTML এ <tr></tr> বযবহাা কাা হয়, এবং �িতটা েসল ৈতিাা জ� <td></td>বযবহাা কাা
হয়। <th></th> এর মাধযেম েটিবল েহডাা ৈতিা কাা হয়।CSS �াাা েটিবল বডরাা �াইল ৈতিাা
জ� �যাইল শীেট েলখেত হেব,
table,th,td
{
border:1px solid #F00;
}
এখাে্ মূল েটিবল, েটিবেলা �িতটা সািা এবং �িতটা েসল এর জ� একই �যাইেলা বডরাা ি্ধরাাণ
কাা হেয়েছ।
<html>
<head>
<style>
table,th,td 48
{
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>
ছিবটােত আসেল সাধাাণ েটিবেলা মত বডরাা ৈতিা হয়ি্। �িতটা েসল পা�া েথেক আলাদা
হেয়েছ।
{
border-collapse:collapse;
}
49
এখন যিদ �াইল শীেট উপোা েকাড টুক যু� কাা হয় তাহেল েটিবলিট েদখেত সাধাাণ েটিবেলা মত
হেব এবং Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।


েটিবল িডজাইে্া ে�ে� েয িবষয়িট �থেম িচ�া কােত হয়, তা
হে� েটিবলিট কতটুক চওড়া হেব এবং এর উ�তা কতটুক হেব,
েটিবল েহডাা তথা �থম সািাা �িতটা েসল েকম্ হেব। েটিবেলা
চওড়া েকম্ হেব এবং এর উ�তা ি্ধরাােণা জ� �াইল শীেট
েলখেত হেব,
table
{
width:300px; height:100px;
}
মা্সমূহ px তথা িপে�েল অথবা েপেজা শতকাা িহেসেব েদয়া েযেত পাো।েযম্,
table
{
width:50%; height:20%;
}
শতকাা িহেসেব মা্ িদেল মি্টোা সাইজ অনুসাো েটিবেলা আকাা পিাবিতরত হেব িক� িপে�েল
মা্ িদেল েকা্ পিাবতর্ হেব ্া।
েটিবল েহডাা তথা �থম সািাা �িতটা েসল এর উ�তা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব,
th
{
height:50px;
}
এে�ে�ও মা্সমূহ px তথা িপে�েল অথবা েপেজা শতকাা িহেসেব েদয়া েযেত পাো। সাধাাণত 50
েটিবল েহডাা তথা �থম সািাা �িতটা েসল এর উ�তা ি্ধরাাণ কো িদেল বািক েসল গুেলাা আকাা
েটিবেলা width �াাা ি্ধরািাত হয়।

<html>
<head>
<style>
body{background:#00CC99;margin-left:120px; }
table{
}
table,th,td
{
}
table
{
}
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> 51
</body>
</html>


েটিবেল েট�ট সমূহ িকভােব থাকেব তা ি্েদরশ
কাাা জ� েটিবল েট�ট এলাই্েমনট বযবহাা
কাা হয়। �িতটা েসেলা েট�ট সমূহ বােম
াাখেত হেল �াইল শীেট েলখেত হেব,
td
{
text-align:right;
ডাে্ াাখেত হেল Declaration কােত হেব text-align:left;

মাঝখাে্ াাখেত হেল Declaration কােত হেব text-align:center;
এখন যিদ �িতটা েসেলা েট�ট সমূেহা ভািটরকযাল এলাই্েমনট অথরাৎ �িতটা েসেলা মেধয েট�ট
সমূহ উপোা িদেক থাকেব ্া ি্েচা িদেক থাকেব অথবা মাঝামািঝ অব�াে্ থাকেব িক্া ি্ধরাাণ
কােত হয় তাহেল Declaration এ vertical-align ি্ধরাাণ কো িদেত হেব।েট�ট সমূহ ি্েচা িদেক
াাখাা জ� Declaration কােত হেব,
td
{ 52
vertical-align:bottom;
}

<html>
<head>
<style>
table{
}
table,th,td
{
}
table
{
}
th
{
height:50px;
}
td
{
text-align:center;
}
td
{
}
</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> 53
<td>200</td>
<td>400</td>
</tr> <tr>

<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>

বতরমাে্ একটা ওেয়ব সাইট শুধুমা� তথয �কােশা
উে�ে� িডজাই্ কাা হয় ্া।তথযিট কতটা
সু�াভােব এবং সহেজ বযবহাােযাগয কো
বযবহাাকাাীা ি্কট উপ�াপ্ কাা হল, েসটাও
অিধক গুরু�পূণর। ওেয়ব েপেজ েটিবেল উপ�ািপত
পিাসংখযা্ বা তািলকােক িস এস এস বযবহাা কো
আকষরণীয়রূেপ বযবহাাকাাীা ি্কট �দশর্ কাা
যায়।এে�ে� েটিবেলা েহডাা এবং �িতটা েসেলা
কালাা অিধক গুরু�পূণর ভূিমকা পাল্ কো। েটিবল
েহডাা এর বযক�াউনড কালাা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব,
th 54
{
background:#F69;
}

েটিবেলা �িতটা েসেলা বযক�াউনড কালাা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব,
td
{
background:#FAC;
}
<html>
<head>
<style>
table{
}
table,th,td
{
}
th
{
height:50px;
}
td
{
text-align:center;
}
th
{
background: #F69;
}
td
{
background:#FAC;
}
</style>
</head>
<body >
<table>
55
<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>
56

ব্ক্স ও লেআউট
57

বডরাা এবং বডরাা �াইল
বডরাা ওেয়ব েপেজা একিট গুরু�পূণর

উপাদা্।এইচ িট এম এল এবং িস এস এস
বযবহাা কো েটমে�ট িডজাই্ কাাা সময়
িবিভ� উপাদাে্া জ� সিঠক াং এবং
আকৃিতা বডরাা ৈতিা কাাা উপর িডজাইে্া
মাধুযর অে্কাংেশ ি্ভরা কো।িস এস এস
বযবহাা কো িবিভ� ধােণা বডরাা ৈতিা কাা
যায়। িবিভ� ধােণা বডরাা ৈতিাা ে�ে�
েবশ িকছু িবষেয়া উপর কাজ কােত হয়।
এগুেলা হে�,
বডরাা �াইল (Border Style)

58

বডরাা �াইল
বডরাা �যাইল ি্েদরশ কো বডরাািট েদখেত েকম্ হেব।বডরাা �যাইল ৈতিাা জ� 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>
<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>
59


বডরাা ওয়াইডথ ি্েদরশ কো বডরাািট কতটা েমাটা
হেব।বডরাা ওয়াইডথ ি্ধরাােণা জ�
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; । 60

েকা্ HTML উপাদাে্া চাাপােশা বডরাা চাা ধােণা ওয়াইডথ এর হেত পাো, এধােণা বডরাা
ৈতিাা জ� Declaration কােত হেব, border-width:2px 8px 6px 4px; এখাে্ ১ম 2px ি্েদরশ
কো top border ; ২য় 8px ি্েদরশ কো right border; ৩য় 6px ি্েদরশ কো down border ; ৪থর
4px ি্েদরশ কো left border।
<html>
<head>
<style>
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.
</p>
</div>
</body>
</html>
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। 61


বডরাা কালাা ি্েদরশ কো বডরাািটা াং েকম্
হেব।বডরাা কালাা ি্ধরাােণা জ�
color:yellow; এর অনুরূপ। িস এস এস
বযবহাা কো িবিভ� ধােণা বডরাা কালাা
ি্ধরাাণ কাা যায়।হলুদ ােঙা বডরাা ৈতিাা জ�
color:yellow; িপংক কালাোা বডরাা ৈতিাা
জ� Declaration কােত হেব, border-
color:pink; rgb প�িতেতও বডরাা কালাা
িাধরাাণ কাা যায়, এ প�িতেত বডরাা ৈতিাা
জ� Declaration কােত হেব, border-
color:rgb(240,060,155); hex প�িতেতও
62
বডরাা কালাা িাধরাাণ কাা যায়, এ প�িতেত বডরাা ৈতিাা জ� 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>
<style>
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>
</p>
</div>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো 63


েকা্ 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;।
64

<html>
<head>
<style>
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>
</p>
</div>
</body>
</html>
65

মািজর্ (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>
<style>
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> 66
<h2>This is an example of multi margin.</h2>
<p>


</p>
</div>
</body>
</html>
পযািডং (Padding)
িবিভ� HTML উপাদাে্া যিদ বডরাা থােক, তাহেল
বডরাা েথেক ক্েটনট এর চাাপােশ কতটুক �া্
ফাঁকা থাকেব তা ি্েদরশ কাাা জ� পযািডং বযবহাা
কাা হয। পযািডং মূলত িবিভ� HTML উপাদাে্া
বযক�াউনড এিায়া বৃি� কো থােক । পযািডং
বযবহাা কাাা জ� CSS এ padding Property
বযবহাা কাা হয়। সাধাাণভােব েকা্ HTML
উপাদাে্া চাাপােশ সমা্ পিামা্ পযািডং ৈতিা
67
কাাা জ� 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>
<style>
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>
</p>
</div>
</body>
</html>
68

আউট লাই্ এবং আউট লাই্ �াইল

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

িবিভ� ধােণা আউট লাই্ ৈতিাা ে�ে� েবশ িকছু িবষেয়া উপর কাজ কােত হয়। এগুেলা হে�,
আউট লাই্ �াইল (Outline Style)

আউট লাই্ �যাইল

আউট লাই্ �যাইল ি্েদরশ কো আউট লাই্িট েদখেত েকম্ হেব।আউট লাই্ �যাইল ৈতিাা
জ� 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>
<style>
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>
70
<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>

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

লাই্ ৈতিাা জ� Declaration কােত হেব, outline-width:1px; 10px বা ১০ িপে�ল চওড়া আউট
লাই্ ৈতিাা জ� Declaration কােত হেব, outline-width:10px;।
<html>
<head>
<style>
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>
</p>
</div>
</body>
</body>
</html>
72


আউট লাই্ কালাা ি্েদরশ কো আউট
লাই্িটা াং েকম্ হেব।আউট লাই্ কালাা
ি্ধরাােণা জ� Declaration কােত হেব,
outline-color:yellow; এর অনুরূপ। িস এস
এস বযবহাা কো িবিভ� ধােণা আউট লাই্
কালাা ি্ধরাাণ কাা যায়।হলুদ ােঙা আউট
লাই্ ৈতিাা জ� Declaration কােত হেব, 73
outline-color:yellow; িপংক কালাোা
আউট লাই্ ৈতিাা জ� Declaration কােত
হেব, outline-color:pink; rgb প�িতেতও

আউট লাই্ কালাা িাধরাাণ কাা যায়, এ প�িতেত আউট লাই্ ৈতিাা জ� Declaration কােত হেব,
outline-color:rgb(240,060,155); hex প�িতেতও আউট লাই্ কালাা িাধরাাণ কাা যায়, এ
প�িতেত আউট লাই্ ৈতিাা জ� Declaration কােত হেব, outline-color:#ff0000; ।
<html>
<head>
<style>
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>
</p>
</div>
</body>
</html>
74

ব� মেডল (Box Model)

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

ব� মেডল ৈতিা কাাা জ� Declaration এ কেয়কিট �পািটর ি্ধরাাণ কো িদেত হয়।এগুেলা হে�,
width - ( বে�া ��)

border - ( বডরাা এর াং, আকাা এবং �যাইল ি্ধরাাণ কো িদেত হয়।)
padding - ( বে�া েভতো িদেক েয পিামা্ ফাঁকা �া্ থাকেব )
margin – ( বে�া বাইোা িদেক েয পিামা্ ফাঁকা �া্ থাকেব)
<html>
<head>
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> 76
<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>
77

এডভান্স
78

�িপং িসেল�া (Grouping Selector)
একজন ভাল েকাডাা বা ে�া�ামাোা

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

<html>
<head>
<style>
h1,h2,p{color:#333;
font-family:Tahoma;
</style>
</head>
<body >
<h2>Reliable & Fast Web Hosting</h2>
<p>
We are relaibale Bangladeshi hosting provider. The world wide
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>
80

ে্ি�ং িসেল�া (Nesting Selector)

িস এস এস এ একিট িসেল�োা অ�ভূর� অপর
একিট িসেল�োা জ� �যাইল ি্ধরাাণ কাাা
ে�ে� ে্ি�ং িসেল�া বযবহাা কাা হয়।ধাা
যাক �যাইল শীেট পযাাা�াফ P এর জ�
�যাইল ি্ধরাাণ কাা হল। rap ্ােমা id িবিশ�য
একটা div উপাদাে্া মেধয অপর একটা
পযাাা�াফ আেছ। rap এর জ�ও �যাইল
ি্ধরাাণ কাা হল। এখন যিদ rap মেধয অবি�ত
পযাাা�াফিটা জ� অলাদা �যাইল ৈতিা কাাা
�েয়াজ্ হয় তাহেল ে্ি�ং িসেল�া বযবহাা
কােত হয়। এজ� িসেল�ো িলখেত হেব rap p
।
<html>
<head>
<style>
p{color:#333;
font-family:Tahoma;
#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
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 81
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>
ডাইেম্শ্ (Dimention)
েকা্ HTML উপাদাে্া �� এবং উ�তা ি্য়�েণা

জ� িস এস এস এ ডাইেম্শ্ বযবহাা কাা হয়।িস
এস এস এ ডাইেম্শ্ ি্ধরাােণা জ� েবশ িকছু
ে�াপািটর বযবহাা কাা হয়।এগুেলা হে�, height,
width, max-height, max-width, min-width,
min-height ।
82

<html>
<head>
<style>
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>
83

েকািডং িবে�ষণ:
�থম পযাাা�াফিটা ে�ে� max-height:100px; এবং max-width:250px; ফেল �থম
পযাাা�াফিটা জ� েয ডাইেম্শ্ উে�খ কাা হেয়েছ সম� েলখাা জ� তা যেথ� ্য়, এজ�
বযাক�াউনড কালাা ডাইেম্শ্ অনুযায়ী �দিশরত হে�, িক� েলখা বযাক�াউনড অিত�ম কো েগেছ।
24/7 World Class Support েলখািটা িকছু অংশ �থম পযাাা�াফিটা মেধয �েবশ কোেছ।িক�
24/7 World Class Support েলখািট �থম পযাাা�াফিটা পো �দিশরত হওয়া উিচৎ। কাাণ �কৃত
অেথর �থম পযাাা�াফিটা বযাক�াউনড েযখাে্ েশষ হেয়েছ, �াাা�াফিটও ঐ �াে্ই েশষ হেয়
িগেয়েছ, েয কাােণ World Class Support েলখািট সিঠক �াে্ শুরু হেলও এর িকছু অংশ �থম
পযাাা�াফিটা মেধয �েবশ কোেছ।
ি�তীয় পযাাা�াফিটা ে�ে� বযাক�াউন্ড অে্ক ি্েচ পযর� �দশর্ কােছ কাাণ এ পযাাা�াফিটা
জ� min-height:350px; ি্ধরাাণ কাা হেয়েছ যা পযাাা�াফিটা েট�ট এর উ�তাা েচেয় অে্ক
েবিশ।
84

�দশর্ প�িত (display)

িস এস এস এ িডসে� ে�াপািটর �কাশ কো েকা্
একটা উপাদা্ িকভােব �দিশরত হেব।িডসে�
ে�াপািটরা েবশ িকছু value হেত পাো, এেদা
মেধয সবেচেয় েবিশ বযাবহৃত হয়,
িডসে� ্া্ -(display:none)

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

েকা্ িবেশষ উপদা্েক �দশর্ ্া কাাা জ� িডসে� ্া্ বযবহাা কাা হয়, এজ� Declaration
কােত হয় display:none;।
<html>
<head>
<style>
#none{width:265px;
background:#F30;
padding:10px;}
#none:hover{display:none;}
</style>
</head>
<body >
<div id="none">
<h1>Please Touch Me.</h1></div>
<h2>We are bangladeshi Hostgator hosting provider.</h2>
</body>
</html>
85

উপোা উদাহাণিটেত Please Touch Me. েলখািটা উপো মাউস পেয়নটাা ি্েয় েগেল এিট অদৃ�
হেয় যায় এজ� েকািডং এ েলখা হেয়েছ #none:hover{display:none;} । অথরাৎ none ্ােমা div
িটা মাউস েহাবাা display:none ।
িডসে� ইন লাই্ - (display:inline)
িস এস এস এর মাধযেম HTML উপাদা্ সমূহেক

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

<html>
<head>
<style>
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>
target="_blank">Wordpress</a></li>
</ul>
</body>
</html>
87

িডসে� �ক (display:block)
িস এস এস এর মাধযেম HTML উপাদা্ সমূহেক

একই কলােম �দশরে্া জ� িডসে� �ক বযবহাা
কাা হয়। এটা মূলত সবেচেয় েবিশ বযাবহৃত হয়
ভািটরকযাল ে্িভেগশ্ বাো, তথা সাইডবাা
ে্িভেগশ্ বাো। HTML উপাদা্ সমূহেক একই
কলােম �দশরে্া জ� Declaration কােত হয়
display:block; এর অনুরূপ।
<html>
<head>
<style>
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>
target="_blank">PHP</a></li>
target="_blank">Wordpress</a></li>
</ul>
88
</body>
</html>

িভিজিবিলিট (visibility)
েকা্ উপাদা্েক �দশর্ কাা হেব িক ্া তা
ি্েদরশ কাাা জ� িস এস এস এ িভিজিবিলিট
ে�াপািটর বযবহাা কাা হয়।েযম্ েকা্
উপাদা্েক �দশর্ কাাা জ� Declaration
কােত হয় visibility:visible; । েকা্
উপাদা্েক �দশর্ ্া কাাা জ� Declaration
কােত হয়, visibility:hidden; । িভিজিবিলিট
ে�াপািটরা েবশ িকছু value হেত পাো, এেদা
মেধয উে�খেযাগয হে�,
িভিজিবিলিট িহেড্ – (visibility:hidden)

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

<html>
<head>
<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>
Hidden Text & Visible Text. িটা ি্েচ েবশ িকছুটা ফাঁকা অংশ �দিশরত হে�।
েকািডং এর HTML অংেশ <div id="hide"><h1>Hidden Text.</h1></div> িছেলা এবং CSS

90
অংেশ #hide{width:245px;background:#F30;} ।
visibility:hidden; থাকাা জ� Hidden Text. েলখািট �দিশরত হে� ্া।

Visible Text. েলখািট �দিশরত হে� কাাণ CSS অংেশ #show{width:245px;

background:#F30; visibility:visible;} আেছ।
িভিজিবিলিট িহেড্ – (visibility:hidden)

িডসে� ্া্ -(display:none) এবং িভিজিবিলিট িহেড্ –
(visibility:hidden;)উভই HTML উপাদা্েক লুকাে্াা জ�
বযবহাা কাা হয়।িক� উভেয়া মেধয পাথরকয ােয়েছ। েকা্
HTML উপাদাে্া জ� CSS এ visibility:hidden; কােল
HTML উপাদা্িট �দিশরত হয় ্া িঠকই িক� HTML
উপাদা্িট সমপিামা্ �া্ ফাঁকা াােখ। িক� েকা্ HTML
উপাদাে্া জ� CSS এ display:none;কােল HTML
উপাদা্িট �দিশরত হয় ্া এবং েকা্ ফাঁকা �া্ ৈতিা হয় ্া।
<html>
<head>
<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>
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট 91

উপোা Please Touch Me. েট�িটা উপর মাউস ি্েয় েগেল তা অদৃ� হেয় যায় এবং তাা ি্েচা
েট�টিট উপো উেঠ আেস। কাাণ এ েট�িটেত display:none; বযবহাা কাা হেয়েছ।
মােঝা Please Touch Me. েট�িটা উপর মাউস ি্েয় েগেল তা অদৃ� হেয় যায়। িক� েলখািটা
সমপিামা্ �া্ ফাঁকা থােক। কাাণ এ েট�িটেত visibility:hidden; বযবহাা কাা হেয়েছ।
িভিজিবিলিট কলাপস্ – (visibility:collapse)

সাধাাণত েকা্ েটিবেলা েকা্ সািড় বা কলাম েক
অদৃ� কাাা জ� িভিজিবিলিট কলাপস্ বযবহাা কাা
হয়। এজ� Declaration কােত হয়
visibility:collapse; ।এটা অে্কটা display:none
এর মত কাজ কো থােক।
<html>
<head>
<style> 92
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>
অব�া্ (Positioning)
ওেয়ব েপেজ িবিভ� HTML উপাদা্ সমূহ েকাথায় িকভােব �দিশরত
হেব তা �কাশ কাাা জ� position ে�াপািটর বযবহাা কাা হয়। এর
সােথ top, bottom, left, and right ে�াপািটর সমূহ বযবহাা কো
েকা্ HTML উপাদাে্া �কৃত অব�া্ ি্ধরাাণ কাা হয়। 93

position ে�াপািটরা চাা ধােণা মা্ হেত পাো। এগুেলা হে�,

<html>
<head>
<style>
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 94
movement.We are bangladeshi Hostgator hosting provider. The
movement. </p>
</body>
</html>

েকা্ একিট HTML উপাদাে্া পিজশ্ ে�াপািটর যিদ �যািটক কো
েদওয়া হয়; তাহেল তা HTML উপাদা্ সমূেহা সাধাাণ এবং �ভািবক
পিজশ্ ি্েদরশ কােব। এে�ে� top, bottom, left, and right ে�াপািটর
সমূহ িড�াোশ্ কােলও এ অনুযায়ী েকা্ কাজ হেব ্া; অথরাৎ top,
bottom, left, and right ে�াপািটর সমূহ ি্ি�য় হেয় যােব।
<html>
<head>
<style>
body{background:#FFC;} 95
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;
</style>
</head>
<body >
movement.</p>
</body>
</html>
96


েকা্ একিট HTML উপাদা্েক মি্টা ি�ে্া সােপে� েকা্ ি্িদর�
�াে্ ি�াভােব �াপ্ কাাা জ� পিজশ্ িফ�ড বযবহাা কাা হয়। এজ�
�থেম position:fixed; িড�াোশ্ কো, এর পর top, bottom, left, and
right ে�াপািটর সমূহ িড�াোশ্ কােত হয়।
<html>
<head>
<style>
h1{color:#F06;
background:#CC9;
padding:10px;
position:fixed;
top:30px;
leftt:5px; }
p{ margin-top:100px;
background:#FCF;
border:#F0F 1px solid;
padding:10px;
</style>
</head>
<body >
movement. We are bangladeshi Hostgator hosting provider. The 97
movement.</p>
</body>
</html>

�ল কােলও www.tutohost.com েলখািটা অব�াে্া েকা্ পিাবতর্ হয় ্া।

HTML উপাদা্ সমূেহা �াভািবক অব�াে্া সােপে� top, bottom,
left, and right ে�াপািটর বযবহাোা মাধযেম েকা্ ব�া অব�া্
ি্ধরাােণা জ� িােলিটভ পিজশ্ ে�াপািটর বযবহাা কাা হয়। পিজশ্
ে�াপািটর যিদ �যািটক কো েদওয়া হয়, তাহেল তা HTML উপাদা্
সমূেহা সাধাাণ এবং �ভািবক পিজশ্ ি্েদরশ কো, িক� পিজশ্
িােলিটভ এবং পিজশ্ �যািটক ে�াপািটরা মেধয পাথরকয হে� পিজশ্
�যািটক ে�াপািটরা ে�ে� top, bottom, left, and right ে�াপািটর সমূহ
ি্ি�য় থােক; আর পিজশ্ িােলিটভ ে�াপািটরা ে�ে� top, bottom,
left, and right ে�াপািটর সমূেহা মাধযেমই েকা্ ব�া অব�া্ ি্েদরশ
কাা হয়।
পিজশ্ িােলিটভ ে�াপািটরা ে�েত সকল িহসাব শুরু হয় ঐ উপাদা্িটা �াভািবক অব�া্ েথেক।
অথরাৎ পিজশি্ং ্া কাা হেল উপাদা্িট েয �াে্ অব�া্ কােতা েসখা্ েথেক।
98

<html>
<head>
<style>
body{background:#FFC; }
h3 {
color:#F09;
background:#CC9;
padding:10px;
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>
99

HTML উপাদা্ সমূেহা �কৃত অব�া্ ি্ধরাােণা জ� পিজশ্
এবসিলউট ে�াপািটর বযবহাা কাা হয়। েকা্ একিট HTML
উপাদাে্া পিজশ্ ে�াপািটর যিদ এবসিলউট কো েদওয়া হয়
তাহেল তাা অব�া্ �ভািবক �েম ি্েদরিশত হয় ্া, এে�ে� top,
bottom, left, and right ে�াপািটর সমূেহা মাধযেম ঐ উপাদা্িটা
অব�া্ ি্ধরািাত হয়। এে�ে� অ� একিট উপাদাে্া উপোও
ওভাালযাপ কো ঐ উপাদা্িটা অব�া্ ি্ধরাাণ কাা স�ব হয়।
<html>
<head>
<style>
h1
{position:absolute;
left:100px;
top:70px;
color:#F09;
background:#CC9;
padding:10px;
}
p{background:#FCF;
padding:10px;
</style>
</head>
<body >
movement. </p>
</body> 100
</html>

ওভাা ে�া (Overflow)

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

ওভাা ে�া �ল(overflow:scroll)
<html>
<head>
<style> 101
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
#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">
technical and support team is working for your best
movement. </p>
<h3> This is an example of hidden overflow</h3>
<p id="hidden">
movement.</p>
<h3> This is an example of auto overflow</h3>
<p id="auto">
movement.</p>
<h3> This is an example of scroll overflow</h3>
<p id="scroll">
102
movement.</p>
</body>
</html>

103

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

এখন এর অ�ভূর� েট�ট এর এিায়া বে�া এিায়া
এর েচেয় বড় হেল এর �াইল িসেট ওভাা ে�া
ে�াপািটরা মা্ িভিজবল (overflow:visible;)
কােল বাড়িট েট�ট এর ওভাা ে�া িভিজবল হেব,
অথরাৎ বে�া বাইো �দিশরত হেব।
<html>
<head>
<style>
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
#visible{overflow:visible;}
</style>
</head>
<body >
<h3> This is an example of visible overflow</h3>
<p id="visible">
104
movement. </p>
</body>
</html>

ওভাা ে�া ে�াপািটরা মা্ িহেড্ কােল top, left,

height,width, padding, border ইতযািদ ে�াপািটর বযবহাা
কো একিট ব� িডজাই্ কাাা পর যিদ বে�া আকাা
�েয়াজ্ীয় ক্েটনট এর আকৃিতা েচেয় েছাট হয়, তাহেল
বাড়িত ক্েটনট �দিশরত হেব ্া।
েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর

অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর েচেয় বড় হেল এর
�াইল িসেট ওভাা ে�া ে�াপািটরা মা্ িহেড্ (overflow:hidden;) কােল বাড়িট েট�ট এর ওভাা
ে�া হাইড হেব, অথরাৎ বাড়িট েট�ট �দিশরত হেব ্া।
<html>
<head>
<style>
h3{color:red;} 105
p{background:#FCF;
left:100px;
top:70px;

height:90px;
2T 2T
width:350px;
2T 2T
padding:10px;
2T 2T

2T 2T
margin-bottom:60px;}
2T 2T
#hidden{overflow:hidden;}
2T 2T
</style>
2T 2T
</head>
2T 2T
<body >
2T 2T
<h3> This is an example of hidden overflow</h3>

2T 2T
<p id="hidden">
2T 2T

2T

movement.</p> 2T
</body>
2T 2T
</html>
2T

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

েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর
েচেয় বড় হেল এর �াইল িসেট ওভাা ে�া ে�াপািটরা মা্ অেটা (overflow:auto;) কােল বে�া
মেধয �লবাা েদখা যােব বাড়িট েট�ট �লবাা েটে্ েদখা যােব।
<html>
<head>
<style>
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
#auto{overflow:auto;}
</style>
</head>
<body >
<h3> This is an example of auto overflow</h3>
<p id="auto">
movement.</p>
</body>
</html>
107

ওভাা ে�া �ল (overflow:scroll)
ওভাা ে�া ে�াপািটরা মা্ অেটা কােল top, left,
height,width, padding, border ইতযািদ ে�াপািটর বযবহাা
কো একিট ব� িডজাই্ কাাা পর বে�া আকাা
�েয়াজ্ীয় ক্েটনট এর আকৃিতা েছাট বা বড় যাই েহাক ্া
েক্ বে�া মেধয �লবাা েদখা যােব।
েযম্ একটা p এর জ� ব� িডজাই্ কাা হল এখন এর

অ�ভূর� েট�ট এর এিায়া বে�া এিায়া এর েচেয় েছাট বা
বড় যাই েহাক ্া েক্ �াইল িসেট ওভাা ে�া ে�াপািটরা মা্
(overflow:scroll) কােল বে�া মেধয �লবাা েদখা যােব
বাড়িট েট�ট থাকেল তা �লবাা েটে্ েদখা যােব।
<html>
<head>
<style>
h3{color:red;}
p{background:#FCF;
left:100px;
top:70px;
height:90px;
width:350px;
padding:10px;
#scroll{overflow:scroll;}
</style>
</head>
<body >
<h3> This is an example of scroll overflow</h3>
<p id="scroll">
movement.</p>
</body>
</html>
108

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

োকেটংগুলাা ি�প (clip:ract)
ি�প ে�াপািটর বযবহাা কো সহেজই একিট মা� ইেমজ বযবহাা কো েকা্ বাটে্া েহাভাা ইেফ�
েদয়া যায়।ি্েচা উদাহাণিট ি�প ে�াপািটর বযবহাা কো ৈতিাকৃত একিট ইন্াকিটভ বাটে্া।
<html>
<head>
<style>
a #clip{
position:absolute;
top:50px;
clip: rect(27 130 69 30);}
a #clip:hover {
position:absolute;
top:50px; 109
clip:auto;}
</style>
</head>

<body >
<h3> This is an example of clip image.</h3>
<a href="www.tutohost.com"><img
id="clip"src="http://www.tutohost.com/bangla/css/images/pic/cl
ip.png"/></a>
</body>
</html>
অেটা ি�প
েকা্ HTML উপাদাে্া স�ূণর অংশ �দশর্ কাাা জ�
ি�প ে�াপািটর মা্ অেটা বযবহাা কাা হয়। এজ�
Declaration কােত হয় clip:auto; । এিট েকা্
ইেমেজা বা েকা্ HTML উপাদাে্া িডফ� ি�প মা্।
োকেটংগুলাা ি�প
েকা্ HTML উপাদাে্া স�ূণর অংশ �দশর্ ্া কো িবেশষ েকা্ অংশ �দশর্ কাাা জ� ি�প
ে�াপািটর মা্ োকেটংগুলাা ফােম েদয়া হয়। এজ� Declaration কােত হয়
clip:rect(20px,100px,200px,30px); এর অনুরূপ। এখাে্ 20px �কাশ কো উপর েথেক কতটুক
অংশ ি�প হেব, 100px �কাশ কো বাম েথেক ডাে্ 100px এর পোা বাঁকী অংশ ি�প হেব, 100px
�কাশ কো উপর েথেক ি্েচ 200px এর পোা বাঁকী অংশ ি�প হেব, 30px �কাশ কো বাম িদেক
110
শুরু েথেক 30px ি�প হেব।

<html>
<head>
<style>
#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="http://www.tutohost.com/bangla/css/images/pic/2
2cc.png"/>
<h3 style=" position:absolute; top:320px;"> This is an example
of rect clip image.</h3>
<img id="rect"
src="http://www.tutohost.com/bangla/css/images/pic/22cc.png"/
>
</body>
</html>
111

েজড ই্েড� (Z-index)
পিজশ্ এবসিলউট (position:absolute) কো এবং
top, bottom, left, and right ইতযািদ ে�াপািটর
বযবহাা কো একািধক HTML উপাদা্েক
পা�োা উপর ওভাালযাপ কাা যায়। একািধক
HTML উপাদা্েক পা�োা উপর ওভাালযাপ
কাা েকা্ উপাদা্িট কাা উপো অব�া্ কােব তা
েজড ই্েড� (Z-index) ে�াপািটর বযবহাা কো
ি্ধরাাণ কাা হয়। (Z-index) ে�াপািটরা মা্ িহেসেব
আমাা auto এবং েকা্ সংখযা েযম্ 1,2,3,-1 �ভৃিত
বযবহাা কাা হয়।
<html>
<head>
<style>
body{background:#FFC;}
h2{color:#ffc;}
h1{color:#F30;}
div{
padding:10px;
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; } 112
#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>
113

ে�ািটং (Floating)
ওেয়ব েপেজা েল-আউট ৈতিাা ে�ে� েপেজা
িবিভ� উপাদা্েক ডা্িদেক এবং বামিদেক
াাখাা �েয়াজ্ পো। এে�ে� �ট (Float)
বযবহাা কাা হয়। েকা্ উপাদা্েক বামিদেক
�াপ্ কাাা জ� Declaration কােত হয়
float:left; আর বামিদেক �াপ্ কাাা জ�
Declaration কােত হয় float:right; ।
<html>
<head>
<style>
body{background:#FFD;
font-size:13px;
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>
technical and support team is working for your best movement. 114
</p>
</div>
<div id="second">
<h2 style="color:#C33;">Float Right<br /> Second Box.</h2>

<hr>
<p>
</p>
</div>
</body>
</html>
বাম িদেক �ট(float:left)

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

<html>
<head>
<style>
font-size:13px;
div{width:180px;
height:310px;
margin:3px;
border:#F99 10px solid;
padding:8px;
background:#ddEFB3;
#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>
</p>
</div>
</body>
</html> 116

ডা্ িদেক �ট(float:right)

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

<html>
<head>
<style>
font-size:13px;
div{width:180px;
height:310px;
margin:3px;
padding:8px;
background:#C9F;
#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>
</p>
</div>
</body>
</html> 118

�িটং �াাা পযাাা�ােফ ইেমেজা অব�া্ ি্েদরশ

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

<html>
<head>
<style>
font-size:13px;
div{width:380px;
margin:3px;
padding:8px;
background:#ddEFB3;
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="http://www.tutohost.com/bangla/css/images/pic/22hh.png"
width="150px" height="150px" />
<p>
</p><br />
<img id="left"
src="http://www.tutohost.com/bangla/css/images/pic/22hh.png"
/>
<p>
</p> 120
</div>
</body>
</html>

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

• মািজর্ ে�াপািটর �াাা এলাই্
• পিজশ্ ে�াপািটর �াাা এলাই্
• �ট ে�াপািটর �াাা এলাই্
<html>
<head>
<style>
font-size:13px;
color:#066;
div{width:200px;
height:250px;
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>
</p>
</div>
<br />
<div id="rap2">
<h2 style="color:#666;">Left align</h2> 122
<hr>
<p>

</p>
</div>
<div id="rap3">
<h2 style="color:#666;">Right align</h2>
<hr>
<p>
</p>
</div>
</body>
</html>
123

মািজর্ ে�াপািটর �াাা েসনটাা এলাই্
েয েকা্ ভাল একিট ওেয়ব েটমে�ট েখয়াল কােল েদখা
যায়, েটমে�টিট �াউজাো �দশর্ কােল িঠক মাঝখাে্
�দশর্ কো, একটা ওেয়ব সাইটেক সু�া ভােব
�দশরে্া জ� িবষয়িট খুবই গুরু�পূণর।মািজর্ ে�াপািটর
বযবহাা কো েসনটাা এলাই্ কাাা মাধযেম এর
গুরু�পূণর কাজিট কাা হয়।েকা্ ওেয়ব সাইটেক
�াউজাো িঠক মাঝখাে্ �দশর্ কাাা জ� �যাইল
িসেট উে�খ কােত হয়, margin-left:auto; margin-
right:auto; ।
<html>
<head>
<style>
font-size:13px;
color:#066;
div{width:400px;
height:280px;
padding:8px;
background:#b0e0e6;
outline:#063 1px solid;}
#rap{margin-left:auto;
margin-right:auto;}
</style>
</head>
<body >
<div id="rap">
<hr>
<p>
</p> 124
</div>
</body>
</html>

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

ওেয়ব সাইেটা েটমে�ট এর েসৗ�যর অে্কাংেশ
ি্ভরা কো সাইডবাোা উপা। সাইডবাা িটেক
সাধাাণত সাইেটা ক্েটনট এিায়াা ডা্িদেক
অথবা বাম িদেক াাখা হয়। আবাা অে্ক ে�ে�
একািধক সাইডবাাও বযবহাা কাা হয়।সাইডাা
এলাইে্া িবষয়িটও তাই একজন ওেয়ব
িডজাই্াােক েবশ সতকরতাা সােথ কােত হয়। এ
কাজিট সিঠকভােব কাা ্া হেল িবিভ� �াউজাো
বা িবিভ� সাইেজা মি্টো সাইেটা সাইডবাোা 125
অব�া্ পিাবিতরত হেয় েযেত পাো।সাইড বাা

তথা েকা্ div উপাদা্েক পিজশ্ ে�াপািটর বযবহাা কো েলফট বা াাইট এলাই্ কাা যায়। েলফট
এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব position:absolute; left:0px; অনুরূপভােব
াাইট এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব position:absolute; right:0px;।
<html>
<head>
<style>
font-size:13px;
color:#066;
div{width:400px;
height:310px;
padding:8px;
outline:#0631px solid;}
#rap{background:#C9F;
position:absolute;
left:0px;}
</style>
</head>
<body >
<div id="rap">
<hr>
<p>
</p>
</div>
</body>
</html>
126

�ট ে�াপািটর �াাা েলফট বা াাইট এলাই্
�ট ে�াপািটর বযবহাা কোও সাইড বাা তথা েকা্ div উপাদা্েক
েলফট বা াাইট এলাই্ কাা যায়। েলফট এলাই্ কাাা জ�
�যাইল িসেট উে�খ কােত হেব float:left; left:0px; অনুরূপভােব
াাইট এলাই্ কাাা জ� �যাইল িসেট উে�খ কােত হেব
float:right; right:0px;।
<html>
<head> 127
<style>
font-size:13px;
color:#066;
div{width:400px;
height:310px;
padding:8px;
outline:#0631px solid;}
#rap{background:#b0e0e6;
float:right;
right:0px;}
</style>
</head>
<body >
<div id="rap">
<hr>
<p>
</p>
</div>
</body>
</html>
128

কাসরাা ইেফ� (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>
<style>
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
129
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>
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব। এবং �িতটা লাইে্া উপা
মাউস াাখেল িভ� িভ� আকাা ধাাণ কােব।
130

চাই� িসেল�া (child selector )
একিট ভাল িস এস এস �যাইল শীট ৈতিাা জ�
চাই� িসেল� িবষয়িট স�েকর ে�া�ামাােক
অব�ই ভাল ধাাণা থাকেত হেব।আমাা HTML
এ একিট টযােগা মেধযই অ� আোা িকছু টযাগ
বযবহাা কো থািক েযম্,
<div><h2></h2><p></p></div> এে�ে�
�যাইল শীেট div এর চাই� িসেল�া হেব p এবং
h2 । �যাইল শীেট p এর জ� চাই� িসেল�া
িলখেত হেব div>p । তাহেল div>p এর জ�
�যাইল ি্ধরাাণ কাা হেল শুধুমা� p এর জ�ই
�যাইল ি্ধরািাত হেব।
<html>
<head>
<style>
body{background:#FFD;}
div>p{font-family:Arial, Helvetica, sans-serif;
color:#066;
background:#FCC;
padding:10px;}
</style>
</head>
<body >
<div>
<p>
</p>
</div>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো 131

শুধুমা� p এর জ�ই �যাইল ি্ধরািাত হেয়েছ h2 এর জ� েকা্ পিাবতর্ হয় ি্।
িসউেডা �াস (Psudo Class)

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

• এংকা িসউেডা �াস (Anchor Pseudo class)
• ফা� চাই� িসউেডা �াস (First child Pseudo-class)
• ফলযা�ুেয়জ িসউেডা �াস (lang Pseudo-class)
132

<html>
<head>
<style>
p:first-child{
color:#066;
background:#FCC;
padding:10px;}
</style>
</head>
<body >
<p>
</p>
<p>
</p>
</body>
</html>
133

এংকা িসউেডা �াস (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>
<style>
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> 134
<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>
ফা� চাই� িসউেডা �াস (First child Pseudo-class)

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

<html>
<head>
<style>
p:first-child{
color:#066;
background:#FCC;
padding:10px;}
</style>
</head>
<body >
<p>
</p>
<p>
</p>
</body>
</html>
136

শুধুমা� �থম p েত �যাইল যু� হেয়েছ। ি�তীয় p এর েকা্ পিাবতর্ হয় ি্।
লযা�ুেয়জ িসউেডা �াস (lang Pseudo-class)

েকা্ িবেশষ লযা�ুেয়জ বা ভাষায় িলিখত েকা্ লাই্ েক িবেশষ
েকা্ ি্য়েম বা িবেশষ উপােয় �দশরে্া জ� লযা�ুেয়জ িসউেডা
�াস বযবহাা কাা হয়। েযম্ “এই েলখািট বাংলা ভাষায়
েলখা।তাই এখাে্ েকােটশে্ দুিট �াা িচ� েদখা যােব।”
েলখািটা ডাবল েকােটশ্ (**) িচ� �াাা পিাবিতরত হেব।এজ�
�থেম HTML এ েলখািটেক এর মেধয াাখােত হেব।q:lang(bn)
লযা�ুেয়জ িসউেডা �াস �াাা �যাইল শীেট িসেল� কো �যাইল
ি্ধরাাণ কো িদেত হেব।
<html>
<head>
<style>
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>
137

িশোা্ােম িসউেডা �ােসা বযবহাা
েকা্ একিট ওেয়ব েপেজ অে্কগুেলা আিটরেকল থাকেত পাো এবং
�েতযকিট আিটরেকেলা একিট কো মূল িশোা্াম থাকেত পাো।
এে�ে� শুধুমা� একটা মূল িশোা্ােমা জ� �যাইল ৈতিা
কােলই সব গুেলাা জ� �যাইল ৈতিা হেয় যােব এজ� িসউেডা
�াস বযবহাা কাা হয়। উদাহাণ �রূপ আিটরেকল গুেলা
<p></p> টযােগা মেধয াাখা হল।এখ্ মূল িশোা্াম ৈতিাা
জ� <b></b>বযবহাা কাা হল।যিদ b িসেল�া �াাা �যাইল ৈতিা
কাা হয় তাহেল, পযাা�ােফা মেধয আোা <b></b> থাকেত পাো
তাহেল তােদাও �যাইল ৈতিা হেয় যােব।তাই শুধুমা� িশোা্াম
তথা েযেকা্ <p></p> এর �থম <b></b> এর জ� �যাইল ৈতিা কাাা জ� িসেল�া ি্ধরাাণ
কােত হেব p > b:first-child ।
<html>
<head>
<style>
p{font-family:Arial, Helvetica, sans-serif;
background:#9CF;
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
movement. We are bangladeshi <b>Hostgator</b> hosting
provider. The world wide technical and support team is working
for your best movement.
</p>
<p>
world wide technical and support team is working for your best 138
</p>
<p>
</p>
</body>
</html>
139

সাধাাণ িশোা্ােম িসউেডা �ােসা বযবহাা
েকা্ একিট ওেয়ব েপেজ অে্কগুেলা আিটরেকল থাকেত পাো এবং
�েতযকিট আিটরেকেলা একিট কো মূল িশোা্াম থাকেত
পাো।আিটরেকল গুেলা <p></p> টযােগা মাধযেম ৈতিা। িচ�া কাা
হল েয েপেজা শুরুেত একটা <p></p> টযাগ ি্েয় সকল িশোা্াম
গুেলা �দশর্ কাা হেব।িশোা্াম গুেলা <b></b> �াাা ৈতিা
।তাহেল �থম <p></p> এর সবগুেলা <b></b> এর জ� �যাইল
ৈতিা কােত হেব।এজ� �যাইলশীেট িসেল�া িহেসেব েলখেত হেব
p:first-child b। েপেজ আোা অে্ক <p></p> এবং এর মেধয
<b></b> থাকেত পাো েসগুেলাা জ� েকা্ �যাইল ৈতিা হেব ্া।
<html>
<head>
<style>
background:#FCF;
font-size:12px;
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/ >
movement. 140
</p>
<p>
<b>Second Heading</b><br/ ><br/ >
movement.
</p>
<p>
<b>Third Heading</b><br/ ><br/ >
movement.
</p>
</body>
</html>
141

িসউেডা ইিলেমনট (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>
<style>
background:#9CF;
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);} 142
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
</p>
</body>
</html>
�থম অ�া িসউেডা ইিলেমনট-(First letter Pseudoelement)

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

<html>
<head>
<style>
background:#9CF;
padding:10px;}
p:first-letter
{color:#ff0000;
font-size:70px;}
</style>
</head>
<body >
<p>
</p>
</body>
</html>
144

�থম লাই্ িসউেডা ইিলেমনট-(First first line
Pseudoelement)
েকা্ পযাাা�ােফা শুরুেত �থম লাই্ অ�া� লাই্ েথেক একটু
িভ� আকাা, আকৃিত, াং এবং িডজাইে্ �দশর্ কাাা জ� ফা�
লাই্ িসউেডা ইিলেমনট বযবহাা কাা হয়।এজ� ফা� লাই্
িসউেডা ইিলেমনট িসেল�া বযবহাা কােত হেব; p:first-line এর
অনুরূপ।
<html>
<head>
<style>
background:#9CF;
padding:10px;}
p:first-line
{color:#C60;
font-size:30px;}
</style>
</head>
<body >
<p>
</p>
</body>
</html>
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট 145

িবেফাা িসউেডা ইিলেমনট (Before Pseudo element)
অে্ক সময় েকা্ একটা েপেজা সকল পযাাা�ােফা অথবা েহিডং
এর শুরুেতই একই েট�ট বা ইেমজ যু� কাাা �েয়াজ্ পো
এে�ে� িবেফাা িসউেডা ইিলেমনট বযবহাা কাা হয়।এজ� িবেফাা
িসউেডা ইিলেমনট এর িসেল�া বযবহাা কােত হেব; p:before ।
এবং �যাইল িসেট আপি্ েয েলখািট েদখােত চা্ তা
content:"About Tutohost-"; এর অনুরূপভােব িড�াোশ্
কােত হেব। যিদ ইেমজ �দশর্ কােত চা্ তাহেল h2:before
{content:url(http://tutohost.com/bangla/images/logo2.png
);} এর অনুরূেপ �যাইল িসেট েলখেত হেব।
<html>
<head>
<style>
background:#9CF;
padding:10px;}
p:before{
content:"About Tutohost-";
color:#FCC;
font-weight:bold;}
h2:before
{content:url(http://tutohost.com/bangla/images/logo2.png);}</sty 146
le>
</head>
<body >
<h2>www.tutohost.com.</h2>

<p>
</p>
</body>
</html>
আফটাা িসউেডা ইিলেমনট (After Pseudo element)

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

<html>
<head>
<style>
background:#9CF;
padding:10px;}
p:after{
content:"Thank You";
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>
</p>
</body>
</html>
148

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

ছিবা অপািসিট (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="http://www.tutohost.com/bangla/css/example/gallery/1.jpg"
>
<h1> অপািসিট 50% </h1>
<img id="op"
src="http://www.tutohost.com/bangla/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 150
Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

ইেমজ স্�াইটস্ (Image Sprites)
ওেয়ব সাইেটা জ� আকষরণীয় বাট্ ৈতিাা জ� এবং
ে্িভেগশ্ বাা ৈতিাা ে�ে� ইেমজ স্�াইটস একটা
ভােলা েকৗশল। এে�ে� অে্কগুেলা ইেমজ একে�
কো একটা িসে�ল ইেমজ ৈতিা কাা হয়। এবং
�েয়াজ্ অনুসাো ইেমেজা িবেশষ অংশ �দশর্ কাা
হয়। সাধাাণত একটা বাট্ ৈতিাা ে�ে� দুইিট অব�া
িবেবচ্া কাা হয়। একটা হে� সাধাাণ অব�া এবং
বাটে্া উপর মাউস ি্েয় েগেল বাট্িট েকম্ েদখােব
েস অব�া। দুইিট অব�াা জ�, সাধাাণত দুইিট ইেমজ
বযবহাা কাা হয়। িক� ইেমজ স্�াইটস এর মাধযেম 151
একটা ইেমজ বযবহাা কোই বাট্িট ৈতিা কাা যােব।

ইেমজ স্�াইটস্ েকৗশল বযবহাা কো ৈতিা একিট বাট্
<html>
<head>
<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
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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।
152

স�ূণর �েজ�িট এখা্ েথেক Zip আকাো ডাউ্েলাড করু্।
ইেমজ স্�াইটস্ েক্ কাা হয়

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

ইেমজ স্�াইটস্ এর মাধযেম �দিশরত চাািট আইকন
<html>
<head>
<style>
li#s1
background:url('f1.png') 0 0 ;}
li#s2
background:url('f1.png') -130px 0;}
li#s3
background:url('f1.png') -30px -130px ;}
li#s4
background:url('f1.png') -160px -130px;}
</style>
</head>
<body>
<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 কো
154

ইেমজ স্�াইটস্ কাাা েকৗশল
ইেমজ ইেমজ স্�াইটস েকৗশল িট বযবহাোা জ� েকা্
একিট HTML ইিলেমনট েযম্ <div> <li> <p> এর
বযাক�াউনড ইেমজ িহেসেব এমন একিট িসে�ল ইেমজ
বযবহাা কােত হেব েযখাে্ একটা েপেজা েমাটামিট
সকল ইেমজ একটু দূা� োেখ অব�া্ কােব। েযম্,
এখা্ েথেক ইেমজিট ডাউ্েলাড কো েদখু্। আইকন 155
িহেসেব বযবহাা কাাা জ� িসে�ল ইেমেজা
বযাক�াউনড ্া থাকেল ভাল হয় এবং .png ফােমেটা
ইেমজ হেল ভাল হয়।ধো ে্য়া যাক চাািট আইকন এর

সম�েয় একটা িসে�ল ইেমজ ৈতিা কাা হল। এখন এগুেলােক আলাদা আলাদা ভােব পযরা�েম
�দশর্ কােত হেব। এজ� HTML ইিলেমনট িহেসেব আন অডরাা িল� বযবহাা কাা েযেত পাো।
েযম্ <ul id="nav"><li id="s1"></li><li id="s2"></li><li id="s3"></li><li
id="s4"></li></ul> ।
ইেমজ স্�াইটস্ এর মাধযেম �দিশরত চাািট আইকন

<html>
<head>
<style>
li#s1
background:url('f1.png') 0 0 ;}
li#s2
background:url('f1.png') -130px 0;}
li#s3
background:url('f1.png') -30px -130px ;}
li#s4
background:url('f1.png') -160px -130px;}
</style>
</head>
<body>
<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>
f1.png ইেমজিট াাখেত হেব। f1.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। sprites ্ােম
Save as এ ি�ক কো File name: index.html , Save as type : All files, িদেয় save কো 156

উপোা �েজ�িটেত চাা লাইে্া একটা আন অডরাা িল� ে্য়া হেয়েছ। �েতযকিট িলে� আইিড
িসেল�া যু� কাা হেয়েছ। �যাইল শীেট <style>……… </style> এর মেধয #nav li{list-
style:none;} যু� কােত হয় িল� এর িস�ল দূা কাাা জ�। li#s1{ width:130px;
height:130px; background:url('f1.png') 0 0 ;} এর অনুরূপ যু� কােত হয় ইেমেজা কতটুক
157
অংশ �দিশরত হেব তা ি্েদরশ কাাা জ�। এখাে্ width:130px; height:130px; �াাা ি্ধরািাত
হেয়েছ ইেমেজা �দিশরত অংেশা উ�তা হেব 130px এবং চওড়া হেব 130px ।li#s4{width:130px;
height:115px; background:url('f1.png') -160px -130px;} এখাে্ background:url('f1.png')

এর মাধযেম �েয়াজ্ীয় ইেমেজা িলংক যু� কাা হেয়েছ। -160px -130px; এর �থম -160px �াাা
ি্েদরশ কোা হেয়েছ উপর েথেক 160px বােদ �দিশরত হেব, ি�তীয় -130px; �াাা ি্েদরশ কাা হেয়েছ
বাম িদক েথেক 130px বােদ �দিশরত হেব। অথরাৎ চতুথর কণরাোা ইেমজিট �দিশরত হেব।
ইেমজ স্�াইটস্ কাাা ি�তীয় েকৗশল

ইেমজ স্�াইটস্ প�িত বযবহাোা জ� এমন একটা
িসে�ল ইেমজ ৈতিা কাা হয় েযখাে্ িত্িট একই
মােপা ইেমজ পযরায়�েম যথা�েম 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>
<h1>2nd image</h1>
এখাে্ <h1></h1>বযবহাা কাা হেয়েছ ইেমজ স�িকরত তথয যু� কাা এবং ইেমজ গুেলােক েয্
আলাদাভােব সহেজই েবাঝা যায়। মূলত �িতটা <div></div> এর বযাক�াউনড িহেসেব ইেমজ সমূহ
যু� কাা হেব এবং �দশর্ কাা হেব। এখাে্ �িতটা <div></div> েক আলাদাভােব িচি�ত কাাা
জ� id িসেল�া যু� কাা হেয়েছ।
158

ইেমজ স্�াইটস্ এর মাধযেম �দিশরত চাািট ইেমজ
<html>
<head>
<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;
background-image: url(img.png);
background-position: center;}
background-image: url(img.png);
background-position: bottom;}
</head>
<body>
<center>
<h1>Single image</h1>
<div id="img"></div>
<h1>3rd image</h1>
<h1>1st image</h1>
<h1>2nd image</h1>
</center>
</body>
</html>
img.png ইেমজিট াাখেত হেব। img.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। sprites ্ােম
159

িস এস এস অংেশ
#img {width: 207px; height: 253px;

background-image: url(button.png);}
উপোা েকাড �াাা স�ূণর ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্
েদখাে্া হেয়েছ।
#img1 {display: block;

width: 207px; height: 70px; 160
background-image: url(button.png);}

উপোা েকাড �াাা ১ম ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ েদখাে্া
হেয়েছ। েযেহেত এই ইেমজিট সকেলা �থেম আেছ তাই background-position ে�াপািটর বযবহাা
কাাা �েয়াজ্ হয়ি্।সুতাাং স�ূ্র button.png ইেমেজা �থম েথেক width: 207px; height:
70px; অংশ পযর� �দিশরত হেব।
background-image: url(button.png);
background-position: center;}
উপোা েকাড �াাা ২য় ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ center
েদখাে্া হেয়েছ। সুতাাং button.png ইেমেজা মােঝা 207px; height: 70px; অংশ পযর� �দিশরত
হেব ।
background-image: url(button.png);
background-position: bottom;}
উপোা েকাড �াাা ২য় ইেমেজা আকাা আকৃিত এবং বযাক�াউনড িহেসেব ইেমজ েলােকশ্ bottom
েদখাে্া হেয়েছ। সুতাাং button.png ইেমেজা েশেষা 207px; height: 70px; অংশ পযর� �দিশরত
হেব ।
িমিডয়া টাইপ (Media Type)

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

<html>
<head>
<style>
@media screen
{
.post{color:#066;
font-family:Tahoma;
.mar{color: #C03;
font-size:36px}
}
@media print{
body{background:#fff;}
.post{color:#000;
font-family:Verdana, Geneva, sans-serif;
}
</style>
</head>
<body>
<p class="post">
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>
name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট Mozilla
162

ে্িভেগশ্ (Navigation)
েযেকা্ ওেয়ব সাইেটা জ�ই ে্িভেগশ্ একিট গুরু�পূণর িবষয়।
কাাণ ঐ ওেয়ব সাইেট িক ধােণা তথয আেছ এবং েকা্ ধােণা তথয
েকাথায় আেছ তা সহেজ খুেঁ জ পাওয়াা অ�তম সহজ মাধযম হে�
ে্িভেগশ্ বাা। মূলত ে্িভেগশ্ বাো একটা ওেয়ব সাইেটা সকল
েপেজা িলংক িবেশষ প�িতেত, আকষরণীয়ভােব �দশর্ কাা
হয়।আেগা িদে্ HTML েটিবেলা মাধযেম ে্িভেগশ্ বাা ৈতিা
কাা হেতা, যা বযবহাা বা�ব এবং েদখেতও সু�া িছেলা ্া, িক�
বতরমাে্ CSS বযবহাোা মাধযেম অে্ক সু�া ে্িভেগশ্ বাা ৈতিা
কাা যায়।�কৃত পে� ে্িভেগশ্ বাা হে� কতগুেলা িলংক এর
িল�।ে্িভেগশ্ বাা দুই ধােণা হেয় থােক। েযম্;
• ভািটরকযাল ে্িভেগশ্ বাা (Vertical Navigation Bar)

• হিাজনটাল ে্িভেগশ্ বাা (Horizontal Navigation Bar)
<html>
<head>
<style>
*{margin:auto; padding:auto;} 163
body { background: #C99}
#navigation{background:url(images/navigation.png) repeat-x;
margin-top:20px;
width:650px;

height:40px;
font-family:Tahoma;
font-size:14px;}
#navigation ul {
list-style-type:none;
margin-left:auto;}
#navigation ul li {
float:left;
background:url(images/border.png) no-repeat;
background-position:right; }
#navigation ul li a {
padding:10px 28px 10px 20px ;
display:block;
text-decoration:none;
text-align:center;
color: #F69;
font-weight:bold;}
#navigation ul li a:hover {
background: url(images/navov.png) repeat-x;
margin:0px 1px 0px 1px;
color:#F3C;}
#home{background:url(images/border.png) left no-repeat;}
</style>
</head>
<body >
<div id="navigation">
<ul>
<li><a href="#"> HOME</a></li>
<li ><a href="#">ABOUT US</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">BLOG</a></li>
<li><a href="#">FORAM</a></li></ul>
</div>
</body>
</html>
164

ে্িভেগশ্ বাোা সাধাাণ গঠ ন
ে্িভেগশ্ বাা হে� কতগুেলা িলংক এর িল�। তাই
সাধাাণত ে্িভেগশ্ বাা ৈতিােত HTML এর
<body></body> এর মেধয একটা <div></div> এবং তাা
মেধয আ্অডরাা িল� <ul><li></li><li></li></ul> এর
অনুরূেপ ৈতিা কােত হয়।ওেয়ব সাইেট ে্িভেগশ্ বাা
�দশরে্া সময় বাটে্া মত কাজ কো। স�ূণর ে্িভেগশ্
বাািট েবশ িকছু বাটে্ িবভ� থােক। একিট ে্িভেগশ্ বাো
কতিট বাট্ থাকেব তা মূলত <li></li> টযােগা সংখযাা
উপর ি্ভরা কো।িঠক যতিট বাট্ �েয়াজ্ ততিট
<li></li> টযাগ ি্েত হয়।িবিভ� েপেজা সােথ িলংক ৈতিাা
জ� <li></li> টযােগা মেধয <a></a>টযাগ বযবহাা কাা হয়।তাহেল একটা ে্িভেগশ্ বাোা
সাধাাণ গঠন হে� <div><ul><li><a></a></li><li><a></a></li></ul></div> এর অনুরূপ।
েপেজ আোা অে্ক div উপাদা্ থাকেত পাো তাই ে্িভেগশ্ বাোা div েক আলাদাভােব
েদখাে্াা জ� id যু� কােত হয়।েযম্ <div id="navigation">।
<html>
<head>
</head>
<body > 165
<ul>
<li><a></a></li>
<li><a></a></li>
</ul>
</div>
</body>
</html>
ে্িভেগশ্ বাোা বাটে্ িলংক যু� করন

ে্িভেগশ্ বাোা েকা্ বাটে্ ি�ক কােলই ্তু্ একিট
েপজ ওেপ্ হয়।এজন্য বাটে্া সােথ ঐ েপেজা িলংক
ৈতিা কােত হয়।আা এ কাজিট কাাা জ� �িতটা
<li></li> এর মেধয <a href="#">HOME</a>এর
অনুরূপ এযাংকা টযাগ বযবহাা কাা হয়। href="#" এর
েযখাে্ # িচ�িট ােয়েছ েসখাে্ েয েপেজা সােথ িলংক
ৈতিা কােত হেব তাা এে�স েলখেত হেব। েযম্
href="www.tutohost.com" ।
<html>
<head>
</head>
<body > 166
<ul>
<li ><a href="www.tutohost.com">ABOUT US</a></li>

<li><a href="www.tutohost.com">CONTACT US</a></li>
<li><a href="www.tutohost.com">BLOG</a></li>
<li><a href="www.tutohost.com">FORAM</a></li></ul>
</div>
</body>
</body>
</html>
ে্িভেগশ্ বাোা div উপাদাে্া িডজাই্

ে্িভেগশ্ বাা এখন শুধুমা� িলংক �কােশা জ� বযবহাা
হয় ্া। এটা ওেয়ব সাইেটা েসৗ�যরেক অে্কাংেশ বিধরত
কো।ে্িভেগশ্ বাোা সাধাাণ গঠ ন <div
id="navigation"><ul><li><a></a></li><li><a></a
></li></ul></div> এর অনুরূপ। �থেমই এজ� css
�াাা div এর আইিড িসেল�া # navigation এর মাধযেম
167
স�ূণর ে্িভেগশ্ বাোা width, height, font-family,
font-size, background ইতযািদ ি্ধরাাণ কো েদয়া হয়।

<html>
<head>
<style>
*{margin:auto; padding:auto;}
margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
</style>
</head>
<body >
<ul>
</div>
</body>
</body>
</html>
168

ে্িভেগশ্ বাো ul,li উপাদাে্া িডজাই্
েযেহতু ে্িভেগশ্ বাো আ্অডরাা িল� বযবহাা কাা হয়।
আন অডরাা িল� ৈতিা কােল �িতিট লাইে্া শুরুেত একটা
বৃ�াকাা িস�ল যু� হয়, যা ে্িভেগশ্ বাো �েয়াজ্
ে্ই।ে্িভেগশ্ বাোা সাধাাণ গঠ ন <div
id="navigation"><ul><li><a></a></li><li><a></a
></li></ul></div> তাই এই বৃ�াকাা িস�ল দূা কাাা
জ� �যাইল শীেট েলখেত হেব, #navigation ul {list-
style-type:none;}। যিদ হিাজনটাল ে্িভেগশ্ বাা ৈতিা
কােত হয় তাহেল �যাইল শীেট েলখেত হেব,#navigation
ul li {float:left; }।
<html>
<head>
<style>
margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
#navigation ul {
list-style-type:none;}
#navigation ul li {
float:left;
background-position:right;}
</style>
</head>
<body >
<ul>
<li><a href="#">FORAM</a></li></ul> 169
</div>
</body>
</body>
</html>
ে্িভেগশ্ বাো a উপাদাে্া িডজাই্

েযেহেতু ে্িভেগশ্ বাা কতগুেলা িলংক এর সমি�, তাই এর
িডজাই্ প�িতও মূলত এংকা টযাগ ি্ভরা।সাধাাণত েকা্
েট�ট �াাা িলংক কােল েট�টিটা ি্েচ একটা আনডাা
লাই্ আেস।ে্িভেগশ্ বাোা েমনুেত েসটাা �েয়াজ্
ে্ই। তাই এই আনডাা লাই্েক দূা কাাা জ� �যাইল
শীেট েলখেত হেব,#navigation ul li a {text-
decoration:none; } এছাড়া padding, color, font-
weight, text-align,ইতযািদ ে�াপািটর ি্ধরাাণ কো েমনুা
িডজাই্ ৈতিা কাা হয়।
<html>
<head>
<style> 170

margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
#navigation ul {
#navigation ul li {
float:left;
background-position:right;}
display:block;
text-align:center;
color: #F69;
font-weight:bold;}
</style>
</head>
<body >
<ul>
</div>
</body>
</body>
</html>
171

ে্িভেগশ্ বাোা মাউস ইেফ�
বতরমাে্ �ায় সকল ে্িভেগশ্বাোই কমেবিশ মাউস
ইেফ� থােক। সাধাাণত আমাা েকা্ ে্িভেগশ্বাোা
উপর মাউস ি্েয় েগেল বাটে্া িডজাই্,কালাা, েমনুা
েট�ট কালাা, অে্ক সময় েট�ট এর সাইজ, ে�িডেয়নট
ইতযািদ পিাবতর্ হেত েদিখ। এটা কাাা জ� এংকা
টযােগা a:hover িসউেডা িসেল�ািট বযবহাা কাা হয়।
background,color,padding, color, font-
weightইতযািদ ে�াপািটর ি্ধরাাণ কো েমনুা মাউস েহাবাা
ইেফ� িডজাই্ ৈতিা কাা হয়।
<html>
<head>
<style>
margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
#navigation ul {
#navigation ul li {
float:left;
display:block;
text-align:center;
color: #F69;
font-weight:bold;}
color:#F3C;} 172
</style>
</head>
<body >

<ul>
</div>
</body>
</body>
</html>
ে্িভেগশ্ বাো ইেমজ িািপেটশ্

ে্িভেগশ্ বাোা সাইজ একটা গুরু�পূণর িবষয়।
যিদ ে্িভেগশ্ বাোা িডজাই্ সু�া কােত িগেয়
সাইজ বৃি� কো েফলা হয়, তাহেল েয েপেজ
ে্িভেগশ্ বাািট বযবহাা কাা হেব তাা সাইজ 173
বৃি� পােব।আা ফলাফল িহেসেব েপজিট �দশর্
হেত েবশ সময় ে্েব, যা আমােদা কাংি�ত
্য়।আমােদা �তযাশা হে� আমাা িডজাই্ও

সু�া করব িক� েপেজা সাইজ বৃি� করব ্া।http://tutohost.com/bangla/css/26g.php েত েয
ে্িভেগশ্ বাািট ৈতিা কাা হেয়েছ, এখাে্ স�ূণর ে্িভেগশ্ বাোা বযাক�াউেনড
background:url(images/navigation.png) repeat-x; এর অনুরূপ 1px এর ইেমজ িািপড কো
বযবহাা কাা হেয়েছ। repeat-x �াাা ি্েদরশ কাা হয় েয 1px এর ইেমজিট x অ� বাাবা বাাবাা
width অনুসাো িািপড হেব।অথরাৎ স�ূণর ে্িভেগশ্ বাা আমাা 1px এর 1Kb এর একটা ইেমজ
িািপট কো ৈতিা কোিছ।ইেমজ িািপেটশ্ ্া কােল যাা সাইজ হেত পাাত 500Kb-600Kb।
<html>
<head>
<style>
margin-top:20px;
width:600px;
height:40px;
font-family:Tahoma;
font-size:14px;}
#navigation ul {
#navigation ul li {
float:left;
display:block;
text-align:center;
color: #F69;
font-weight:bold;}
color:#F3C;}
</style>
</head>
<body >
<ul>
174

</div>
</body>
</body>
</html>
ভািটরকযাল ে্িভেগশ্ বাা (Vertical Navigation Bar)

েয সকল ে্িভেগশ্ বাা ভািটরকযালী অব�া্ কো তােদােক
ভািটরকযাল ে্িভেগশ্ বাা বলা হয়। সধাাণত সাইড বাা এবং
ফুটাো এ ধােণা ে্িভেগশ্ বাা বযবহাা কাা হয়।এ ধােণা
ে্িভেগশ্ বাা ৈতিা কােত সাধাাণত এংকা a
িসেল�োা display: block; অথরাৎ display ে�াপািটরা মা্ block
বযবহাা কাা হয়। এর ফেল শুধু মা� এংকা �াাা েয েট�িটেত িলংক
যু� কাা হেয়েছ শুধুমা� েসই েট�িটই ্য় বাং পুোা বযক�াউন্ড
সহ এিায়া ি�েকবল হয় এবং width ে�াপািটর বযবহাা
কো বযক�াউনড এিায়া কতটুক হেব তা ি্ধরাাণ কো েদয়া যায়।
175

<html>
<head>
<style>
#navigation {margin-top:50px;}
#navigation li {list-style:none;}
#navigation a {background:#04A3B5;
border:1px solid #165A69;
color:#eee;
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
padding:5px;
display: block;
width: 150px;
padding-left: 10px;}
#navigation a:hover {
background:#a2b3a1;
color:#C09;}
</style>
</head>
<body >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
</body>
</html>
176

হিাজনটাল ে্িভেগশ্ বাা (Horizontal Navigation Bar)
েয সকল ে্িভেগশ্ বাা হিাজনটালী অব�া্ কো তােদােক
হিাজনটাল ে্িভেগশ্ বাা বলা হয়। সধাাণত েকা্ ওেয়ব
সাইেটা েমই্ েমনু িহেসেব এ ধােণা ে্িভেগশ্ বাা বযবহাা
কাা হয়।এ ধােণা ে্িভেগশ্ বাা ৈতিা কােত সাধাাণত
িল� li িসেল�োা display:inline; অথরাৎ display
ে�াপািটরা মা্ inline বযবহাা কাা হয়। আবাা িল� li
িসেল�োা float:left; বযবহাা কো এংকা a
িসেল�োা display: block; বযবহাা কোও হিাজনটাল
ে্িভেগশ্ বাা ৈতিা কাা যায়।
<html>
<head>
<style>
body { background:#C99}
#navigation ul {
list-style:none;
width:580px; 177
margin-top:50px;}
#navigation ul li {
display:inline;}
padding:5px 0;
width:110px;
font-family:Tahoma, Geneva, sans-serif;
font-size:20px;
background:#04A3B5;
color:#eee;
float:left;
text-align:center;
border:1px solid #165A69;}
background:#a2b3a1;
color:#C09;}
</style>
</head>
<body >
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Products</a></li>
</ul>
</div>
</body>
</html>
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবর মত েদখােব।
178

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

ইেমজ গযালািাা ৈবিশ�য সমূহ
একটা ইেমজ গযলািােত িবিভ� ধােণা িফচাা বা
ৈবিশ�য থাকেত পাো। বতরমাে্ CSS3 বযবহাা
কো অে্ক সু�া সু�া ইেফ� ইেমজ
গযালািােত যু� কাা হে�।এখাে্ CSS3 ্য়,
CSS বযবহাা কো িক ধােণা ইেমজ গযালািা
ৈতিা কাা যায় এবং এেত িক ধােণা িফচাা যু�
কাা যায় এক ্জো েদেখ ে্য়া যাক।
HTML এবং CSS �াাা

ৈতিাকৃত একিট ইেমজ গযালািা
180

ইেমজ গযালািাা িফচাা সমূহ
• স�ূণর ইেমজ গযালািাা একটা ি্িদর� এিায়া, বযাক�াউনড কালাা এবং বডরাা থাকেব।
• ইেমজ গযালািােত ি্িদর� সংখযক, ি্িদর� সাইেজা েছাট আকৃিতা ইেমজ থাকেব।
• �েতযকিট ইেমেজ ি্িদর� াং এর বডরাা থাকেব।
• �েতযকিট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল তা বড় কো �দশরে্া জ� একিট
কমন গযালািা ি�্ থাকেব।
• গযালািা ি�ে্া ি্িদর� এিায়া, বযাক�াউনড কালাা এবং বডরাা থাকেব।
• �েতযকিট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল, েছাট আকৃিতা ইেমজ সমূেহা
বডরাা পিাবতর্ হেব।
• গযালািা ি�ে্া মেধয েয বড় আকৃিতা ইেমজ সমূহ �দিশরত হেব তা ি্িদর� আকাোা
হেব।
• গযালািা ি�ে্া মেধয েয বড় আকৃিতা ইেমজ সমূহ �দিশরত হওয়াা সময় �িতিট
ইেমেজা ি্েচ ইেমজ স�িকরত িকছু েলখা থাকেব।
ইেমজ গযালািাা ইেমেজা গঠ ন

সাধাাণত ইেমজ গযালািােত <a></a> বা
এংকা টযােগা মেধয িকছু
<image></image>ইেমজ টযাগ থােক।
�াথিমক পযরােয় েছাট আকৃিতা ইেমজ
শুধুমা� <image></image>ইেমজ টযাগ
বযবহাা কো �দশর্ কাা হয়। েছাট
আকৃিতা ইেমজ সমূেহা উপর মাউস
পেযনটাা ি্েয় েগেল েয বড় ইেমজ �দিশরত
হয় তাা জ�
<span><image></image></span>
বযবহাা কাা হয় এবং বড় ইেমজ এর ি্েচ
েলখা �দশরে্া জ� <span></span>
এর মেধযই শুধুমা� েট�টিট িলেখ িদেলই
চেল। যিদ েলখাটােক ইটািলক েদখেত চাওয়া হয় তাহেল <i> text </i> বযবহাা কাা েযেত পাো।
তাহেল �িতটা ইেমজ এর জ� গঠন হেব <a><img /><span><img /><br /><i> text
</i></span></a> এর অনুরূপ।
ইেমজ গযালািাা �িতিট <a></a> বা এংকা টযাগেক আলাদাভােব িচি�ত কাাা জ� <a
class="galpic"> এর অনুরূপ �াস িসেল�া বযবহাা কাা হয়। যিদ ইেমজ গযালািােত দুই বা ততিধক 181
লাই্ থােক তাহেল �িতটা লাইে্া েশেষ একটা কো <br /> বযবহাা কােত হেব।

ইেমজ গযালািাা ইেমেজা HTML গঠ ন
<a class="galpic">
<img />
<span>
<img />
<br />
<i> text </i>
</span>
</a>
স�ূণর ইেমজ গযালািাা গঠ ন

স�ূণর ইেমজ গযালািািট �থেম একটা
<div> </div> এর মেধয াাধা হয়।এই িডভ
টযাগিটেক আলাদাভােব িচি�ত কাাা জ�
<div id="container"> এর অনুরূপ আইিড
িসেল�া বযবহাা কাা হয়। <div> </div>
এর মেধয ইেমজ সমূহ �াপ্ কাা হয়।�িতটা
ইেমেজা লাইে্া েশেষ একটা কো <br />
বযবহাা কােত হয়।এাপা বড় ইেমজ সমূহ
েকাথায় �দিশরত হেব তাা জ� একটা
গযালািা ি�্ ৈতিা কােত হয় এজ� একিট
<div> </div> টযাগ ে্য়া হয় হয়।এই িডভ
টযাগিটেক আলাদাভােব িচি�ত কাাা জ�
<div id="screen">এর অনুরূপ আইিড
িসেল�া বযবহাা কাা হয়।যিদ গযালািা ি�ে্া মেধয Gallery Screen এর অনুরূপ েকা্ েট�ট
�ভািবক আব�ায় �দশর্ কােত চাওয়া হয় তাহেল <div id="screen"><h1>Gallery<br
/>Screen</h1></div> এর অনুরূপ বযবহাা কাা েযেত পাো।
ইেমজস�ূণর ইেমজ গযালািাা HTML গঠ ন

<html>
<head>
</head>
<body>
<div id="container">
<a class="galpic"><img /><span><img /><br /><i> text
</i></span></a>
<a class="galpic"><img /><span><img /><br /><i> text 182
</i></span></a>
<br />
</i></span></a>

</i></span></a>
<br />
<div id="screen"><h1>Gallery<br />Screen</h1></div>
</div>
</body>
</html>
183

স�ূণর ইেমজ গযালািাা এিায়া,বযাক�াউনড এবং বডরাা ি্ধরাাণ
স�ূণর ইেমজ গযালািািট <div id="container"></div> এর
মেধয অবি�ত।একটা 345px X 425px এর ইেমজ গযালািাা
জ� �যাইল শীেট েলখেত হেব
#container{width:345px; height:425px;}। #999 অথরাৎ
ে� কালাা এর বযাক�াউনড ৈতিাা জ� েলখেত হেব
background:#999; এবং 1px এর কােলা ােঙা বডরাা ৈতিাা
জ� েলখেত হেব border:1px #000 solid;।ইেমজ সমূহেক
পা�া েথেক িকছুটা দূাে� াাখাা জ� padding:7px 2px 7px
7px; েলখেত হয়।
স�ূণর ইেমজ গযালািাা এিায়া,বযাক�াউনড এবং বডরাা এর জ�

�যাইল
#container{
background:#999;
width:345px;
height:425px;
border:1px #000 solid;
position:relative;}
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
</style>
</head>
<body> 184
</i></span></a>
</i></span></a>
<br />
</i></span></a>
</i></span></a>
<br />
</div>
</body>
</html>
185

ইেমজ গযালািােত ি্িদর� আকৃিতা ইেমজ সংেযাজ্
ইেমজ গযালািােত �িতিট ইেমজ সংেযাজ্ এর জ� <a
class="galpic"><img /><span><img /><br
/><i> text </i></span></a> এর দুইিট img টযােগা
মেধযই src="1.jpg" বা src="../images/8d.png"
অথবা
src="http://www.tutohost.com/bangla/css/imag
es/pic/27e.png" এর অনুরূপ এি্িবউট যু� কো
ইেমজ যু� কােত হেব। েছাট ইেমেজা জ� �থম img
টযােগা মেধয width="163px" height="80px" এর
অনুরূপ এি্িবউট যু� কো ইেমজ এর আকৃিত ি্ধরাাণ
কােত হেব।েছাট ইেমজিটা উপর মাউস ি্েয় েগেল েয
বড় ইেমজিট �দিশরত হেব তাা জ� span টযােগা মেধয
অবি�ত img টযােগা মেধয width="300px"
height="185px" এর অনুরূপ এি্িবউট যু� কো ইেমজ এর আকৃিত ি্ধরাাণ কােত হেব।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
</style>
</head>
<body>
<a class="galpic"><img src="1.jpg" width="163px"
height="80px" /><span><img src="1.jpg" width="300px"
height="185px" /><br /><i>
text </i></span></a>
height="80px" /><span><img src="2.jpg" width="300x"
height="185px" /><br />
<i>text</i></span></a>
<br /> 186

<br />
</div>
</body>
</html>
187

সাধাাণ অব�ায় ইেমজ গযালািােত বড় আকৃিতা ইেমজ লুকাে্া
ইেমজ গযালািােত বড় ইেমজিটেক �ভািবক অব�ায়
লুিকেয় াাখা হয়। একজন বযবহাাকাাী যখন ইেমজিটা
উপর মাউস পেয়নটাা ি্েয় যায় তখন তা �দিশরত
হয়।এ কাজিট কাাা জ� �যাইল শীেট .galpic span{
position:absolute; left: 0px; visibility:hidden;}
যু� কােত হেব। এখাে্ position:absolute; left:
0px; এর মাধযেম বড় ইেমজিটেক সবরবােম �া্ েদয়া
হেয়েছ। visibility:hidden; এর মাধযেম বড় ইেমজ
গুেলােক লুকাে্া বা হাইড কাা হেয়েছ। এখাে্ একটা
�� থাকেত পাো “ইেমজ গুেলােক যখন �দশর্ কাা
হে� ্া তখন েক্ পিজশ্ এবসিলউট কো পিজশ্
ি্েদরশ কাা হল? আমােদা �েজে� ইেমজ গুেলাা �ম
িছল “েছাট ইেমজ, বড় ইেমজ, েছাট ইেমজ, বড় ইেমজ,
েছাট ইেমজ, বড় ইেমজ,েছাট ইেমজ, বড় ইেমজ” এাকম। তাই বড় ইেমেজা পিজশ্ এবসিলউট
কো েদয়ায় বড় ইেমজগুেলা �াভািবক পযরায়�ম েথেক েবিড়েয় এসেছ এবং এ কাােণই েছাট ইেমজ
সমূহ একে� পাশাপািশ অব�া্ কােত েপোেছ।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
</style>
</head>
<body>
height="80px" /><span><img src="1.jpg" width="300px" 188

<br />
<br />
</div>
</body>
</html>
189

ইেমজ গযালািােত েছাট ইেমেজা বডরাা এবং মািজর্
ইেমজ গযালািােত েছাট ইেমেজা চাাপােশ সাধাাণত
সরু মািজর্ বযবহাা কাা হয় এবং ইেমজ সমূহেক
সু�াভােব সিঠক �াে্ �াপ্ কাাা জ� মািজর্
বযবহাা কাা হয়।েযেহতু ইেমজ গযালািাা container
আইিড িসেল�া যু� div এ padding:7px 2px 7px
7px; বযবহাা কাা হেয়িছেলা সুতাাং েছাট ইেমজ
গুেলােক সিঠক �াে্ ি্িদর� দূাে� াাখাা জ� top
এবং left মািজর্ �েয়াজ্ ে্ই িক� ইেমেজা দুিট
লাইে্া মেধয দূা� াাখাা জ� 5px এবং পাশাপািশ
দুিট ইেমেজা মােঝ দূা� াাখাা জ� 5px মািজর্
�েয়াজ্। এজ� margin: 0 5px 5px 0; �যাইল
শীেট যু� কাা হেয়েছ।border: 1px solid #f00; এর
মাধযেম �িতিট েছাট ইেমেজা চাািদেক 1px এর লাল
ােঙা বডরাা ৈতিা কাা হেয়েছ। বডরাা এবং মািজরে্া জ� �যাইল শীেট যু� কােত হেয়েছ .galpic
img{border: 1px solid #f00; margin: 0 5px 5px 0;}।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
border: 1px solid #f00;
margin: 0 5px 5px 0;}
</style>
</head> 190
<body>

<br />
<br />
</div>
</body>
</html>
191

গযালাাী ি�্ (Gallery Screen)
ইেমজ গযালাাীা েছাট ইেমজ গুেলাা উপর মাউস
পেয়নটাা ি্েয় েগেল বড় ইেমজ সমূহ েযখাে্ �দিশরত
হেব েসই �া্িট একটা ি�ে্া মত েদখাে্াা জ�
একিট div উপাদা্েক িডজাই্ কাা হয়,আর এটাই
হে� গযালাাী ি�্।আা এই গযালাী ি�ে্
কােলাােঙা বযক�াউনড এর জ� background:#000;
আকৃিত ি্ধরাােণা জ� width:320px;
height:223px; আর 8px এর বডরাা ৈতিাা জ�
border:8px #960 solid; আর সব িমিলেয়
#screen{background:#000; width:320px;
height:223px; border:8px #960 solid;} �যাইল
শীেট যু� কাা হেয়েছ। গযালাাী �ীে্া মােঝ Gallery
Screen েলখািট ােয়েছ। েলখািটা কালাা ি্ধরাােণা
জ� color:#F00; ফনট ি্ধরাােণর জ� font-family:Tahoma; এলাই্ ি্ধরাােণা জ� text-
align:center; সব িমিলেয় #screen h1{color:#F00; font-family:Tahoma; text-align:center;}
�যাইল শীেট যু� কাা হেয়েছ।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
#screen{background:#000;
width:320px;
height:223px; 192
border:8px #960 solid;}
#screen h1{color:#F00;
font-family:Tahoma;
text-align:center;}

</style>
</head>
<body>
<br />
<br />
</div>
</body>
</html>
193

ইেমজ গযালাাীা েছাট ইেমেজা বডরাা পিাবতর্
ইেমজ গযালাাী �েজ�িটা িফচাো িছল েয �েতযকিট
েছাট ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল, েছাট
আকৃিতা ইেমেজা বডরাা পিাবতর্ হেব।এ কাজিট
কাাা জ� েছাট ইেমেজা উপর েহাবাা ইেফ� িদেত
হেব। এজ� িসউেডা িসেল�া বযবহাা কােত হেব
.galpic:hover img এবং েছাট আকৃিতা ইেমেজা জ�
্তু্ একিট বডরাা border: 1px solid blue;
িড�াোশ্ কােত হেব।তাহেল �েতযকিট েছাট
ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল তাা বডরাা
লাল েথেক ্ীল াং এ পিাবিতরত হেব।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
width:320px;
height:223px;
font-family:Tahoma; 194
text-align:center;}
.galpic:hover img{
border: 1px solid blue;}
</style>

</head>
<body>
<br />
<br />
</div>
</body>
</html>
195

ইেমজ গযালাাীেত বড় ইেমজ �দশর্
ইেমজ গযালাাী �েজ�িটা মূল িফচাা িছল েয �েতযকিট েছাট
ইেমেজা উপর মাউস পেয়নটাা ি্েয় েগেল গযালাাী ি�ে্ ঐ
ইেমজিট বড় আকাাো �দিশরত হেব।সাধাাণ অব�ায় ইেমজ
গযালািােত বড় আকৃিতা ইেমজিট লুকাে্া অব�ায় াাখা
হেয়িছল, তাই এটােক েহাবাা ইেফ� িদেয় িভিজবল কােত
হেব। এজ� িসউেডা িসেল�া বযবহাা কােত হেব
.galpic:hover span । বড় ইেমজিট িভিজবল কােত
visibility: visible; ইেমজিট েকাথায় �দিশরত হেব তা
ি্ধরাাণ কােত top: 196px; left: 14px; সবিমিলেয় �যাইল
শীেট .galpic:hover span{visibility: visible; top:
196px; left: 14px;} যু� কাা হেয়েছ। মূলত এখাে্ span
েক িভিজবল কাা হেয়েছ।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
width:320px;
height:223px;
font-family:Tahoma;
text-align:center;}
196
.galpic:hover img{
.galpic:hover span{
visibility: visible;

top: 196px;
left: 14px;}
</style>
</head>
<body>
<br />
<br />
</div>
</body>
</html>
197

ইেমজ গযালাাীেত বড় ইেমেজা জ� �যাইল ৈতিা
�কৃতপে� বড় ইেমজিট েয span এর মেধয আেছ তাা
জ� �যাইল ৈতিা কােত হেব।বড় ইেমজিটা েপছে্
চাাপােশ একটা হালকা হলুদ বেণরা বযাক�াউনড ৈতিাা
জ� background:#EBEDBA; বড় ইেমজিটা
েপছে্ েয্ ৬ িপে�ল পযর� হালকা হলুদ বেণরা
বযাক�াউনড েদখা যায় এজ� ৬ িপে�ল এর পযািডং
ৈতিা কােত padding:6px; এবং বাইো চািািদেক
লাল ােঙা ১ িপে�ল এর বডরাা ৈতিা কােত
border:1px solid #f00; সব িমিলেয় �যাইল শীেট
.galpic:hover span{background:#EBEDBA;
padding:6px; border:1px solid #f00;} যু� কাা
হেয়েছ।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
width:320px;
height:223px;
font-family:Tahoma; 198
text-align:center;}
.galpic:hover img{

.galpic:hover span{
top: 196px;
left: 14px;
background:#EBEDBA;
padding:6px;
border:1px solid #f00;}
</style>
</head>
<body>
<br />
<br />
</div>
</body>
</html>
199

ইেমজ গযালাাীেত বড় ইেমেজা ি্েচ ইেমজ স�িকরত েলখা �দশর্
সাধাাণত ইেমজ গযালাাীেত ইেমজেক যখন বড় কো
�দশর্ কাা হয়, তখন এর ি্েচ ইেমজ স�িকরত িকছু
েক�ট �দশর্ কাা হয়। এই েট�ট হেত পাো ইেমজিট
িকেসা? বা ইেমজিট �াাা িক �কাশ কাা হেয়েছ?,
ইেমজিট কখন েতালা, েকা্ বযাি� বা �াে্া ছিব হেল
তাা পিাচয় ইতযািদ।এটা কাাা জ� HTML অংেশ
েযখাে্ text েলখা আেছ ঐ �াে্ �েয়াজ্ীয় েট�ট
েলখেত হেব েযম্ �িমকভােব েলখা হেয়েছ Action,
Concentration, Intention, এবং Nobility ।আর
েলখািটেত আোা িকছু �যাইল েদওয়া েযেত পাো।
েলখািটা ি্েচ িলংক এর আনডাালাই্ দূা কাাা জ�
text-decoration:none; ফনট ি্ধরাােণা জ� font-
family:Tahoma; ফনট সাইজ বড় কাাা জ� font-size:18px; ফনট েমাটা কাাা জ� font-
weight:bold; সব িমিলেয় �যাইল শীেট .galpic:hover span{text-decoration:none; font-
family:Tahoma; font-size:18px; font-weight:bold;} যু� কাা হেয়েছ।
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
width:320px;
height:223px;
border:8px #960 solid;} 200
font-family:Tahoma;
text-align:center;}
.galpic:hover img{
.galpic:hover span{
top: 196px;
left: 14px;
background:#EBEDBA;
border:1px solid #f00;
padding:6px;
font-family:Tahoma;
font-size:18px;
font-weight:bold; }
</style>
</head>
<body>
<br />
<br />
</div>
</body>
</html>
201

ইেমজ গযালাাী পূণার � �েজ�
একটা ইেমজ গযালাাী ৈতিাা জ� �থেম gallery ্ােম
একটা েফা�াা ৈতিা কােত হেব।এা মেধয �েয়াজ্ীয়
1.png , 2.jpg, 3.jpg, 4.jpg এর ইেমজ সমূহ াাখেত
হেব।এা পর �েয়াজ্ীয় েকাড সমূহ ে্াটপযাড এর
মাধযেম েলখাা পর file েমনু েথেক Save as এ ি�ক
কো File name: gallery.html , Save as type :
All files, িদেয় save কােত হেব।
gallery.html ফাইলিট gallery েফা�াোা মেধয
াাখেত হেব। gallery.html ফাইলিট Mozilla
Firefox িদেয় ওেপ্ কােল ইেমজ গযালাাীিট েদখা
যােব।
202

েসাসর েকাড ডাউ্েলাড করু্
<html>
<head>
<style>
#container{
background:#999;
width:345px;
height:425px;
position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
width:320px;
height:223px;
font-family:Tahoma;
text-align:center;}
.galpic:hover img{
.galpic:hover span{
top: 196px; 203
left: 14px;
background:#EBEDBA;
padding:6px;
font-family:Tahoma;
font-size:18px;
font-weight:bold; }
</style>
</head>
<body>
<br />
<br />
</div>
</body>
</html>
ইেমজ গযালাাীিট ি্েচ �দিশরত ছিবা মত েদখােব।
204

ওেয়ব েপেজ ইেমজ গযালাাী যু� কাাা �ণালী
যিদ এই ইেমজ গযালাাীিটই একিট স�ূণর েপজ িহেসেব
েকা্ সাইেট বযবহাা কােত হয় তাহেল েতম্ িবেশষ
িকছু কাাা �েয়াজ্ ে্ই। িক� যিদ েকা্ েপেজা মেধয
বযবহাা কােত হয় তাহেল <style></style> এর
মেধযা েকাড সমূহ ঐ েপেজা �যাইল শীেট যু� কো
িদেত হেব । এে�ে� েখয়াল াাখেত হেব েকা্ িসেল�া
েয্ ঐ েপেজা িসেল�োা সােথ িমেল ্া যায়। যিদ দুই
একটা িসেল�া িমেল িগেয় থােক, তাহেল তা অ� ্ােম
পিাবতর্ কো িদেত হেব এবং HTML অংেশও
পিাবতর্ কােত হেব।এছাড়া .galpic:hover span
িসেল�োা �যাইেলা বড় ইেমজিটা top: 196px;
left: 14px; পিাবতর্ কােত হেত পাো।<body>
</body> এর মেধযা অংশটুক ঐ েপেজা এর মেধযা েকাড সমূহ ঐ <body> </body> এর মেধয েয
ইিলেমনট এর পো ইেমজ গযালাীিট াাখেত হেব তাা পো যু� কো িদেত হেব।এম্ হেত পাো েকা্
একটা েপেজা শুরুেত একটা <h1></h1> এর পর <p></p>এর তাাপা আবাা <h1></h1> আেছ,
তাা পর ইেমজ গযালাাীিট �দশর্ কােত হেব। তাহেল <h2></h2> এর পো gallery.html এর
<body> </body> এর মেধয অ�ভূর� েকাড সমূহ াাখেত হেব।তাহেল ইেমজ গযালাাীিট ঐ েপেজ যু�
হেয় যােব।
<html>
<head>
<style>
body{background:#FCC;
padding-left:15px;}
p{color:#036;
font-family:Tahoma;
font-size:12px;
h1{color:#C03;
font-family:Tahoma;
font-size:24px;}
h2{color:#960;
font-family:Tahoma;
font-size:20px;}
205
#container{
background:#999;
width:345px;
height:425px;

position:relative;}
.galpic span{
position:absolute;
left: 0px;
visibility:hidden;}
.galpic img{
width:320px;
height:223px;
font-family:Tahoma;
text-align:center;}
.galpic:hover img{
.galpic:hover span{
top: 196px;
left: 14px;
background:#EBEDBA;
padding:6px;
font-family:Tahoma;
font-size:18px;
font-weight:bold; }
</style>
</head>
<body>
<h1>Welcome to www.tutowebs.com</h1>
<p>TutoWebs is leading outsourcing company that provides
creative Graphics and Web Design, interactive and responsive
Web Development, IT consultancy, Domain Registration and
Web Hosting service.</p>
<h2>Our example Image Gallery </h2>
206
<br />

<br />
</div>
</body>
</html>
207

ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা(১ম অংশ)
বাটে্া সাধাাণত চাািট অব�া থাকেত পাো।
এগুেলা হে� সাধাাণ অব�ায় বাট্িট েকম্ হেব,
মাউস বাটে্া উপর ি্েয় েগেল েকম্ হেব,মাউস
ি�ক কােল েকম্ হেব এবং মাউস ি�ক কাাা পর
েকম্ হেব। �েজ�িটেত বাটে্া �থম িত্িট
অব�া �দশর্ কাা হেব।ইেমজ স্�াইটস প�িতেত
বাট্ ৈতিাা ে�ে� বাটে্া �িতিট অব�া �দশর্
কো এমন িত্টা ইেমজ পাশাপািশ �াপ্ কো
একটা িসে�ল ইেমজ ৈতিা কাা হয়। বাটে্
�েয়াজ্ অনুসাো ইেমেজা িত্িট অংশ পযরায়�েম
�দশর্ কাা হয়।
ইেমজ স্�াইটস্ প�িতেত বাট্ ৈতিাা কাযর�ি�য়া

• ইেমজ স্�াইটস্ েকৗশল �েয়াগ কো বাট্ ৈতিাা জ� �থেম ফেটাশেপ বাটে্া �িতিট
অব�া �দশর্ কো এমন িত্টা ইেমজ পাশাপািশ �াপ্ কো একটা িসে�ল ইেমজ ৈতিা
কােত হয়।
• এইচ িট এম এল বযবহাা কো বাটে্া জ� �াথিমক গঠ ন ৈতিা কােত হয় এবং বাটে্
িলংক যু� কাা হয়।
• িস এস এস বযবহাা কো বাটে্া আকাা আকৃিত, মািজর্ এবং বাটে্াা িবিভ� অব�া অথরাৎ
সাধাাণ অব�ায় বাট্িট েকম্ েদখােব, মাউস ি্েয় েগেল অথরাৎ hover কিনডশে্ বাট্িট
েকম্ েদখােব এবং মাউস ি�ক কােল অথরাৎ active কিনডশে্ বাট্িট েকম্ েদখােব
ইতযািদ ি্ধরাাণ কাা হয়।
ফেটাশেপ বাটে্া জ� িসে�ল ইেমজ ৈতিা

�থেম ফেটাশপ ওেপ্ কো File েমনু েথেক New েত ি�ক কো width:435px এবং height:525px
এর একটা ডকেমনট ৈতিা কােত হেব। এর পর Rounded rectangle tool িসেল� কো, উপোা
ে�াপািটরস বাা েথেক width:420px এবং height:150px এর একটা Rounded rectangle ৈতিা
কােত হেব। Rounded rectangle এর েলয়াা িসেল� কো Layer েমনু েথেক Layer Style এবং
তাাপা stroke এ ি�ক কােত হেব। একটা Layer Style উইেনডা ওেপ্ হেল েসখাে্ size:3px এবং
color এ ি�ক কো #959595 কো িদেত হেব। এরপর ঐ Layer Style উইেনডােতই Gradient
Overlay েত ি�ক কো িটক িচ� িদেয় ে�িডেয়নট �েয়াগ কােত হেব। 208

এরপর িকেবাডর এ T েচেপ বা tools বাা হেত text টুল িসেল� কো Download েলখািট েলখেত হেব
েলখাা কালাা হেব সাদা অথরাৎ #ffffff। এখই ভােব text এর েলয়াা িসেল� কো Layer েমনু েথেক
Layer Style এবং তাাপা stroke এ ি�ক কো size:1px এবং color এ ি�ক কো #000000 কো
িদেত হেব।একটা বাট্ ৈতিাা কাজ স��।
এখন Ctrl েচেপ োেখ Rounded rectangle এবং text এর েলয়াা িসেল� কো Layer েমনু েথেক
Group layers িসেল� কো �প কােত হেব। এরপর Group layer িট িসেল� কো Alt এবং Shift
একসােথ েচেপ োেখ একবাা িক েবাডর এর down arrow key চাপেত হেব এর পর Alt েছেড় িদেয়
শুধুমা� Shift এবং down arrow key ১৬ বাা েচেপ ি্েচ ্ামােত হেব। এরপর এই ্তু্ বাটে্া
েলয়াা �েপ Group 1 copy েলখা থাকেব এটা পূণাায় িসেল� কো একই প�িতেত তৃতীয় ইেমজ
ৈতিা কােত হেব। তাহেল Group 1 copy 2 ৈতিা হেব।
এখন Group 1 copy এর পােশ ি�ভুেজ ি�ক কো Rounded rectangle এর Gradient Overlay েত
ডাবল ি�ক কােল Layer Style উইেনডা আসেব এখা্ েথেক Gradient বে� ি�ক কােত হেব।
Gradient বাোা বাম িদেক ি্েচ েয কােলা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো
#িচে�া পােশা 000000 েলখা গুেলােক ffffff কো ok েত ি�ক কােত হেব। আর বাম িদেক ি্েচ েয
সাদা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা ffffff েলখা গুেলােক
000000 কো ok েত ি�ক কােত হেব। অথরাৎ উ�া কােত হেব।
209

একই ভােব Group 1 copy 2 এর ে�ে� Gradient Overlay েত ডাবল ি�ক কােল Layer Style
উইেনডা আসেব এখা্ েথেক Gradient বে� ি�ক কােত হেব। Gradient বাোা বাম িদেক ি্েচ েয
কােলা াং এর color stop িট আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা 000000 েলখা গুেলােক
ffffff কো ok েত ি�ক কােত হেব। আর বাম িদেক ি্েচ েয সাদা াং এর color stop িট
আেছ,েসটােত ডাবল ি�ক কো #িচে�া পােশা ffffff েলখা গুেলােক 6a0c67 কো ok েত ি�ক
কােত হেব।
210

এরপর File েমনু েথেক save for web এ ি�ক কো ডা্িদেক উপো preset এর ি্েচা �পডাউ্
েথেক PNG-24 িসেল� কো ি্েচা িদেক save বাটে্ ি�ক কােত হেব।File name িদেত হেব
button ।তাহেল িসে�ল ইেমজিট ৈতিা হেয় যােব।
িসে�ল ইেমজ
211

ইেমজ স্�াইটস্ বাটে্া HTML �াকচাা এবং িলংক ৈতিা-(২য়
পবর)
ইেতামেধযই িসে�ল ইেমজ ৈতিাা মাধযেম স্�াইটস্
বাট্ ৈতিাা �থম ধাপ স�� হেয়েছ। এখন বাট্
ৈতিাা জ� এইচ িট এম এল �াকচাা এবং িলংক ৈতিা
কােত হেব। মূলত বাট্িট ৈতিা কােত id="button"
এর অনুরূপ আইিড িসেল�া যু� এাকটা
<div></div> িডভ টযাগ বযবহাা কাা হয় এর মেধয
<p></p>এর মাধযেম পযাাা�াফ ি্েয় তাা মেধয
class="push" এর অনুরূপ �াস িসেল�া যু� এযংকা
টযাগ <a href="#" class="push"></a> বযবহাা কাা
হয়। href="#" এর মাধযেম িলংক ৈতিা কাা হয়।
বাটে্া জ� এইচিট এম এল �াকচাািট হেব ি্�রূপ।
<html>
<head>
<title>www.tutohost.com</title>
<style>
</style>
</head>
<body>
<div id="button">
<p>
<a href="#" class="push"></a>
</p>
</div>
</body>
</html>
স্�াইটস্ বাট্ মূলত ইনটাা্রাল অথরাৎ েফা�াোা মাধযেম িলংক ৈতিাা জ� বযবহৃত হয়। আর
িলংেকা আকৃিত হয় সাধাাণত demo.html বা download/demo.zip এর অনুরূপ । অথরাৎ সাভরাো বা
েলাকাল কি�উটাো েযখাে্ই একটা ওেয়ব সাইট েডভলপ কাা েহাক ্া েক্, সাইেটা জ�
ৈতিাকৃত সকল এইচ িট এম এল, িস এস এস, িপ এইচ িপ, জাভাি��, ইেমজ ইতযািদ ফাইল সমূহ
িকছু েফা�াোা মেধয াাখা হয়। এে�ে� স্�াইটস্ বাটে্ িলংক কাাা জ� েযম্ demo.html বা
demo.zip েয ধােণা ফাইলই েহাক ্া েক্ বযবহাা কাা যােব।
মে্ কাা যাক বাট্িট index.html েপেজ আেছ, বাটে্া মাধযেম demo.html েপেজা সােথ িলংক
কােত হেব এবং index.html ও demo.html একই েফা�াোা মেধয আেছ। তাহেল বাটে্ িলংক 212
কাাা জ� <a href="#" class="push"></a> েত # এর �াে্ শুধুমা� demo.html অথরাৎ <a
href="demo.html" class="push"></a> েলখেলই চেল। িক� মে্ কাা যাক site ্ােম একটা
েফা�াোা মেধয বাট্ যু� index.html ফাইলিট আেছ আর site েফা�াোা মেধয একটা download

্ােম েফা�াোা মেধয demo.zip ফাইলিট আেছ। এে�ে� িলংক কােত হেব <a href="
download/demo.zip এর অনুরূপ" class="push"></a>
ইেমজ স্�াইটস্ এর মাধযেম বাট্ ৈতিা-(েশষ পবর)

ইেতামেধযই িসে�ল ইেমজ ৈতিাা মাধযেম
স্�াইটস্ বাট্ ৈতিাা �থম ধাপ এবং
এইচ িট এম এল �াকচাা এবং িলংক
ৈতিাা মাধযেম ি�তীয় ধাপ স��
হেয়েছ।এ পযরােয় িস এস এস বযবহাা কো
বাটে্া আকাা আকৃিত, মািজর্ এবং
বাটে্াা িবিভ� অব�ায় বাট্িট েকম্
েদখােব ইতযািদ ি্ধরাাণ কােত হেব।মূলত
বাটে্াা িবিভ� অব�া ি্েদরেশা জ�
এংকা টযােগা background-
image:url(button.png); এর অনুরূপ
বয�াউনড ইেমজ এবং background-
position:center; এর অনুরূপ বযক�াউনড
পিজশ্ বযবহাা কাা হয়।
ইেমজ স্�াইটস্ বাট্ �েজ�

<html>
<head>
<style>
* { margin: 0; padding: 0; /* Reset */ }
#button {width: 433px; margin: 100px auto;}
#button p a.push {
display: block;
background-image:url(button.png);}
#button p a.push:hover {
background-position:center;}
#button p a.push:active {
background-position:bottom;}
</style>
</head>
<body>
213
<div id="button">
<p><a href="button.zip" class="push"></a></p>
</div>

</body>
</html>
�েজ�িট ৈতিা কাাা জ� sprites-button ্ােম একটা েফা�াা ৈতিা কােত হেব । েফা�াািটা মেধয
button.png ইেমজিট াাখেত হেব। button.png ইেমজিট এখা্ েথেক ডাউ্েলাড করু্। একই
েফা�াোা মেধয button.zip ফাইলিট এখা্েথেক ডাউ্েলাড কো াাখু্। sprites-button ্ােম
বাট্িটেত ি�ক কােল button.zip িট ডাউ্েলাড হেব।
* {margin: 0; padding: 0; /* Reset */}
উপোা েকাডটুকা মাধযেম েপজেক িােসট কাা হেয়েছ ।
#button {width: 433px; margin: 100px auto;}

উপোা েকাডটুকা মাধযেম বাটে্া �� এবং মািজর্ ি্ধরাাণ কাা হেয়েছ।
#button p a.push { 214

display: block;
background-image:url(button.png);}
উপোা েকাডটুকা মাধযেম �ভািবক অব�ায় বাট্িট েকম্ েদখােব অথরাৎ িসে�ল ইেমেজা কতটুক

অংশ �দশর্ কােব তা ি্েদরশ কাা হেয়েছ এবং background-image:url(button.png); এর মাধযেম
ফেটাশেপ ৈতিাকৃত button.png িসে�ল ইেমজিট যু� কাা হেয়েছ।
#button p a.push:hover {
background-position:center;}
উপোা েকাডটুকা মাধযেম বাটে্া উপর মাউস পেয়নটাা ি্েয় েগেল অথরাৎ hover কিনডশে্ বাট্িট
েকম্ েদখােব তা ি্েদরশ কাা হেয়েছ।
background-position:center; এর মাধযেম button.png িসে�ল ইেমজিটা মােঝা অংশ �দশর্

কােব িবষয়িটা ি্েদরশ কাা হেয়েছ।
#button p a.push:active {
background-position:bottom;}
উপোা েকাডটুকা মাধযেম বাটে্া উপর মাউস ি�ক কাাা সময় অথরাৎ active কিনডশে্ বাট্িট
েকম্ েদখােব তা ি্েদরশ কাা হেয়েছ। background-position:bottom; এর মাধযেম button.png
িসে�ল ইেমজিটা েশেষা অংশ �দশর্ কােব িবষয়িটা ি্েদরশ কাা হেয়েছ।
215

সমাপ্ত

CSS TUTOHOST E-BOOK - (Hiractg - Blogspot.com)

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

CSS TUTOHOST E-BOOK - (Hiractg - Blogspot.com)

Uploaded by

Copyright:

Available Formats

Want More books & Software Go to http://hiractg.blogspot.

ি্লুফাা ইয়াসিম্ http://technologybd.org

বইিটা অ্লাই্ সং�াণঃ http://tutorialbd.com/css

েলখকঃ ashimkumar50@yahoo.com ওেয়বঃ http://technologybd.org

�কাশকঃ tutohost@gmail.com ওেয়বঃ http://tutohost.com

বইিট িব�েয়া জ� ্য়, িব্ামূেলয িবতােণা উে�ে� ৈতিা কাা হেয়েছ।

বইিটেত ে্িভেগশ্ বাা, ইেমজ

- - অসীম কমাা পাল- -

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক

িটউেটােহা� মা্স�� ও �তগিতা েহাি�ং েসবা �দা্কাাী িহেসেব

অসীম কমাা পাল

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক

বাংলােদেশর িশ�ামূলক অ্লাই্ �কাশ্াগুেলা এেকবাো হােতগুে্ েফলা

�যুি�ে�মী েলখক অসীম কমাোা হাত ধো ৈতিা “িস এস এস �াইল

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক

িটউেটােহা� িদে� ……………

o একিট টপ েলেভল েডােমই্ এবং এক িগগাবাইট

o িােসলাা, মা�াা িােসলাা এবং িভিপএস – এ

o এছাড়াও ােয়েছ ২৪ ঘনটা কা�মাা সািভরস এবং

তাই সময় ফুিােয় যাওয়াা আেগই আপ্াা জ�

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক

িসএসএস িক? (What is CSS)

টযাগ িসেল�া (Tag Selector)

�াস িসেল�া (Class Selector)

আইিডিসেল�া (ID Selector)

েকাড েলখাা প�িত (Syntax)

ইমেবেডড �াইল শীট (Embeded Style Sheet)

এ�টা্রাল �াইল শীট ( External Style Sheet)

ইন-লাই্ �াইল শীট (Inline Style Sheet)

েট�ট কালাা (Text Color)

েট�ট এলাই্েমনট (Text Alignment)

েট�ট েডকোশ্ (Text Decoration)

েট�ট ্া�ফােমশ্ (Text Transformation)

ফনট ফযািমিল (Font family)

ফনট সাইজ(Font size)

ফনট েভিােয়নট (Font variant)

ফনট ওেয়ট (font-weight) 6

অডরাা িল� (Ordered List)

আ্অডরাা িল� (Unrdered List)

িলে� ইেমেজা বযবহাা

েটিবল এবং েটিবল বডরাা (Table & Table Border)

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

েটিবল েট�ট এলাই্েমনট (Table Text Alignment)

েটিবল কালাা (Table Color)

বডরাা এবং বডরাা �াইল

বডরাা ওয়াইডথ (Border Width)

বডরাা কালাা (Border Color)

পৃথক বডরাা ( Individual Border )

আউট লাই্ এবং আউট লাই্ �াইল

আউট লাই্ ওয়াইডথ (Outline Width)

আউট লাই্ কালাা (Outline Color)

ব� মেডল (Box Model)

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক

�িপং িসেল�া (Grouping Selector)

ে্ি�ং িসেল�া (Nesting Selector)

�দশরণ প�িত (Display)

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

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

পিজশ্ িফ�ড (position:fixed)

পিজশ্ িােলিটভ (position:relative)

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

ওভাা ে�া (Overflow)

ওভাা ে�া িভিজবল (overflow:visible)