CSS Style Master

50 %
50 %
Information about CSS Style Master
Books

Published on March 14, 2014

Author: ashim50

Source: slideshare.net

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

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

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

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

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

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

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

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

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

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

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

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

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 টযাগ িসেল�া।

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 ্ােম ি্ধরািাত �াসযু� পযাাা�ােফা জ� �াইল ি্ধরাাণ কাা হেয়েছ।

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 বযবহাা কােল কাজ অে্ক সহজহেয় যােব।

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব। এইচ িট এম এল এবং িস এস এস এইচ িট এম এল এর সােথ িস এস এস যু� কাাা িবষয়িট খুবই গুরু�পূণর। এইচ িট এম এল এর সােথ িস এস এস যু� কাাা জ� িত্িট প�িত ােয়েছ। যথা ইমেবেডড বা ইনটাা্রাল �াইল শীট ইন-লাই্ �াইল শীট এ�টা্রাল �াইল শীট

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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;}

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

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

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কাা হয় তাহেল পুোা বযাক�াউনড জুেড় ইেমজিট বাাবাা িািপট হেব।

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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);}

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।

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

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

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

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 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 কােল ি্েচ �দিশরত ছিবা মত েদখােব।

িস এস এস �াইল মা�াা |অসীম কমাা পাল | িটউেটােহা� ই- বুক 37 ফনট েভিােয়নট (Font variant) যিদ েকা্ ওেয়ব েপেজ িবেশষ েকা্ িশোা্াম এম্ভােব �দশরে্া �েয়াজ্ পেড়, েযখাে্ �াভািবকভােব েলখা েট�ট সমূেহা সবগুেলা অ�া বড় হােতা হেব িক� েয�াে্ েছাট হােতা অ�া হওয়াা কথা েসই �াে্া বড় হােতা অ�াগুেলাা ফনট সাইজ তুল্ামূলক �াভািবক ফনট সাইেজা েচেয় েছাট হেব, এে�ে� ফনট েভিােয়নট বযবহাা কাা হয়।This Is an Example Of Variant Text েলখািটা ভািােয়নট �াইল ৈতিাা জ� Declaration কােত হেব font-variant: small-caps;

#c0c presentations

Add a comment

Related presentations

Related pages

Style Master CSS Editor for Windows and Mac OS X

Style sheet editor for Windows and Macintosh. By Western Civilization Pty. Ltd. [Shareware]
Read more

style master css editor - westciv - tools & resources for ...

style master css editor product info. Style Master: all the tools you need to design, build, code, troubleshoot and learn standards based web design using ...
Read more

Style Master - Free download and software reviews - CNET ...

Style Master, a CSS editor, has tools to help developers build professional, standards-based Web sites using their choice of wizards, powerful editors ...
Read more

Style Master - Download

Style Master, free and safe download. Style Master 4.6: Take control of CSS without learning all the code.
Read more

asp.net - How to include CSS in master pages? - Stack Overflow

How do I include CSS reference in only certain pages on my asp.net website? If I include the reference in my master page, all pages of the website share ...
Read more

CSS editieren mit Style Master 3 – GIGA

Style Master 3 ist eine neue Applikation aus Australien, mit der sich Cascading Style Sheets (CSS) für Websites editieren lassen. Das Tool..
Read more

70 Expert Ideas For Better CSS Coding - HackHands

70 Expert Ideas For Better CSS Coding. ... Organize your CSS-styles, using master style sheets. “Organizing your CSS helps with future maintainability of ...
Read more

Style Master Download - Softpedia - Free Downloads ...

Download Style Master 4.6 - A cascade style sheet editor that enables you to create and modify CSS files, as well as check if the code is valid and ...
Read more

CSS Zen Garden: The Beauty of CSS Design

The CSS Zen Garden invites you to relax and meditate on the important lessons of the masters. ... CSS. You may modify the style ... CSS Zen Garden is about ...
Read more

CSS tutorial - World Wide Web Consortium (W3C)

CSS tutorial starting with HTML + CSS. Contents. 1. The HTML; 2. Adding color; 3. Adding fonts; 4. A navigation bar; 5. ... such as Style Master ...
Read more