CSS style master book

1. StyleMaster
CSS
AshimKumarPaul

2. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
1
িস এস এস �াইল মা�াা
েলখকঃ অসীম কমাা পাল
স�াদক
মাহাবুব িটউেটা
��দ
অসীম কমাা পাল
�কাশক
িটউেটােহা�
�ুফ িািডং
ি্লুফাা ইয়াসিম্
বইিটা অ্লাই্ সং�াণঃ http://tutorialbd.com/css
কিপাাইট
বইিটা ��ািধকাা িটউেটােহা� এবং েলখেকা। বইিট িব্ামূেলয িবতাণ কাা যােব
এবং েলখক ও �কাশেকা ্াম িঠক োেখ �েয়াজে্ মু�ণ কাা যােব। িক� বইিটা
েকা্ অংশ পিাবতর্ কো মু�ণ কাা এবং বইেয়া েকা্ অংশ �গ বা ওেয়ব সাইেট
�কাশ কাা যােব ্া। তেব বইিটা ডাউ্েলাড িলংক �কাশ কাা যােব।
েযাগােযাগ
েলখকঃ ashimkumar50@yahoo.com ওেয়বঃ http://technologybd.org
�কাশকঃ tutohost@gmail.com ওেয়বঃ http://tutohost.com
েফা্ঃ 01975634328 েফসবুকঃ https://www.facebook.com/TutoHost
বইিট িব�েয়া জ� ্য়, িব্ামূেলয িবতােণা উে�ে� ৈতিা কাা হেয়েছ।
�থম �কাশ
১৫ আগ� ২০১৩
আিথর্ সহেযািগতায়
িটউেটােহা�
ওেয়ব পাটর্নার
http://tutohost.com
http://tutorialbd.com
http://technologybd.org

3. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
2
েলখেকা কথা
বতরমা্ সমেয় ওেয়ব িডজাইে্া উপা সম�
িব� জুেড় গেবষণা চলেছ। একটা ওেয়ব
সাইট এখন শুধুমা� তথয �চাোা মাধযম
্য়। েকা্ একটা ওেয়ব সাইট কত
সহজভােব এবং সু�াভােব বযবহাাকাাীা
চািহদা পূাণ কােত পাােব, এ িবষয়িটই
সবেচেয় েবিশ আেলািচত। বযবহাাকাাীা
চািহদাা িবষয়িট িবেবচ্ায় োেখ একটা
সু�া ওেয়ব ইনটাােফস ৈতিা কাাা ে�ে�
িস এস এস এা ভূিমকা অপিাশীম। িস এস
এস এা �েয়াজ্্ীয় িবষয় সমূহ
িব�ািাতভােব, সহেজ এবং মাি�ভাষায়
েশখাা জ� আশা কািছ “িস এস এস
�াইল মা�াা” বইিট সবাইেক সাহাযয
কােব।
বইিটেত �িতটা িবষয় বা�ব �েজ�িভি�ক
আেলাচ্াা মাধযেম এবং �েয়াজ্ীয় ইেমজ
ও ি�্শটর বযবহাোা মাধযেম সহজভােব
উপ�াপ্াা েচ�া কোিছ,যা ্তু্েদােক
সহেজ এবং �ত েশখাা ে�ে� সহায়ক
ভূিমকা পাল্ কােব বেল আশা কািছ।
বইিটেত ে্িভেগশ্ বাা, ইেমজ
স্�াইটস,বাট্ এবং একটা ইেমজ
গযালািাাা �েফশ্াল �েজ� িব�ািাতভােব
আেলাচ্াা েচ�া কোিছ ,যা �েফশ্াল
িডজাই্ ৈতিাা ধাাণা ৈতিা কােব।
িস এস এস এা িবিভ� েকৗশল অয়� কাাা
ে�ে� ২০০+ পৃ�াা এই বইিট যিদ কাোা
সামা�তম উপকাো আেস আমাা �েচ�া
সাথরক হেব। আা বইিটা �থম সং�ােণ
েবশ িকছু ভুল্ুিট থাকাটা অ�াভািবক িকছু
্য়। অনু�হ কো এধােণা আপ্াাা ভুল্ুিট
�মাসু�া দৃি�েত েদখেব্।
- - অসীম কমাা পাল- -
েলখক পিরিচিত:
েলখক,
অসীম কুমা পাল ১৯৮৭ সােল কুি�য়া অ�গর্ েচৗঁড়হাঁস
�ােম জ��হণ কেরন। বতর্মাে িতিন ঢাকা �েকৗশল ও �যুি�
িব�িবদয্া(DUET)এ EEE েত েলখাপড়া করেছন। িতিন
িটউেটািরয়ালিবিড ,েটকিটউনস, িব�ান �যুি� �েগ ওেয়ব িডজাইন
এবং েডভলপেমন্ , মাইে�াকেন্�ালা, ইেলক�িন� ও
েটকেনালিজর িবিভ� িবষেয়র উপর �গ, িটউটিরয়াল এবং ই-বুক
িলেখেছন।
িতিন বতর্মাে েলখাপড়ার পাশাপািশ িটউেটােহাে� কমর্র আেছন।
এডভা�ড ওেয়ব িডজাইন এন্ েডভলপেমন্, �িগং, ে�া�ািমং,
UI/UX, ইেলক�িন�, মাইে�াকেন্�ালা এবং আরডুইেনা েবজড
কেন্�র্ িসে�ম এবং েরাবিট� েটকেনালিজেক সবার মােঝ ছিড়েয়
েদয়ার জ� গেবষণা করেছন।
িতিন ইেতামেধয্ িটউেটােহাে�র হেয়
• এইচ িট এম এল
• িস এস এস
• জাভাি��
• িপ এইচ িপ
এর উপর বাংলা ভাষায় িটউেটািরয়াল িলেখেছন। যা নতুন এবং
এডভা� ওেয়ব িডজাইনার এবং েডভলপারেদর মােঝ ইেতামেধয্
জনি�য়তা অজর্ কেরেছ।তার েলখা
িটউেটােহা� এইচ িট এম এল ই-বুক ১.০ বইিটও পাঠকেদর কােছ
এখেনা েবশ জনি�য়।
========================
েলখেকর ই-েমইল এে�স: ashimkumar50@yahoo.com
েলখেকর ওেয়ব সাইট: technologybd.org
েলখেকর েফসবুক েপজ:
http://www.facebook.com/ashim.kumar.9803

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

5. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
4
স�াদেকা ব�বয
বাংলােদেশর িশ�ামূলক অ্লাই্ �কাশ্াগুেলা এেকবাো হােতগুে্ েফলা
যায়। এেদেশা তরু্ সমাজ তথয �যুি�েত ্তু্ ্তু্ েমধা একি�ত হেয়
�া্ অজরে্া জ� কাজ কো যাে�। িবষয়িট একটা ি্াব িব�েবা মত।
আর এই সৃজ্শীল বযাি�েদা িশ�া কাযর�ম ও উ�াব্ী শি�া �কাশ্া
ধাাাবািহক িস এস এস িটউেটািায়াল যা এখন ই বুক আকাো �কাশ কাা
হল।
�যুি�ে�মী েলখক অসীম কমাোা হাত ধো ৈতিা “িস এস এস �াইল
মা�াা” বইিট ওেয়ব িডজাই্ েশখাা ে�ে� সকেলা িবেশষ সহায়ক হেব
বেল আশা কািছ।
মাহাবুব িটউেটা

6. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
5
িটউেটােহা� িদে� ……………
o একিট টপ েলেভল েডােমই্ এবং এক িগগাবাইট
এেয়ব েহাি�ং মা� ৮০০ টাকায়।
o িােসলাা, মা�াা িােসলাা এবং িভিপএস – এ
৩০% পযর� ছাড়।
o এছাড়াও ােয়েছ ২৪ ঘনটা কা�মাা সািভরস এবং
৯৯. ৯% আপটাইম গযাাািনট।
তাই সময় ফুিােয় যাওয়াা আেগই আপ্াা জ�
উপযু� অফাািট লুেফ ি্্।
েফা্ঃ ০১৭৭০৮৪৮৮৮৮
ওেয়ব সাইটঃ www.tutohost.com

7. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
6
সূিচপ�ঃ
িস এস এস েবিসক
িসএসএস িক? (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)
িলংক (Link)
অডরাা িল� (Ordered List)

8. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
7
আ্অডরাা িল� (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)

9. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
8
এডভা�ঃ
�িপং িসেল�া (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)
অেটা ি�প এবং োকেটংগুলাা ি�প
েজড ই্েড� (Z-index)

10. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
9
ে�ািটং (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)

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

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

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

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

15. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
14
টযাগ িসেল�া
CSS এওেয়ব েপেজা েকা্ অংশেক ি্িদর�ভােব িচি�ত কাাা জ�
যখন HTML টযাগ সমূহ বযবহাা কাা হয় তােক টযাগ িসেল�া বেল। েযম্
body {
background: #FC9;
font-family: Tahoma;
color: #F60;
}
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title><style>
body{background: #FC9;
font-family: Tahoma;
color: #F60;}
</style>
</head>
<body >
<marquee>
<h1>www.tutohost.com</h1>
</marquee>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
উপোা উদাহাণিটেত body{background: #FC9; font-family: Tahoma; color: #F60;}
এখাে্ body টযাগ িসেল�া।

16. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
15
�াস িসেল�া
CSS এ ওেয়ব েপেজা েকা্ অংশ বা এক বা একািধক
উপাদা্েক ি্িদর�ভােব িচি�ত কাাা একিট অ�তম প�িত
�াস িসেল�া । একািধক উপাদা্েক একই �াস িসেল�া
�াাা িচি�ত কাা যায়, তাই ইহা েকািডং এর পিামাণ �াস
কােত সাহাযয কো।
েযম্ <p class="mar"> 24 / 7 Support</p> এর জ�
css েকাড .mar{color: #C03; font-size:36px}
�াস িসেল�া ি্েদরশ কাাা জ� HTML টযােগা মেধয
class িক-ওয়াডর বযবহাা কাা হয় এর পর = িচ� িদেয় ডাবল েকােটশ্ এর েভতো �াস এর ্াম
েলখা হয়। েযম্ <p class="mar">। এখাে্ mar �ােসা ্াম। �াইল শীেট �াসেক িচি�ত কােত
(.) ডট িচ� বযবহাা কাা হয়।
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
.mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p class="post">
We are bangladeshi Hostgator hosting provider. The world wide technical and support
team is working for your best movement. </p>
<p class="post"> We are dedicated with client requrement. You can host your huge data
of your company with our secured and hacking proof server. We are taking care of more
than 1000 Bangladeshi websites and their huge information. </p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>

17. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
16
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
�েজ� িবে�ষণ
<p class="post"> এর মাধযেম একিট পযাাা�ােফা জ� post ্ােম একিট �াস ি্ধরাাণ কাা
হেয়েছ।
<p class="post"> এর মাধযেম অপর একিট পযাাা�ােফা জ� post ্ােম একিট �াস ি্ধরাাণ কাা
হেয়েছ।
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
এর মাধযেম post ্ােম ি্ধরািাত �াসযু� উভয় পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
<p class="mar">এর মাধযেম একিট পযাাা�ােফা জ� mar ্ােম একিট �াস ি্ধরাাণ কাা
হেয়েছ।
.mar{color: #C03;
font-size:36px}
এর মাধযেম mar ্ােম ি্ধরািাত �াসযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।

18. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
17
আইিড িসেল�া
CSS এ ওেয়ব েপেজা েকা্ অংশ বা েকা্ উপাদা্েক
ি্িদর�ভােব িচি�ত কাাা একিট জ্ি�য় প�িত আইিড
িসেল�া । একািধক উপাদা্েক �াস িসেল�া এর মত
একই আইিড িসেল�া �াাা িচি�ত কাা যায় ্া।
েযম্ <p id="post1"> We are bangladeshi
Hostgator hosting provider. The world wide
technical and support team is working for your
best movement. information. </p>এর জ� css
েকাড
#post1{
color:#066;
font-family:Tahoma;
text-align:justify;
}
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical
and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of
your company with our secured and hacking proof server. We are taking care

19. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
18
of more than 1000 bangladeshi websites and their huge information.
</p>
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবর মত েদখােব।
�েজ� িবে�ষণ
<p id="post1"> এর মাধযেম একিট পযাাা�ােফা জ� post1 ্ােম একিট আইিড ি্ধরাাণ কাা
হেয়েছ।
<p id="post2"> এর মাধযেম অপর একিট পযাাা�ােফা জ� post2 ্ােম একিট আইিড ি্ধরাাণ
কাা হেয়েছ।
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
এর মাধযেম post1 ্ােম ি্ধরািাত আইিডযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
#post2{color:#639;
font-family:Tahoma;
text-align:justify;}
এর মাধযেম post2 ্ােম ি্ধরািাত আইিডযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।
েকাড েলখাা প�িত
েয েকা্ ে�া�াম েলখাা জ�ই েকা্ একটা এিডটা
বযবহাা কো েকািডং কােত হয়। িস এস এস এর জ�
�াথিমকভােব এিডটা িহেসেব উইেনডাজ অপাোিটং
িসে�েমা িডফ� এিডটা notepad বযবহাা কাা েযেত
পাো এবং বাড়িত সুিবধা পাবাা জ� এডভা� এিডটা
িহেসেব Dreamweaver বযবহাা কােল কাজ অে্ক
সহজহেয় যােব।

20. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
19
িস এস এস Syntax
িস এস এস syntax দুিট অংেশ িবভ� । যথা Selector এবং Declaration ।
Selector অংেশ টযাগ িসেল�া িহেসেব HTML টযাগ বা �াস িসেল�া িহেসেব HTML টযাগ এর �াস
এর ্াম অথবা আইিড িসেল�া িহেসেব HTML টযাগ এর আইিড এর ্াম বেস।
�িতটা Declaration এর একিট property এবং একিট value থােক।
অনুশীল্ �েজ�
<html>
<head>
<title> Syntax</title>
<style>
body{background: #FFC}
#post1{color:#066;
font-family:Tahoma;
text-align:justify;}
#post2{color: #639;
font-family:Tahoma;
text-align:justify;}
#mar{color: #C03;
font-size:36px}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. The world wide technical
and support team is working for your best movement.
</p>
<p id="post2">
We are dedicated with client requrement. You can host your huge data of
your company with our secured and hacking proof server. We are taking care
of more than 1000 bangladeshi websites and their huge information.
</p>

21. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
20
<marquee>
<p id="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
এইচ িট এম এল এবং িস এস এস
এইচ িট এম এল এর সােথ িস এস এস যু� কাাা িবষয়িট খুবই
গুরু�পূণর। এইচ িট এম এল এর সােথ িস এস এস যু� কাাা
জ� িত্িট প�িত ােয়েছ। যথা
ইমেবেডড বা ইনটাা্রাল �াইল শীট
ইন-লাই্ �াইল শীট
এ�টা্রাল �াইল শীট

22. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
21
ইমেবেডড �াইল শীট
এ প�িতেত <head>………….</head> এর মেধয <style>..</style> বা �াইল টযাগ বযাবহাা
কাা হয়। এবং <style>….</style> এর মেধযই িস এস এস এর জ� �েয়াজ্ীয় Selector এবং
Declaration সমূহ াাখা হয়। েযম্
<style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
ইমেবেডড �াইল শীটেক ইন লাই্ �াইল শীটও বলা হয়।
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
.post{color:#066;
font-family:Tahoma;
text-align:justify;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p class="post">We are bangladeshi Hostgator hosting provider. The world
wide technical and support team is working for your best movement. </p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

23. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
22
কখন ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ
যখন েকা্ ওেয়ব সাইেট এমন েকা্ একিট সত� েপজ থােক যাা িডজাই্ অ�া� েপজ েথেক িভ�
এে�ে� ইমেবেডড �াইল শীট বযবহাা কাা উিচৎ ।
এ�টা্রাল �াইল শীট
এ প�িতেত িস এস এস এর জ� �েয়াজ্ীয় Selector এবং
Declaration সমূহ আলাদা ি�ে� াাখা হয় এবং ি��িটেক বা
�াইল শীটিটেক style.css বা এর অনুরূপ ্ােম save কাা হয়।
<head>………….</head> এর মেধয <link rel="stylesheet"
type="text/css" href="css.css"> যু� কো এ�টা্রাল �াইল
শীট এর সােথ এইচ িট এম এল এর িলংক ৈতিা কাা হয়।
অনুশীল্ �েজ�:
HTML Code:
<html>
<head>
<title> Selectors</title>
<link rel="stylesheet" type="text/css" href="css.css" />
</head>
<body >
<h1>www.tutohost.com</h1>
<p class="post">
We are bangladeshi Hostgator hosting provider. The world wide technical
and support team is working for your best movement. </p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কােত হেব।
CSS Code :
.post{color:#066;
font-family:Tahoma;
text-align:justify;}

24. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
23
�াইল িসটিটেক style.css ্ােম save কো index.html ফাইলিট Mozilla Firefox িদেয়
open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
কখন এ�টা্রাল �াইল শীট বযবহাা কাা উিচৎ
েয েকা্ ওেয়ব সাইেটা অিধকাংশ েপজই একই িডজাইে্া হয়। এে�ে� এ�টা্রাল �াইল শীট
বযবহাা কােল �িতটা েপেজা জ� আলাদা �াইল শীেটা �েয়াজ্ হয় ্া। অথরাৎ যখন েকা্ ওেয়ব
সাইেটা অিধকাংশ েপজই একই িডজাইে্া তখন এ�টা্রাল ই�াইল শীট বযবহাা কাা উিচৎ ।
ইন-লাই্ �াইল শীট
এ প�িতেত এইচ িট এম এল এর �িতটা টযােগা
এি্িবউটস িহেসেব style এি্িবউটস যু� কো এর
মেধয িস এস এস এর জ� �েয়াজ্ীয় Declaration
সমূহ যু� কাা হয়। েযম্<p style="color:#066;
font-family:Tahoma; text-align:justify;">

25. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
24
অনুশীল্ �েজ�
HTML Code
<head>
<title> Selectors</title>
</head>
<body >
<h1>www.tutohost.com</h1>
<p style="color:#066; font-family:Tahoma; text-align:justify;">
We are bangladeshi Hostgator hosting provider. The world wide technical
and support team is working for your best movement. </p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
কখন ইন-লাই্ �াইল শীট বযবহাা কাা উিচৎ
েকা্ ওেয়ব েপেজা িডজাই্ ৈতিাা জ� যখন এ�টা্রাল ই�াইল শীট বা ইমেবেডড �াইল শীট
থােক অথবা েকা্ �াইল শীটই থােক ্া এে�ে� েকা্ িবেশষ HTML টযােগা �াইল ি্ধরাােণা
জ� ই্লাই্ �াইল শীট বযবহাা কাা উিচৎ ।
স্টাইল

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

27. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
26
বযাক�াউনড (Background)
ওেয়বেপেজা িবিভ� উপাদা্ েযম্
Body, Pragaph, Table ইতযািদা জ�
বযা�াউনড একিট অপিাহাযর উপাদা্। এ
সকল উপাদা্ সমূেহা বযাক�াউনড
িহেসেব কালাা অথবা ইেমজ বযবহাা কাা্
যায়।
বযাক�াউনড িহেসেব কালাা বযবহাা
বযাক�াউনড িহেসেব কালাা বযবহাোা জ� Declaration হেত পাো background:#900; অথবা
background-color:#900; । েযম্ body{ background-color:#900; }
বযাক�াউনড িহেসেব ইেমজ বযবহাা
বযাক�াউনড িহেসেব ইেমজ বযবহাোা জ� Declaration হেব background:
url(../images/4.png);।েযম্ body{ background: url(../images/4.png);}
বযাক�াউনড িহেসেব ইেমজ বযবহাোা ে�ে� আোা কেয়কিট িবষয় Declaration এ উে�খ কােত
হয়। এগুেলা হে�
বযাক�াউনড িািপেটশ্ (Background repeatation )
বযাক�াউনড পিজশ্ (Background position )
বযাক�াউনড এটাচেমনট (Background attachment )
বযাক�াউনড িািপেটশ্
বযা�াউনড ইেমজিট কতবাা বযবহৃত হেব তা ি্েদরশ কাাা জ� বযাক�াউনড িািপেটশ্ বযবহাা কাা
হয়। যিদ পুোা বযাক�াউনড জুেড় ইেমজিটেক বাাবাা িািপট কােত হয় তাহেল Declaration হেব
background-repeat:repeat; যিদ ইেমজিটেক মা� একবাা বযবহাা কােত হয় তাহেল Declaration
হেব background-repeat:no-repeat ; যিদ ইেমজিটেক X-অ� বাাবা বাাবাা িািপট কােত হয়
তাহেল Declaration হেব background-repeat:repeat-x ; ইেমজিটেক Y-অ� বাাবা বাাবাা
িািপট কােত হয় তাহেল Declaration হেব background-repeat:repeat-y ; । েযম্ body {
background: url(images/4.png); background-repeat:repeat-x;} । যিদ body { background:
url(images/4.png); } এভােব Declaration কাা হয় তাহেল পুোা বযাক�াউনড জুেড় ইেমজিট
বাাবাা িািপট হেব।

28. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
27
বযাক�াউনড পিজশ্
বযাক�াউনড ইেমজিটা অব�া্ েকাথায় হেব তা ি্েদরশ কাাা জ� বযাক�াউনড পিজশ্ বযবহাা কাা
হয়। যিদ ইেমজিটেক বােম াাখেত হয় তাহেল Declaration হেব background-position:left ;
এখাে্ left এর �াে্ right, center, bottom, top ইতযািদ হেত পাো। যিদ ইেমজিটেক উপর িদক
েথেক বােম াাখেত হয় তাহেল Declaration হেব background-position:top-left; ।
বযাক�াউনড এটাচেমনট
বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হেব িক্া তা �কাশ কাাা জ�
বযাক�াউনড এটাচেমনট বযবহাা কাা হয়। বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ
�িলং কাাা জ� Declaration হেব background-attachment:scroll ; । সাধাাণত িকছু উে�খ ্া
কােল বযাক�াউনড ইেমজ েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং হয়। বযাক�াউনড ইেমজ
েপেজা অ�া� উপাদাে্া সােথ সােথ �িলং ্া কাাা জ� Declaration হেব background-
attachment: fixed; ।
অনুশীল্ �েজ�
<html>
<head>
<title> Selectors</title>
<style>
body{ background: url(../images/bg.png); background-attachment:fixed;}
p{background: #C0C ; color: #fff; margin-left:50px;}
h1{ margin-top:50px; color:#C00}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p id="post1">
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

29. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
28
েট�ট (Text)
ওেয়ব সাইেটা �ধা্ উপাদা্ হে� েট�ট। েসৗ�যর বৃি�া জ�
এবং িবেশষ িকছু সুিবধা পাবাা জ� css এর মাধযেম েট�ট এর
�াইল ৈতিা কাা হয়। েট�ট এর �াইল ৈতিাা জ� েবশ
কেয়কিট িবষয় Declaration এ উে�খ কােত হয়। এগুেলা
হে�
েট�ট কালাা (Text Color)
েট�ট এলাই্েমনট (Text Alignment)
েট�ট েডকোশ্ (Text Decoration)
েট�ট ্া�ফােমশ্ (Text
transformation)
েট�ট কালাা (Text Color)
আমাা সাধাাণত HTML এর মাধযেম েট�ট বযবহাোা জ� <P>, <h1>,<h2>,<a> সহ আোা িকছু
টযাগ বযবহাা কিা। এসকল েট�ট এর কালাা ি্ধরাােণা জ� Declaration কােত হেব p { color:
#FC9 } বা এর অনুরূপ। p এর �াে্ অ�া� টযােগা ে�ে� h1, h2 , a, body, অথবা েকা্ টযােগা
id বা class বসেত পাো। েট�ট এর কালাা ি্ধরাােণা জ� িত্ ধােণা Declaration হেত পাো।
েযম্
p { color: #FC9}
p {color:blue;}
p {color:rgb(255,0,0);}

30. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
29
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h1{color:#C00;}
p{color:blue;}
.mar{color:rgb(150,0,0); font-size:25px;}
</style>
</head>
<body >
<h1>www.tutohost.com</h1>
<p>
We are bangladeshi Hostgator hosting provider.<br />
We are bangladeshi Hostgator hosting provider. <br />
We are bangladeshi Hostgator hosting provider. <br />
</p>
<marquee>
<p class="mar"> 24 / 7 Support</p>
</marquee>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

31. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
30
েট�ট এলাই্েমনট (Text Alignment)
ওেয়ব েপেজ েট�টেক সাজাে্াা জ� েট�ট
এলাই্েমনট বযবহাা কাা হয়। েট�টেক েপেজা বাম
পােশ াাখাা জ� Declaration কােত হেব text-
align:left; অনুরূপভােব ডা্ পােশ াাখাা জ�
Declaration কােত হেব text-align:right; মধয�াে্
াাখাা জ� Declaration কােত হেব text-
align:center; । যিদ েট�ট এর �িতটা লাই্ একই
আকাো সাজােত চাই তাহেল Declaration কােত হেব
text-align:justify ।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#right{text-align:right;}
#left{text-align:left;}
#center{text-align:center}
#justify{text-align: justify;}
</style>
</head>
<body >
<h2>Example of right align </h2>
<p id="right">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of left align </h2>
<p id="left">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of center align </h2>
<p id="center">
We are bangladeshi <br />Hostgator hosting provider. <br />
We are bangladeshi <br />Hostgator hosting provider.
</p>
<h2>Example of justify align </h2>

32. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
31
<p id="justify">
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
We are bangladeshi Hostgator hosting provider.
</p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

33. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
32
েট�ট েডকোশ্ (Text Decoration)
েকা্ েট�ট এর সােথ HTML এর <a> টযােগা
মাধযেম িলংক যু� কােল ঐ েট�টিটা ি্েচ ে�ট
লাই্ আেস ঐ ে�ট লাই্ �া্া�িাত কাাা জ�,
েট�ট েডকোশ্ বযবহাা কাা হয়। ে�ট লাই্েক
েট�ট এর উপো �া্ েদয়াা জ� Declaration
কােত হেব text-decoration:overline; হয়। ে�ট
লাই্েক েট�ট এর মধয�াে্ �া্ েদয়াা জ�
Declaration কােত হেব text-decoration:line-
through; হয়। ে�ট লাই্েক েট�ট এর ি্েচ �া্
েদয়াা জ� Declaration কােত হেব text-
decoration:underline; েট�ট েক পযরয়�িমকভােব
দৃ�মা্ এবং অদৃ� কাাা জ� Declaration
কােত হেব text-decoration:blink; ে�ট লাই্েক
স�ূণররূেপ দূা কাাা জ� Declaration কােত হেব
text-decoration:none;।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h3 {text-decoration:overline;}
h4{text-decoration:line-through;}
h5{text-decoration:underline;}
h6 {text-decoration:blink;}
#none{text-decoration:none}
</style>
</head>
<body >
<h3>This is an example of overline</h3>
<h4>This is an example of line-through</h4>
<h5>This is an example of underline</h5>
<h6>This is an example of blink</h6>
<a href="www.tutohost.com"id="none"><h2>This is a link and
an example of text-decoration none </h2></a>
</body>
</html>

34. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
33
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
েট�ট ্া�ফােমশ্ (Text Transformation)
েট�ট অ�ভূর� অ�া সমূহেক বড় হােতা বা েছাট
হােতা অ�ো অথবা �িতিট শে�া �থম অ�া বড়
হােতা অ�ো রূপা�োা জ� েট�ট ্া�ফােমশ্
বযবহাা কাা হয়। েট�ট এর অ�ভূর� সকল
অ�ােক বড় হােতা অ�ো রূপা�োা জ�
Declaration কােত হেব text-
transform:uppercase; েছাট হােতা অ�ো
রূপা�োা জ� Declaration কােত হেব text-
transform:lowercase; �িতিট শে�া �থম অ�া
বড় হােতা অ�ো রূপা�োা জ� Declaration
কােত হেব text-transform:capitalize; ।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
p.uppercase {text-transform:uppercase;}
p.lowercase {text-transform:lowercase;}
p.capitalize {text-transform:capitalize;}
</style>

35. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
34
</head>
<body >
<p class="uppercase">This is an example of uppercase.</p>
<p class="lowercase">This is an example of lowercase.</p>
<p class="capitalize">This is an example of capitalize.</p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
ফনট (Font)
একটা ওেয়ব সাইেটা �ধা্ উে�� হে�
বযবহাাকাাীেক �েয়াজ্ীয় তথয েসবা �দা্
কাা। েকা্ ওেয়ব সাইেট তথয �দশরে্া
ে�ে� �ধা্ ভূিমকা পাল্ কো েট�ট ।
সাইেট েকাথায় িক ধােণা েট�ট বযবহাা
কাা হেব, আকাা আকৃিত েকম্ হেব এ
সকল িকছুই ি্য়ি�ত হয় িস এস এস এর
ফনট এর মাধযেম। েট�ট এর ফনট �াইল
ৈতিাা জ� েবশ কেয়কিট িবষয়
Declaration এ উে�খ কােত হয়। এগুেলা
হে�
ফনট ফযািমিল (Font family)
ফনট সাইজ(Font size)
ফনট েভিােয়নট (Font variant)
ফনট ওেয়ট (font-weigh)

36. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
35
ফনট ফযািমিল (Font family)
েট�ট সমূেহ িক ধােণা ফনট বযবহাা কাা হেব, তা ি্েদরশ কাাা জ� ফনট ফযািমিল বযবহাা কাা হয়।
েট�ট সমূেহা জ� Arial ফনট িসেল� কাাা জ� Declaration কােত হেব font-family:Arial;
অনুরূপভােব Tahoma ফনট িসেল� কাাা জ� Declaration কােত হেব font-family:Tahoma; ।
অে্ক সময় েট�ট সমূেহা জ� একিটা পিাপূাক িহেসেব একািধক ফনট Declaration এ উে�খ
কাা হয় েযম্ font-family:Verdana, Geneva, Tahoma; । যখন �াউজাা �থম ফনট সােপাটর
কােব ্া তখন েট�ট সমূহ ২য় বা ৩য় ফেনট �দিশরত হেব।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
h1{font-family:Arial;}
h2{font-family:Tahoma; color: #C00}
p{ font-family:Verdana, Geneva, Tahoma}
</style>
</head>
<body >
<h1>This text is written by Arial font.</h1>
<h2>This text is written by Tahoma font.</h2>
<p>Normaly,this text is written by Verdana font, But when
browser does not support Verdana font, this text will be
displayed by Geneva font or Tahoma font. </p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

37. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
36
ফনট সাইজ (Font size)
েট�ট সমূেহ বযবহৃত ফনট সমূেহা আকাা বা সাইজ
েকম্ হেব, তা ি্েদরশ কাাা জ� ফনট সাইজ বযবহাা
কাা হয়। েট�ট সমূেহা জ� 25px এর ফনট িসেল�
কাাা জ� Declaration কােত হেব font-size:25px;
অনুরূপভােব 20px ফনট িসেল� কাাা জ� Declaration
কােত হেব font-size:20px;। েট�ট সমূেহ বযবহৃত ফনট
সমূেহা আকাা বা সাইজ িপে�েল বা px এ ্া িদেয়
শতকাা িহেসেবও েদযা েযেত পাো, এে�ে�
Declaration কােত হেব font-size:100% এর অনুরূপ।
েট�ট সমূেহা ফনট সাইজ Declaration এর আোা েবশ
িকছু প�িত আেছ েযম্ font-size:larger; font-
size:medium; font-size:small; font-size:smaller;
font-size:xx-large; font-size:large; font-size:x-large; font-size:x-small; font-size:xx-
small; ইতযািদ।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
p{font-size:25px;}
h3{font-size:20p;}
#100{ font-size:100%}
#250{ font-size:150%}
#xx-large{ font-size:xx-large;}
</style>
</head>
<body >
<p> The font size of the text is 25px. </p>
<h3>The font size of the text is 20px.</h3>
<p id="100">The font size of the text is 100%.</p>
<p id="250">The font size of the text is 150%.</p>
<p id="xx-large">The font size of the text is xx-large</p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

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

39. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
38
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
ফনট ওেয়ট (font-weigh)
েকা্ ওেয়ব েপেজ বযবহৃত েট�ট সমূহ কতটা েমাটা হেব
বা িচক্ হেব তা ি্ধরাাণ কাাা জ� ফনট ওেয়ট বযবহাা
কাা হয়। েবা� েট�ট ৈতিাা জ� Declaration কােত
হেব font-weight:bold; । েট�ট সমূহ কতটা েমাটা হেব
তা ি্ধরাােণা জ� সংখযা বযবহাা কাা েযেত পাো, েযম্
font-weight:900; অথবা font-weight:800; । এছাড়া
ফনট ওেয়ট �াইল িহেসেব font-weight:lighter; এবং
font-weight:bolder; বযবহাা কাা হয়।

40. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
39
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
#normal{font-weight:normal;}
#bold{font-weight:bold;}
#lighter{font-weight:lighter;}
#ni{font-weight:900;}
</style>
</head>
<body >
<p id="normal"> This is an example of normal p text . </p>
<p id="bold"> This is an example of bold p text . </p>
<p id="lighter"> This is an example of lighter p text . </p>
<p id="ni"> This is an example of 900 p text . </p>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

41. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
40
িলংক (Link)
HTML এ অ�া� েপেজা সােথ সংেযাগ �াপে্া জ�
<a></a> বা এ�া টযাগ বযবহাা কো িলংক ৈতিা কাা হয়।
আর িলংক সবেচেয় েবিশ বযবহাা কাা হয় ে্িভেগশ্বাো।
সাধাাণত েকা্ একিট িলংক এর চাািট অব�া থােক। যথা
িলংেকা সাধাাণ অব�া (Normal Condition of link)
িলংেকা িভিজেটড অব�া (Visited Condition of link)
িলংেকা েহাবাা অব�া (Hover Condition of link)
িলংেকা সি�য় অব�া (Active Condition of link)
িলংেকা সাধাাণ অব�া (Normal Condition of link)
েকা্ একিট িলংক �থমবাা বযবহাা ্া কাা পযর� েযভােব �দিশরত হয় তােক ঐ িলংেকা সাধাাণ
অব�া বেল। এঅব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা কাাা জ� �াইল শীেট েলখেত হেব
a:link {color: #090;} ।
িলংেকা িভিজেটড অব�া (Visited Condition of link )
েকা্ একিট িলংক এক বা একািধক বাা বযবহাা কাা হেল এবং িলংেকা উপর মাউস ্া াাখেল
িলংকিট েযভােব �দিশরত হয় তােক ঐ িলংেকা িভিজেটড অব�া বেল।এ অব�ায় িলংকিট েকম্
েদখােব তাা �াইল ৈতিা কাাা জ� �াইল শীেট েলখেত হেব a:visited {color:#303} ।
িলংেকা েহাবাা অব�া (Hover Condition of link)
েকা্ একিট িলংক বযবহাা কাা েহাক বা ্া েহাক, িলংেকা উপর মাউস াাখেল িলংকিট েযভােব
�দিশরত হয় তােক ঐিলংেকা েহাবাা অব�া বেল।এ অব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা
কাাা জ� �াইল শীেট েলখেত হেব a:hover { background: #639} ।
িলংেকা সি�য় অব�া (Active Condition of link)
যখন িলংকিট সি�য় অব�ায় থােক, অথরাৎ মাউস ি�ক কাাা মূহেতর িলংকিট েযভােব �দিশরত হয়
তােক ঐ িলংেকা সি�য় অব�া বেল।এ অব�ায় িলংকিট েকম্ েদখােব তাা �াইল ৈতিা কাাা জ�
�াইল শীেট েলখেত হেব a:active {color:#960;}
চাািট অব�ােতই িলংেকা বয�াউনড পিাবতর্ কাা যায়। এবং ে্িভেগশ্ বাো এই লিজকিটই েবিশ
বযবহৃত হয়। িলংেকা বয�াউনড পিাবতর্ কাাা জ� �াইল িসেট েলখেত হেব
a:hover{background:#F60; এর অনুরূপ।

42. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
41
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#090}
a:link {color:#F00;}
a:visited {color:#303}
a:hover {color: #fff;}
a:active {color:#960;}
#nav ul li {float:left; list-style:none;}
#nav ul li a {padding:10px; display:block; text-decoration:none;}
#nav ul li a:link{background:#FCC;}
#nav ul li a:hover{background:#F60;}
#nav ul li a:hover { background: #639}
#nav ul li a:active { background:#39F;}
</style>
</head>
<body >
<a href="https://www.tutohost.com"><h1>This is a
Link.</h1></a><br>
<div id="nav">
<ul>
<li><a
href="https://www.tutohost.com"><h2>HTML</h2></a></li>
<li><a href="https://www.tutohost.com"><h2>CSS
</h2></a></li>
<li><a
href="https://www.tutohost.com"><h2>PHP</h2></a></li>
<li><a
href="https://www.tutohost.com"><h2>Wordpress</h2></a></li
>
</ul>
</div>
</body>
</html>

43. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
42
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
িল� (List)
ওেয়ব েপেজ তথয উপ�াপ্াা একিট অ�তম
প�িত িল� । CSS �াাা িত্ ধােণা িল� ৈতিা
কাা যায়, একিট হে� অডরাা িল� এবং অপািট
হে� আ্অডরাা িল� । অডরাা িলে� িবিভ�
তথযেক পযরায়�িমকভােব সািজেয় উপ�াপ্ কাা
হয় এবং �িতটা লাইে্া শুরুেত �িমক সংখযা
থােক, আন অডরাা িলে� �িতটা লাইে্া সামে্
েছাট বৃ�াকাা বা বগরাকাা িচ� থােক। এছাড়া
িলে� েযেকা্ িস�েলা পিাবেতর েছাট আকাোা
ইেমজ বযবহাা কাা যায়।

44. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
43
অডরাা িল� (Ordered List)
অডরাা িলে� িবিভ� তথযেক পযরায়�িমকভােব সািজেয় উপ�াপ্ কাা হয় এবং �িতটা লাইে্া
শুরুেত �িমক সংখযা থােক।অডরাা িল� েবশ কেয়ক ধােণা হেত পাো। েযম্ এযালফােবিটক,
েডিসমাল, োামা্ ইতযািদ। এযালফােবিটক �াইল িল� ৈতিা কাাা জ� Declaration কােত হেব
list-style-type:upper-alpha; অথবা list-style-type:lower-alpha; । েডিসমাল �াইল িল� ৈতিা
কাাা জ� Declaration কােত হেব list-style-type:decimal; োামা্ �াইল িল� ৈতিা কাাা
জ� Declaration কােত হেব list-style-type:upper-roman; অথবা list-style-type:lower-
roman; ।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
h1{color:#F00;}
#alphabet {list-style-type:lower-alpha;}
#decimal {list-style-type:decimal;}
#roman {list-style-type:lower-roman; }
</style>
</head>
<body >
h1>Ordered list</h1>
<h3>Alphabet Type list</h3>
<ol id="alphabet">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ol>
<h3>Number Type list</h3>
<ol id="decimal">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ol>
<h3>Roman Number Type list</h3>
<ol id="roman">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ol>
</body>
</html>

45. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
44
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
আ্অডরাা িল� (Unrdered List)
আন অডরাা িলে� �িতটা লাইে্া সামে্ েছাট বৃ�াকাা বা
বগরাকাা িচ� থােক, আন অডরাা িল� েবশ কেয়ক ধােণা
হেত পাো। েযম্ িড� �াইল, সােকরল �াইল, �য়াা
�াইল ইতযািদ। িড� �াইল িল� ৈতিা কাাা জ�
Declaration কােত হেব list-style-type:disc;। সােকরল
�াইল িল� ৈতিা কাাা জ� Declaration কােত হেব
list-style-type:circle; �য়াা �াইল িল� ৈতিা কাাা
জ� Declaration কােত হেব list-style-type:square;।

46. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
45
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
h1{color:#F00;}
#disc {list-style-type:disc;}
#circle {list-style-type:circle}
#square {list-style-type:square;}
</style>
</head>
<body >
<h1>Unordered list</h1>
<h4>Disc Type list</h4>
<ul id="disc">
<li>Home</li>
<li>About Us</li>
<li>Contact Us</li>
</ul>
<h4>Circle Type list</h4>
<ul id="circle">
<li>HTML</li>
<li>CSS</li>
<li>PHP</li>
</ul><h4>Square Type list</h4>
<ul id="square">
<li>Pragaph</li>
<li>Table</li>
<li>List</li>
</ul>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

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

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

49. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
48
েটিবল (Table)
ওেয়ব েপেজ েটিবল বযাবহাা কো খুব সহেজই
তথয-উপা�,পিাসংখযা্ উপ�াপ্ কাা যায়।
েটিবল খুবই গুরু�পূণর একিট উপাদা্।িস এস
এস বযবহাা কো এইচ িট এম এল এ ৈতিাকৃত
েটিবলেক আোা আকষরণীয় এবং বযবহাা
বা�ব কাা যায়। িস এস এস বযবহাা কো
েটিবেলা �াইল ৈতিাা জ� েবশ কেয়কিট
িবষেয়া উপর কাজ কােত হয়। এগুেলা হে�,
েটিবল বডরাা (Table Border)
েটিবল ওয়াইডথ এনড হাইট (Table Width and Height)
েটিবল েট�ট এলাই্েমনট (Table Text Alignment)
েটিবল কালাা (Table Color)
েটিবল বডরাা (Table Border)
মূলত েটিবেলা দৃ�মা্ মূল গঠন ৈতিা কাা হয় েটিবল বডরাা �াাা।েটিবেলা �িতটা সািা ৈতিাা
জ� HTML এ <tr></tr> বযবহাা কাা হয়, এবং �িতটা েসল ৈতিাা জ� <td></td>বযবহাা কাা
হয়। <th></th> এর মাধযেম েটিবল েহডাা ৈতিা কাা হয়।CSS �াাা েটিবল বডরাা �াইল ৈতিাা
জ� �যাইল শীেট েলখেত হেব,
table,th,td
{
border:1px solid #F00;
}
এখাে্ মূল েটিবল, েটিবেলা �িতটা সািা এবং �িতটা েসল এর জ� একই �যাইেলা বডরাা ি্ধরাাণ
কাা হেয়েছ।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99; margin-left:120px;}
table,th,td
{
border:1px solid #F00;}
</style>
</head>

50. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
49
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
ছিবটােত আসেল সাধাাণ েটিবেলা মত বডরাা ৈতিা হয়ি্। �িতটা েসল পা�া েথেক আলাদা
হেয়েছ।
{
border-collapse:collapse;
}
এখন যিদ �াইল শীেট উপোা েকাড টুক যু� কাা হয় তাহেল েটিবলিট েদখেত সাধাাণ েটিবেলা মত
হেব এবং Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

51. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
50
েটিবল ওয়াইডথ এনড হাইট (Table Width and Height)
েটিবল িডজাইে্া ে�ে� েয িবষয়িট �থেম িচ�া কােত হয়, তা
হে� েটিবলিট কতটুক চওড়া হেব এবং এর উ�তা কতটুক হেব,
েটিবল েহডাা তথা �থম সািাা �িতটা েসল েকম্ হেব। েটিবেলা
চওড়া েকম্ হেব এবং এর উ�তা ি্ধরাােণা জ� �াইল শীেট
েলখেত হেব,
table
{
width:300px; height:100px;
}
মা্সমূহ px তথা িপে�েল অথবা েপেজা শতকাা িহেসেব েদয়া েযেত পাো।েযম্,
table
{
width:50%; height:20%;
}
শতকাা িহেসেব মা্ িদেল মি্টোা সাইজ অনুসাো েটিবেলা আকাা পিাবিতরত হেব িক� িপে�েল
মা্ িদেল েকা্ পিাবতর্ হেব ্া।
েটিবল েহডাা তথা �থম সািাা �িতটা েসল এর উ�তা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব,
th
{
height:50px;
}
এে�ে�ও মা্সমূহ px তথা িপে�েল অথবা েপেজা শতকাা িহেসেব েদয়া েযেত পাো। সাধাাণত
েটিবল েহডাা তথা �থম সািাা �িতটা েসল এর উ�তা ি্ধরাাণ কো িদেল বািক েসল গুেলাা আকাা
েটিবেলা width �াাা ি্ধরািাত হয়।

52. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
51
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:100px;
}
th
{
height:50px;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>

53. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
52
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
েটিবল েট�ট এলাই্েমনট (Table Text Alignment)
েটিবেল েট�ট সমূহ িকভােব থাকেব তা ি্েদরশ
কাাা জ� েটিবল েট�ট এলাই্েমনট বযবহাা
কাা হয়। �িতটা েসেলা েট�ট সমূহ বােম
াাখেত হেল �াইল শীেট েলখেত হেব,
td
{
text-align:right;
}
ডাে্ াাখেত হেল Declaration কােত হেব text-align:left;
মাঝখাে্ াাখেত হেল Declaration কােত হেব text-align:center;
এখন যিদ �িতটা েসেলা েট�ট সমূেহা ভািটরকযাল এলাই্েমনট অথরাৎ �িতটা েসেলা মেধয েট�ট
সমূহ উপোা িদেক থাকেব ্া ি্েচা িদেক থাকেব অথবা মাঝামািঝ অব�াে্ থাকেব িক্া ি্ধরাাণ
কােত হয় তাহেল Declaration এ vertical-align ি্ধরাাণ কো িদেত হেব।েট�ট সমূহ ি্েচা িদেক
াাখাা জ� Declaration কােত হেব,
td
{
vertical-align:bottom;
}

54. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
53
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
}
table,th,td
{
border:1px solid #F00;
}
table
{
width:300px; height:200px;
}
th
{
height:50px;
}
td
{
text-align:center;
}
td
{
vertical-align:bottom;
}
</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>

55. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
54
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।
েটিবল কালাা (Table Color)
বতরমাে্ একটা ওেয়ব সাইট শুধুমা� তথয �কােশা
উে�ে� িডজাই্ কাা হয় ্া।তথযিট কতটা
সু�াভােব এবং সহেজ বযবহাােযাগয কো
বযবহাাকাাীা ি্কট উপ�াপ্ কাা হল, েসটাও
অিধক গুরু�পূণর। ওেয়ব েপেজ েটিবেল উপ�ািপত
পিাসংখযা্ বা তািলকােক িস এস এস বযবহাা কো
আকষরণীয়রূেপ বযবহাাকাাীা ি্কট �দশর্ কাা
যায়।এে�ে� েটিবেলা েহডাা এবং �িতটা েসেলা
কালাা অিধক গুরু�পূণর ভূিমকা পাল্ কো। েটিবল
েহডাা এর বযক�াউনড কালাা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব,
th
{
background:#F69;
}

56. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
55
েটিবেলা �িতটা েসেলা বযক�াউনড কালাা ি্ধরাােণা জ� �াইল শীেট েলখেত হেব,
td
{
background:#FAC;
}
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;margin-left:120px; }
table{
border-collapse:collapse;
width:300px; height:200px;
}
table,th,td
{
border:1px solid #F00;
}
th
{
height:50px;
}
td
{
text-align:center;
vertical-align:bottom;
}
th
{
background: #F69;
}
td
{
background:#FAC;
}
</style>
</head>
<body >
<table>
<tr>
<th>SL</th>
<th>Book</th>
<th>Pen</th>

57. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
56
<th>Box</th>
</tr>
<tr>
<td>01</td>
<td>100</td>
<td>200</td>
<td>400</td>
</tr> <tr>
<td>02</td>
<td>300</td>
<td>600</td>
<td>300</td>
</tr>
</table>
</body>
</html>
একটা ে্াটপযাড open কো উপোা code টুক িলেখ file েমনু েথেক Save as এ ি�ক কো
File name: index.html , Save as type : All files, িদেয় save কো index.html ফাইলিট
Mozilla Firefox িদেয় open কােল ি্েচ �দিশরত ছিবা মত েদখােব।

58. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
57
ব্ক্স ও লেআউট

59. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
58
বডরাা এবং বডরাা �াইল
বডরাা ওেয়ব েপেজা একিট গুরু�পূণর
উপাদা্।এইচ িট এম এল এবং িস এস এস
বযবহাা কো েটমে�ট িডজাই্ কাাা সময়
িবিভ� উপাদাে্া জ� সিঠক াং এবং
আকৃিতা বডরাা ৈতিা কাাা উপর িডজাইে্া
মাধুযর অে্কাংেশ ি্ভরা কো।িস এস এস
বযবহাা কো িবিভ� ধােণা বডরাা ৈতিা কাা
যায়। িবিভ� ধােণা বডরাা ৈতিাা ে�ে�
েবশ িকছু িবষেয়া উপর কাজ কােত হয়।
এগুেলা হে�,
বডরাা �াইল (Border Style)
বডরাা ওয়াইডথ (Border Width)
বডরাা কালাা (Border Color)
পৃথক বডরাা ( Individual Border )

60. িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক
59
বডরাা �াইল
বডরাা �যাইল ি্েদরশ কো বডরাািট েদখেত েকম্ হেব।বডরাা �যাইল ৈতিাা জ� Declaration
কােত হেব, border-style:dotted এর অনুরূপ। িস এস এস বযবহাা কো িবিভ� ধােণা বডরাা
�যাইল ৈতিা কাা যায়। ডেটড �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-
style:dotted ; ডযােসড �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:dashed;
ডাবল �যাইল বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:double; ে�াভ �যাইল
বডরাা ৈতিাা জ� Declaration কােত হেব, border-style:groove; িাডজ �যাইল বডরাা ৈতিাা
জ� Declaration কােত হেব, border-style:ridge; ই্েসট �যাইল বডরাা ৈতিাা জ�
Declaration কােত হেব, border-style:inset; আউটেসট �যাইল বডরাা ৈতিাা জ� Declaration
কােত হেব, border-style:outset; ।
অনুশীল্ �েজ�
<html>
<head>
<title> www.tutohost.com</title>
<style>
body{background:#00CC99;}
#dotted{border-style:dotted ;}
#dashed{border-style:dashed;}
#double{border-style:double;}
#groove{border-style:groove;}
#ridge{border-style:ridge;}
#inset{border-style:inset;}
#outset{border-style:outset;}
</style>
</head>
<body >
<h3 id="dotted">This is an example of dotted border</h3>
<h3 id="dashed">This is an example of dashed border</h3>
<h3 id="double">This is an example of double border</h3>
<h3 id="groove">This is an example of groove border</h3>
<h3 id="ridge">This is an example of ridge border</h3>
<h3 id="inset">This is an example of inset border</h3>
<h3 id="outset">This is an example of outset border</h3>
</body>
</body>
</html>