Cascaded styling sheets Intro

Embed Size (px)

Text of Cascaded styling sheets Intro

  1. 1. IInnttrroodduuccttiioonnTToo CCSSSS
  2. 2. HHTTMMLL RReevviieewwWhat is HTML used for?Give some examples of formatting tags inHTML?HTML is the most widely used language on theWebIn todays lesson we will be discussing thesecond most widely used language on the webDoes anyone know the name of the second mostwidely used language?
  3. 3. HHiissttoorryy ooff CCSSSSCSS was proposed in 1994 as a web stylinglanguage.There were other styling languagesproposed at this time, such as Style Sheetsfor HTML and JSSS but CSS won.CSS2 became the recommendation in 1998by W3CCSS3 was started in 1998 but it has neverbeen completed. Some parts are still beingdeveloped and some components work onsome browsers.
  4. 4. WWhhaatt iiss CCSSSS?? CCSSSS ssttaannddss ffoorr CCaassccaaddiinngg SSttyyllee SShheeeettss SSttyylleess -- ddeeffiinnee hhooww ttoo ddiissppllaayy HHTTMMLL eelleemmeennttss SSttyylleess aarree nnoorrmmaallllyy ssttoorreedd iinn SSttyyllee SShheeeettssDDeeffiinniittiioonn::Cascading Style Sheets (CSS) is a rule basedlanguage that applies styling to your HTML elements.You write CSS rules in elements, and modify propertiesof those elements such as color, background color,width, border thickness, font size, etc.
  5. 5. HHTTMMLL FFoorrmmaattttiinngg RReevviieewwWWhhaatt aarree tthhee ssttaarrttiinngg ttaaggss iinn HHTTMMLL??WWhhaatt aarree tthhee eennddiinngg ttaaggss iinn HHTTMMLL??HHooww ddoo yyoouu ssaavvee iinn aa NNootteeppaadd ddooccuummeenntt ssoo iittbbeeccoommeess aa wweebb ppaaggee??WWhhaatt iiss tthhee ttaagg ffoorr ccrreeaattiinngg ppaarraaggrraapphhss iinnHHTTMMLL??WWhhaatt iiss tthhee ttaagg ffoorr ccrreeaattiinngg hheeaaddiinngg ttaaggss iinnHHTTMMLL??WWhhaatt aarree tthhee ttaaggss wwee uussee ttoo ffoorrmmaatt ffoonntt:: ffaammiillyy,,ccoolloorr,, ssiizzee,, aalliiggnnmmeenntt iinn HHTTMMLL??
  6. 6. SSyynnttaaxx ooFF CCSSSS TThhee CCSSSS ssyynnttaaxx iiss mmaaddee uupp ooff 55 ppaarrttss:: sseelleeccttoorr PPrrooppeerrttyy&&vvaalluuee ddeeccllaarraattiioonn ddeeccllaarraattiioonn bblloocckk ccuurrllyy bbrraacceess
  7. 7. SSeelleeccttoorr DDeeffiinniittiioonn:: iiddeennttiiffiieess tthhee HHTTMMLL eelleemmeennttss tthhaatt tthheerruullee wwiillll bbee aapppplliieedd ttoo,, iiddeennttiiffiieedd bbyy tthhee aaccttuuaalleelleemmeenntt nnaammee,, ,, oorr bbyy ootthheerr mmeeaannssssuucchh aass ccllaassss aattttrriibbuuttee vvaalluueess.. EExxaammppllee::*The selector is normally the HTML element you want to style
  8. 8. PPrrooppeerrttyy && VVaalluuee DDeeffiinniittiioonn:: The property is the style attribute youwant to change. Each property has a value.**PPrrooppeerrttiieess aarree sseeppaarraatteedd ffrroomm tthheeiirr rreessppeeccttiivvee vvaalluueess bbyyccoolloonnss ::*PPaaiirrss aarree sseeppaarraatteedd ffrroomm eeaacchh ootthheerr bbyy sseemmiiccoolloonnss ;;
  9. 9. DDeeccllaarraattiioonn DDeeffiinniittiioonn:: EEaacchh CCSSSS lliinnee tthhaatt iinncclluuddeess pprrooppeerrttyyaanndd vvaalluuee*Each declaration consists of a property and a value.
  10. 10. DDeeccllaarraattiioonn BBlloocckkDDeeffiinniittiioonn:: mmuullttiippllee ddeeccllaarraattiioonn lliinneess iinncclluuddiinngg tthheeccuurrllyy bbrraacceess
  11. 11. CCuurrllyy BBrraacceess DDeeffiinniittiioonn:: tthhee ccuurrllyy bbrraacceess ccoonnttaaiinn tthheepprrooppeerrttiieess ooff tthhee eelleemmeenntt yyoouu wwaanntt ttoommaanniippuullaattee,, aanndd tthhee vvaalluueess tthhaatt yyoouu wwaanntt ttoocchhaannggee tthheemm ttoo.. TThhee ccuurrllyy bbrraacceess pplluuss tthheeiirrccoonntteenntt iiss ccaalllleedd aa ddeeccllaarraattiioonn bblloocckk.. EExxaammppllee::
  12. 12. EEgg FFoorr SSiimmppllee CCSSSS PPaaggeepp {{ ccoolloorr::rreedd;; tteexxtt--aalliiggnn::cceenntteerr;; }}>>HHeelllloo WWoorrlldd!!>TThhiiss ppaarraaggrraapphh iiss ssttyylleedd wwiitthh CCSSSS..>>>
  13. 13. How CSS is Applied ttoo AA WWeebb PPaaggeeCCSSSS iiss aapppplliieedd ttoo aa wweebb ppaaggee uussiinngg tthhrreeeeddiiffffeerreenntt mmeetthhooddss:: IInnlliinnee ssttyyllee IInntteerrnnaall ssttyyllee sshheeeett EExxtteerrnnaall ssttyyllee sshheeeett
  14. 14. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggeeIInnlliinnee CCSSSSAApppplliieess ssttyylleess ddiirreeccttllyy ttoo tthhee eelleemmeennttss bbyyaaddddiinngg ddeeccllaarraattiioonnss iinnttoo tthhee ssttyylleeFFoorr EExxaammppllee:: TThhiiss iiss aa ssiimmpplleeppaarraaggrraapphh aanndd tthhee iinnlliinnee ssttyyllee mmaakkeess iittrreedd..>
  15. 15. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee IInntteerrnnaall SSttyyllee SShheeeett AApppplliieess ssttyylleess ttoo HHTTMMLL bbyy ppllaacciinngg tthhee CCSSSS rruulleess iinnssiiddee tthhee ttaagg iinnssiiddee tthhee ddooccuummeenntt ttaagg .. FFoorr EExxaammppllee::mmyy ppaaggee>pp{{ccoolloorr::rreedd}}>>tthhiiss iiss aa ssiimmppllee ppaarraaggrraapphh>>
  16. 16. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee EExxtteerrnnaall CCSSSS AApppplliieess ssttyylleess aass aa sseeppaarraattee ffiillee wwiitthh aa ..ccssss eexxtteennssiioonn.. TThhee ffiillee iisstthheenn rreeffeerreenncceedd ffrroomm iinnssiiddee tthhee eelleemmeenntt bbyy aa lliinnkk ttoo tthheeffiillee.. FFoorr EExxaammppllee::mmyy eexxtteerrnnaall ssttyyllee sshheeeett ppaaggee>tthhiiss iiss aa ssiimmppllee ppaarraaggrraapphh>> YYoouu ccaann ccrreeaattee aann eexxtteerrnnaall ssttyyllee sshheeeett iinn yyoouurr tteexxtt eeddiittoorr..
  17. 17. HHooww CCSSSS iiss AApppplliieedd ttoo AA WWeebb PPaaggee WWhhaatt ssttyyllee sshheeeett iiss bbeesstt?? WWeebb ddeevveellooppeerrss rraarreellyy uussee iinnlliinnee CCSSSS.. SSiinnccee tthheeyy pprreeffeerrttoo nnoott mmiixx ccoonntteenntt wwiitthh pprreesseennttaattiioonn.. AAnndd iitt iiss nnootteeffffiicciieenntt ssiinnccee yyoouu hhaavvee ttoo ddeeccllaarree tthhee ssttyyllee iinnddiivviidduuaallllyyffoorr eevveerryy ccoommppoonneenntt.. IInntteerrnnaall aanndd EExxtteerrnnaall ssttyyllee sshheeeettss aarree mmoorree ppooppuullaarrbbeeccaauussee yyoouu ccaann ssttyyllee mmuullttiippllee eelleemmeennttss wwiitthh oonnee rruullee.. EExxtteerrnnaall ssttyyllee sshheeeettss aarree bbeesstt bbeeccaauussee tthheeyy aallllooww yyoouu ttoossaavvee aallll tthhee ssttyyllee iinnffoorrmmaattiioonn oonn aa sseeppaarraattee ffiillee ffrroomm tthheeccoonntteenntt.. YYoouu ccaann tthheenn mmooddiiffyy aa ssttyyllee ffoorr aa ssiittee aanndd iitt wwiilllluuppddaattee aallll ooff tthhee ppaaggeess iinn aa ssiittee..
  18. 18. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSSCCSSSS CCoolloorrssIInn tthhee pprreevviioouuss yyoouu hhaavvee sseeeenn aa ffeeww CCSSSSssttyylleess tthhaatt iinncclluuddeedd ccoolloorr lliikkee:: TThheerree aarree aa ffeeww wwaayyss tthhaatt yyoouu ccaann sseettccoolloorrss iinn CCSSSS::KKeeyywwoorrddss,, HHeexx vvaalluueess,, RRGGBB,, HHSSLL((aa))
  19. 19. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSSCCSSSS CCoolloorrss:: KKeeyywwoorrddssUUssiinngg tthhee kkeeyywwoorrddss lliikkee:: rreedd,, ffuucchhssiiaa,, yyeellllooww,,bblluuee,, ggrreeeenn yyoouu ccaann ssppeecciiffyy wwhhaatt ccoolloorr yyoouu wwoouullddlliikkee tthhee CCSSSS rruullee ttoo ddiissppllaayy..FFoorr eexxaammppllee::pp{{ccoolloorr::rreedd}}hh22{{ccoolloorr::yyeellllooww}}TThheerree aarree 1177 ooff tthheessee kkeeyywwoorrdd ccoolloorrss yyoouu ccaannuussee iinn CCSSSS..
  20. 20. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSSKKeeyywwoorrdd CCoolloorr HHeexxaqua #00ffffblack #000000blue #0000fffuchsia #ff00ffgray #808080green #008000lime #00ff00maroon #800000navy #000080olive #808000orange (added in CSS 2.1) #ffa500purple #800080red #ff0000silver #c0c0c0teal #008080white #ffffffyellow #ffff00
  21. 21. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSSComputers are ccaappaabbllee ooff ddiissppllaayyiinngg aa lloott mmoorreetthhaann 1177 ccoolloorrss..IInn ffaacctt tthheeyy ccaann ddiissppllaayy aapppprrooxxiimmaatteellyy 1166..77mmiilllliioonn ccoolloorrss!!HHeexx VVaalluueess ((hheexx iiss sshhoorrtt ffoorr hheexxaaddeecciimmaall)) aarreetthhee mmoosstt ccoommmmoonn wwaayy ooff ssppeecciiffyyiinngg ccoolloorrss ffoorrwweebb ppaaggeess.. ((sseeee hheexx## iinn tthhee pprreevviioouuss cchhaarrtt))FFoorr eexxaammppllee::pp{{ccoolloorr:: ##000000000000;;}}//**TThhiiss iiss eeqquuiivvaalleenntt ttoo tthhee kkeeyywwoorrdd bbllaacckk**//
  22. 22. CCoolloorrss aanndd FFoorrmmaattttiinngg iinn CCSSSSHHeexx nnuummbbeerrss -- hhaass 1166 ppoossssiibbllee vvaalluueess00 ttoo 99 tthheenn AA ttoo FF.. WWhhiicchh ggiivveess yyoouu 1166vvaalluueess..RRGGBB ((RReedd GGrreeeenn BBlluuee)) hhaass tthhee ppoossssiibbiilliittyyooff 225566 ccoolloorrss ffoorr eeaacchh ((1166xx1166))((RR))225566 xx ((GG))225566 xx ((BB))225566 = 1166,,777777,,221166 oorr1166..77 mmiilllliioonn ccoolloorr vvaalluueessCCSSSS eexxaammppllee:: hh11{{ccoolloorr:: ##000000000000;;}}
  23. 23. TThhaannkk YYoouu !!