Asyouknow, I amElithecomputerguy, andintoday's clients, we'regoingtobetalkingaboutinoftypewithCSS.
Sobasicallywhatwe'regoingtobedoingiswe'regoingtobeautomaticallyformattingHTMLdocumentsusing a toolcalledoftype, sothiscouldbe a veryvaluableandbasicallywhatthisallowsyouto d'ohisitallowsyoutofourMatttextagainbasedoffofcertainrules.
Youcanhave a lotofinformationspreadover a largearea, anditcanbeverydifficultforyourusersoveryourvisitorstobeable, basicallyunderstandandcontextualizetheinformation.
Myjobisdoneandthenyouhavetheenduserslookingatjustblobsofinformation, saying, Howthehelldo I usethisonanyinterestingthingsyoucandowithintheoftypeisbasicallyagain.
Andsoyouhaveyouhave a list, orpossiblyifyouhave a table, it's veryeasytothenbeabletoseealloftheinformationthatgoestogetherSoyoucoulddothiswithtablesandlists.
Youcandothiswithbasictags.
Sobasic P and a twoor a tags.
Youcandothiswithdip.
So, basically, ifyouhavedibsandlet's sayyouhaveyouhavedifferentsectionsinyourHTMLdocument.
Somaybe, likeforlike, chaptersorforposts, youmakethe 1st 1 tomakethe 1st 1 have a backgroundofwhite, andthenthenextonehave a backgroundofgrayandthenextonehave a backgroundofwhiteandthenextonehave a backgroundofGreat.
Sowhen I'm scrollingthroughthedocument, I couldveryeasilysee.
OK, thisisonepostandthat's anExposandthisis a post.
Sothatneedstohave a dotHTMordothtmlSuffolkceonthentheCSSstylesheisinstyledotCSSandsothatsimplyneedstobenameddot C s s.
I'm goingtoshowyoutheendresultfirst, andthenwe'regoingtoactuallygotake a lookattheCSSjustsoyoucangetanideaofwhattheendresultissupposedtolooklikebeforeweactuallytake a lookatthecode.
Sothisisshowingwithaneighttotagusingthisendoftypewithaneighttotagagain, youcoulddowithaneighttotag a p taggingageonetagWhateverelseAh, herewereyoursandendwithfulldibs.
So, basically, again, thisiswhereyoucanthinkaboutthisisimaginetheseairentirebloggerpostsorentirearticle's somethinglikethat.
Soyouhavethefirstdefherethathas a lightgraybackground.
Thenyougothenextdivthathas a whitebackgroundthenextdayhave, likegraybackground, soonsoforth.
So I putsome H onedatahereand I putsome p here.
Soagain, thisthis p here I onlyputthisfragmentof a sentence.
Andsothisiswherethisiswhereyoucanactuallycombineintheoftypeformattingsaidsotodosomething, youknow, inordertocreate a littlebitmorecomplicatedvacatedformattingwithyourCSS.
Soifthiswas a class, youcoulddodotwhateveryou'regonnado, Colon, thisisalldonotwiththiswhitespacematterstobeclearwiththiswhitespacematter, sothere's allcrunchedtogether.
Soyoueitherputtheclassorthetagherethatimmediatelyfollowingyouput a colonthanimmediatelyfollowingyouputintheoftypethenimmediatelyfollowingyouopentheparenthesesthanyousay.
Buttherearemiserablefortheenduserstotrytoactuallyusebecauseagain, ififyou'renotthepersonthatactuallydesignedtheapplicationorthereportandmaybeverydifficulttounderstandwhatisgoingonandbeabletointerpretwhatyou'reseeingSobydoingthingslikethiswholeusingintheoftypeagain, beingabletosectionoffbeingabletoformat, differentsectionsbasedoffoftheseverysimplerules, that's a waytomakeit a loteasierforagainforpeopletoscrollthroughverylargeHTMLdocumentagain.
ThinkaboutanHTMLdocument, a documentthatmightbetheequivalentof 100 or 20 printedpages, andsomebody's tryingtoscrollthroughandfind a specificsection.
Ifthatentiredocumentisbasicallyformattedwithwhitetextwith a whitebackgroundandmaybeallthereisiseveryoncein a Whilethere's a littletitlewith, youknow, chaptertwodotyouknow, sectiononeorsomethinglikethat, thatisgoingtobeverydifficultforyourenduserstonavigatethrough.
Ontheotherhand, ifeverysectionagainjustevensectionshave a whitebackground, oddsectionshave a greatbackground.
It's a loteasierispeoplearescrollingthroughontheirway.
Okay, onesectiontoSectionthreesecondfoursecond 5706 atanyofthesixsectiontherewego, orevenifit's a lotlonger 20 sectionsisstill a loteasiertoscrollthroughandbelike, Okay, I feellike I feellike I'veschooledbyabout 20 sectionsofar.
Playwiththedifferentcolors, playwiththedifferentdesigns, playwithit, seewhatactuallycreates a nice, invitingenvironmentforyourusersversustheuglymessthat I showedyou.
Soifyouwanttotheseclassestocontinuetostickaroundandyoufindthemtobevaluable, pleasethinkabouteitherbecoming a monthlymemberordonating a fewdollarsforthisproject.