Cascaded Styling Sheets can explain how the html documantation can be style. Includes:- History of CSS CSS syntax and explanation CSS types And a little more...

1. IInnttrroodduuccttiioonn
TToo CCSSSS

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;;}}

23. TThhaannkk YYoouu !!