Cascaded styling sheets Intro
- 2. HHTTMMLL RReevviieeww ►What is HTML used for? ►Give some examples of formatting tags in HTML? ►HTML is the most widely used language on the Web ►In today’s lesson we will be discussing the second most widely used language on the web ►Does anyone know the name of the second most widely used language?
- 3. HHiissttoorryy ooff CCSSSS ►CSS was proposed in 1994 as a web styling language. ►There were other styling languages proposed at this time, such as Style Sheets for HTML and JSSS but CSS won. ►CSS2 became the recommendation in 1998 by W3C ►CSS3 was started in 1998 but it has never been completed. Some parts are still being developed and some components work on some browsers.
- 4. WWhhaatt iiss CCSSSS?? • CCSSSS ssttaannddss ffoorr CCaassccaaddiinngg SSttyyllee SShheeeettss • SSttyylleess -- ddeeffiinnee hhooww ttoo ddiissppllaayy HHTTMMLL eelleemmeennttss • SSttyylleess aarree nnoorrmmaallllyy ssttoorreedd iinn SSttyyllee SShheeeettss DDeeffiinniittiioonn:: Cascading Style Sheets (CSS) – is a rule based language that applies styling to your HTML elements. You write CSS rules in elements, and modify properties of those elements such as color, background color, width, border thickness, font size, etc.
- 5. HHTTMMLL FFoorrmmaattttiinngg RReevviieeww ►WWhhaatt aarree tthhee ssttaarrttiinngg ttaaggss iinn HHTTMMLL?? ►WWhhaatt aarree tthhee eennddiinngg ttaaggss iinn HHTTMMLL?? ►HHooww ddoo yyoouu ssaavvee iinn aa NNootteeppaadd ddooccuummeenntt ssoo iitt bbeeccoommeess aa wweebb ppaaggee?? ►WWhhaatt iiss tthhee ttaagg ffoorr ccrreeaattiinngg ppaarraaggrraapphhss iinn HHTTMMLL?? ►WWhhaatt iiss tthhee ttaagg ffoorr ccrreeaattiinngg hheeaaddiinngg ttaaggss iinn HHTTMMLL?? ►WWhhaatt aarree tthhee ttaaggss wwee uussee ttoo ffoorrmmaatt ffoonntt:: ffaammiillyy,, ccoolloorr,, ssiizzee,, aalliiggnnmmeenntt iinn HHTTMMLL??
- 6. SSyynnttaaxx ooFF CCSSSS TThhee CCSSSS ssyynnttaaxx iiss mmaaddee uupp ooff 55 ppaarrttss:: sseelleeccttoorr PPrrooppeerrttyy&&vvaalluuee ddeeccllaarraattiioonn ddeeccllaarraattiioonn bblloocckk ccuurrllyy bbrraacceess
- 7. SSeelleeccttoorr DDeeffiinniittiioonn:: iiddeennttiiffiieess tthhee HHTTMMLL eelleemmeennttss tthhaatt tthhee rruullee wwiillll bbee aapppplliieedd ttoo,, iiddeennttiiffiieedd bbyy tthhee aaccttuuaall eelleemmeenntt nnaammee,, ee..gg.. <<bbooddyy>>,, oorr bbyy ootthheerr mmeeaannss ssuucchh aass ccllaassss aattttrriibbuuttee vvaalluueess.. EExxaammppllee:: *The selector is normally the HTML element you want to style
- 8. PPrrooppeerrttyy && VVaalluuee DDeeffiinniittiioonn:: The property is the style attribute you want to change. Each property has a value. **PPrrooppeerrttiieess aarree sseeppaarraatteedd ffrroomm tthheeiirr rreessppeeccttiivvee vvaalluueess bbyy ccoolloonnss :: *PPaaiirrss aarree sseeppaarraatteedd ffrroomm eeaacchh ootthheerr bbyy sseemmiiccoolloonnss ;;
- 9. DDeeccllaarraattiioonn DDeeffiinniittiioonn:: EEaacchh CCSSSS lliinnee tthhaatt iinncclluuddeess pprrooppeerrttyy aanndd vvaalluuee *Each declaration consists of a property and a value.
- 10. DDeeccllaarraattiioonn BBlloocckk DDeeffiinniittiioonn:: mmuullttiippllee ddeeccllaarraattiioonn lliinneess iinncclluuddiinngg tthhee ccuurrllyy bbrraacceess
- 11. CCuurrllyy BBrraacceess DDeeffiinniittiioonn:: tthhee ccuurrllyy bbrraacceess ccoonnttaaiinn tthhee pprrooppeerrttiieess ooff tthhee eelleemmeenntt yyoouu wwaanntt ttoo mmaanniippuullaattee,, aanndd tthhee vvaalluueess tthhaatt yyoouu wwaanntt ttoo cchhaannggee tthheemm ttoo.. TThhee ccuurrllyy bbrraacceess pplluuss tthheeiirr ccoonntteenntt iiss ccaalllleedd aa ddeeccllaarraattiioonn bblloocckk.. EExxaammppllee::
- 12. EEgg FFoorr SSiimmppllee CCSSSS PPaaggee <<hhttmmll>> <<hheeaadd>> <<ssttyyllee ttyyppee==""tteexxtt//ccssss"">> pp {{ ccoolloorr::rreedd;; tteexxtt--aalliiggnn::cceenntteerr;; }} <<//ssttyyllee>> <<//hheeaadd>> <<bbooddyy>> <<pp>>HHeelllloo WWoorrlldd!!<<//pp>> <<pp>>TThhiiss ppaarraaggrraapphh iiss ssttyylleedd wwiitthh CCSSSS..<<//pp>> <<//bbooddyy>> <<//hhttmmll>>
- 13. How CSS is Applied ttoo AA WWeebb PPaaggee ►CCSSSS iiss aapppplliieedd ttoo aa wweebb ppaaggee uussiinngg tthhrreeee ddiiffffeerreenntt mmeetthhooddss:: IInnlliinnee ssttyyllee IInntteerrnnaall ssttyyllee sshheeeett EExxtteerrnnaall ssttyyllee sshheeeett
- 14. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee ►IInnlliinnee CCSSSS ►AApppplliieess ssttyylleess ddiirreeccttllyy ttoo tthhee eelleemmeennttss bbyy aaddddiinngg ddeeccllaarraattiioonnss iinnttoo tthhee ssttyyllee ►FFoorr EExxaammppllee:: <<pp ssttyyllee==““ccoolloorr:: rreedd;;””>> TThhiiss iiss aa ssiimmppllee ppaarraaggrraapphh aanndd tthhee iinnlliinnee ssttyyllee mmaakkeess iitt rreedd..<<//pp>>
- 15. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee ► IInntteerrnnaall SSttyyllee SShheeeett ► AApppplliieess ssttyylleess ttoo HHTTMMLL bbyy ppllaacciinngg tthhee CCSSSS rruulleess iinnssiiddee tthhee ttaagg <<ssttyyllee>> iinnssiiddee tthhee ddooccuummeenntt ttaagg <<hheeaadd>>.. ► FFoorr EExxaammppllee:: <<hheeaadd>> <<ttiittllee>>mmyy ppaaggee<<//ttiittllee>> <<ssttyyllee ttyyppee==““tteexxtt//ccssss””>> pp{{ccoolloorr::rreedd}}<<//ssttyyllee>> <<//hheeaadd>> <<bbooddyy>> <<pp>>tthhiiss iiss aa ssiimmppllee ppaarraaggrraapphh <<//pp>> <<//bbooddyy>>
- 16. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee ► EExxtteerrnnaall CCSSSS ► AApppplliieess ssttyylleess aass aa sseeppaarraattee ffiillee wwiitthh aa ..ccssss eexxtteennssiioonn.. TThhee ffiillee iiss tthheenn rreeffeerreenncceedd ffrroomm iinnssiiddee tthhee <<hheeaadd>> eelleemmeenntt bbyy aa lliinnkk ttoo tthhee ffiillee.. ► FFoorr EExxaammppllee:: <<hheeaadd>> <<ttiittllee>>mmyy eexxtteerrnnaall ssttyyllee sshheeeett ppaaggee<<//ttiittllee>> <<lliinnkk rreell==““ssttyyllee sshheeeett”” ttyyppee==““tteexxtt//ccssss”” hhrreeff==““mmyy--eexxtteerrnnaall-- ssttyylleesshheeeett..ccssss””>> <<bbooddyy>> <<pp>>tthhiiss iiss aa ssiimmppllee ppaarraaggrraapphh<<//pp>> <<//bbooddyy>> ► YYoouu ccaann ccrreeaattee aann eexxtteerrnnaall ssttyyllee sshheeeett iinn yyoouurr tteexxtt eeddiittoorr..
- 17. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee ► WWhhaatt ssttyyllee sshheeeett iiss bbeesstt?? ► WWeebb ddeevveellooppeerrss rraarreellyy uussee iinnlliinnee CCSSSS.. SSiinnccee tthheeyy pprreeffeerr ttoo nnoott mmiixx ccoonntteenntt wwiitthh pprreesseennttaattiioonn.. AAnndd iitt iiss nnoott eeffffiicciieenntt ssiinnccee yyoouu hhaavvee ttoo ddeeccllaarree tthhee ssttyyllee iinnddiivviidduuaallllyy ffoorr eevveerryy ccoommppoonneenntt.. ► IInntteerrnnaall aanndd EExxtteerrnnaall ssttyyllee sshheeeettss aarree mmoorree ppooppuullaarr bbeeccaauussee yyoouu ccaann ssttyyllee mmuullttiippllee eelleemmeennttss wwiitthh oonnee rruullee.. ► EExxtteerrnnaall ssttyyllee sshheeeettss aarree bbeesstt bbeeccaauussee tthheeyy aallllooww yyoouu ttoo ssaavvee aallll tthhee ssttyyllee iinnffoorrmmaattiioonn oonn aa sseeppaarraattee ffiillee ffrroomm tthhee ccoonntteenntt.. YYoouu ccaann tthheenn mmooddiiffyy aa ssttyyllee ffoorr aa ssiittee aanndd iitt wwiillll uuppddaattee aallll ooff tthhee ppaaggeess iinn aa ssiittee..
- 18. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSS ►CCSSSS CCoolloorrss ►IInn tthhee pprreevviioouuss yyoouu hhaavvee sseeeenn aa ffeeww CCSSSS ssttyylleess tthhaatt iinncclluuddeedd ccoolloorr lliikkee:: <<pp ssttyyllee==““ccoolloorr:: rreedd;;””>> ►TThheerree aarree aa ffeeww wwaayyss tthhaatt yyoouu ccaann sseett ccoolloorrss iinn CCSSSS:: KKeeyywwoorrddss,, HHeexx vvaalluueess,, RRGGBB,, HHSSLL((aa))
- 19. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSS ►CCSSSS CCoolloorrss:: KKeeyywwoorrddss ►UUssiinngg tthhee kkeeyywwoorrddss lliikkee:: rreedd,, ffuucchhssiiaa,, yyeellllooww,, bblluuee,, ggrreeeenn yyoouu ccaann ssppeecciiffyy wwhhaatt ccoolloorr yyoouu wwoouulldd lliikkee tthhee CCSSSS rruullee ttoo ddiissppllaayy.. ►FFoorr eexxaammppllee:: ►pp{{ccoolloorr::rreedd}} ►hh22{{ccoolloorr::yyeellllooww}} ►TThheerree aarree 1177 ooff tthheessee kkeeyywwoorrdd ccoolloorrss yyoouu ccaann uussee iinn CCSSSS..
- 20. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSS KKeeyywwoorrdd CCoolloorr HHeexx aqua #00ffff black #000000 blue #0000ff fuchsia #ff00ff gray #808080 green #008000 lime #00ff00 maroon #800000 navy #000080 olive #808000 orange (added in CSS 2.1) #ffa500 purple #800080 red #ff0000 silver #c0c0c0 teal #008080 white #ffffff yellow #ffff00
- 21. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSS ►Computers are ccaappaabbllee ooff ddiissppllaayyiinngg aa lloott mmoorree tthhaann 1177 ccoolloorrss.. ►IInn ffaacctt tthheeyy ccaann ddiissppllaayy aapppprrooxxiimmaatteellyy 1166..77 mmiilllliioonn ccoolloorrss!! ►HHeexx VVaalluueess ((hheexx iiss sshhoorrtt ffoorr hheexxaaddeecciimmaall)) aarree tthhee mmoosstt ccoommmmoonn wwaayy ooff ssppeecciiffyyiinngg ccoolloorrss ffoorr wweebb ppaaggeess.. ((sseeee hheexx## iinn tthhee pprreevviioouuss cchhaarrtt)) ►FFoorr eexxaammppllee:: pp{{ccoolloorr:: ##000000000000;;}} //**TThhiiss iiss eeqquuiivvaalleenntt ttoo tthhee kkeeyywwoorrdd bbllaacckk**//
- 22. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSS ►HHeexx nnuummbbeerrss -- hhaass 1166 ppoossssiibbllee vvaalluueess ►00 ttoo 99 tthheenn AA ttoo FF.. WWhhiicchh ggiivveess yyoouu 1166 vvaalluueess.. ►RRGGBB ((RReedd GGrreeeenn BBlluuee)) hhaass tthhee ppoossssiibbiilliittyy ooff 225566 ccoolloorrss ffoorr eeaacchh ((1166xx1166)) ►((RR))225566 xx ((GG))225566 xx ((BB))225566 = 1166,,777777,,221166 oorr 1166..77 mmiilllliioonn ccoolloorr vvaalluueess ►CCSSSS eexxaammppllee:: hh11{{ccoolloorr:: ##000000000000;;}}