a smarter way to learn html & css learn it faster. remember it longer by mark myers

AlsobyMarkMyers

ASmarterWayToLearnHTML&CSS

Learnitfaster.Rememberitlonger.

MarkMyers

Copyright2015MarkMyersAllrightsreserved,includingtherighttoreproducethisbook,oranyportionsofit,inany

form.

1.0

http://www.ASmarterWayToLearn.com

Chapters


Howtousethisbook

1HTML&CSS

2Creatingparagraphs

3Creatingheadings

4Specifyingfonts

5LinkingyourCSStoyourHTML

6Specifyingafont-size

7CSSclasses

8Classesnottiedtoanelement

9Font-weight

10Font-style

11Stylingbitsandpieces

12Colors

13Spacing

14Aligningtext

15First-lineindentandblockquote

16Margins

17Borders

18Padding

19Inheritance

20Grouping

21ID

22Div

23Images

24Blockvs.inline

25Addingmoreinfototheimagetag

26Positioninganimage

27Centeringanimage

28Floatingimages

29Links

30Linkaddresses

31Linkingtoalocationonapage

32Openinganewwindow

33Stylinglinks

34Clickableimages

35Imagemapspart1

36Imagemapspart2

37Bulletlistsandnumberedlists

38Stylinglists

39Stylingalistsmarkers

40MoreCSSselectors

41Tables:basicstructure

42Tables:headings

43Tables:spanningcolumnsandrows

44Tables:borders

45Tables:spacingpart1

46Tables:spacingpart2

47Tables:aligningtext

48Tables:background-color

49Forms:theformtag

50Forms:textinput

51Forms:textarea

52Forms:submit

53Forms:radiobuttons

54Forms:checkboxes

55Forms:selectbox

56Forms:label

57Groupingrelatedelements

58Forms:styling

59Comments

60Layout:nestedboxes

61Layout:divs

62Layout:divwidthsandcentering

63Layout:side-by-sidedivs

64Layout:amodernheaderpart1





69Averticalnavigationbarpart1





74Ahorizontalnavigationbarpart1

75Ahorizontalnavigationbarpart2

76Backgroundimagespart1

77Backgroundimagespart2

78Iframes

79EmbeddingYouTubevideos

80FurthercustomizingYouTubevideos

81EmbeddingVimeovideos

82Audio

83Emsvs.percentagesvs.pixels

84Relativeandstaticpositioning

85Z-index

86Mediaqueries

87Min-andmax-width,min-andmax-height

88Thestuffatthetop

89Themetadescription

90Buildasite

Acknowledgements


Ifyouembracethismethodoflearning,youllgetthehangofHTMLandCSSinlesstimethanyoumightexpect.Andtheknowledgewillstick.

Youllcatchontoconceptsquickly.

Youllbelessbored,andmightevenbeexcited.Youllcertainlybemotivated.

Youllfeelconfidentinsteadoffrustrated.

Youllrememberthelessonslongafteryouclosethebook.

Isallthistoomuchforabooktopromise?Yes,itis.YetIcanmakethesepromisesandkeepthem,becausethisisntjustabook.Itsabookplus1,800interactiveonlineexercises.Ivedonemybesttowriteeachchaptersoitseasyforanyonetounderstand,butitstheexercisesthataregoingtoturnyouintoarealHTMLcoder.

Cognitiveresearchshowsthatreadingalonedoesntbuyyoumuchlong-termretention.Evenifyoureadabookasecondorevenathirdtime,thingswontimprovemuch,accordingtoresearch.

Andforgethighlightingorunderlining.Markingupabookgivesustheillusionthatwereengagingwiththematerial,butstudiesshowthatitsanexerciseinself-deception.Itdoesntmatterhowmuchyellowyoupaintonthepages,orhowmanytimesyoureviewthehighlightedmaterial.BythetimeyougettoChapter50,youllhaveforgottenmostofwhatyouhighlightedinChapter1.

Thisallchangesifyoureadlessanddomoreifyoureadashortpassageandthenimmediatelyputitintopractice.WashingtonUniversityresearcherssaythatbeingaskedtoretrieveinformationincreaseslong-termretentionbyfourhundredpercent.Thatmayseemimplausible,butbythetimeyoufinishthisbook,Ithinkyoullbelieveit.

Practicealsomakeslearningmoreinteresting.

Tryingtoabsorblongpassagesoftechnicalmaterialputsyoutosleepandkillsyourmotivation.Tenminutesofreadingfollowedbytwentyminutesofchallengingpracticekeepsyouawakeandspursyouon.

Anditkeepsyouhonest.

Ifyouonlyread,itseasytokidyourselfthatyourelearningmorethanyouare.Butwhenyourechallengedtoproducethegoods,theresamomentoftruth.Youknowthatyouknoworthatyoudont.Whenyoufindoutthatyourealittleshakyonthispointorthat,youcanreviewthematerial,thenre-dotheexercise.Thatsallittakestomasterthisbookfrombeginningtoend.

Ivetalkedwithmanyreaderswhosaytheythoughttheyhadaproblemunderstandingtechnicalconcepts.Butwhatlookedlikeacomprehensionproblemwas

reallyaretentionproblem.IfyougettoChapter50andeverythingyoustudiedinChapter1hasfadedfrommemory,howcanyouunderstandChapter50,whichdependsonyourknowingChapter1cold?Theread-then-practiceapproachembedstheconceptsofeachchapterinyourlong-termmemory,soyourepreparedtotacklematerialinlaterchaptersthatbuildsontopofthoseconcepts.Whenyoureabletorememberwhatyouread,youllfindthatyoulearnHTMLandCSSquitereadily.

Ihopeyouenjoythislearningapproach.AndthenIhopeyougoontosettheInternetonfirewithsometerrificwebpages.

Howtousethisbook

Sinceyoumaynothavelearnedthiswaybefore,abriefusermanualmightbehelpful.

Study,practice,thenrest.IfyoureintentonmasteringthefundamentalsofHTMLandCSS,asopposedtojustgettingafeelforit,workwiththisbookandtheonlineexercisesina15-to-30-minutesession,thentakeabreak.Studyachapterfor5to10minutes.Immediatelygototheonlinelinksgivenattheendofeachchapterandcodefor10to20minutes,practicingthelessonuntilyouvecodedeverythingcorrectly.Thentakeawalk.

Dontwearyourselfout.Youlearnbestwhenyourefresh.Ifyoutrytocovertoomuchinoneday,yourlearningwillgodownhill.Mostpeoplefindtheycancomfortablycoveronetothreechaptersaday.Yourexperiencemayvary.

Ifyoufindsomeoftherepetitiontiresome,skipexercises.Iwrotetheexercisesforpeoplelikeme,whoneedalotofrepetition.IfyoureafastlearneroralearnerwithsomeHTMLexperience,theresnoreasontoburdenyourself.ClicktheSkipExerciseandGetCreditbuttontojumpahead.Skipwholesetsofexercisesifyoudontneedthem.Practiceasmuchasyouneedto,butnomore.

Ifyoustrugglewithsomeexercises,youknowyourereallylearning.Aninterestingfeatureofyourbrainisthattheharderitisforyoutoretrieveapieceofinformation,thebetteryourememberitnexttime.Soitsactuallygoodnewsifyouhavetostruggletorecallsomethingfromthebook.Dontbeafraidtorepeatasetofexercises.Andconsiderrepeatingsomeexercisesafterlettingafewweeksgoby.Ifyoudothis,youllbeusingspacedrepetition,apower-learningtechniquethatprovidesevenmorelong-termretention.

Dothecodingexercisesonaphysicalkeyboard.Amobiledevicecanbeidealforreading,butitsnowaytocode.Very,veryfewWebdeveloperswouldattempttodotheirworkonaphone.Thesamethinggoesforlearningtocode.Theoretically,mostoftheinteractiveexercisescouldbedoneonamobiledevice.ButtheideaseemssoperversethatIvedisabledonlinepracticeontablets,readers,andphones.(Italsosimplifiedmyowncodingwork.)

Ifyouhaveanauthorityproblem,trytogetoverit.Whenyoustartdoingtheexercises,youllfindthatIcanbeapainaboutinsistingthatyougeteverylittledetailright.Forexample,ifyouomitasemicolon,theprogrammonitoringyourworkwilltellyouthecodeisntcorrect,eventhoughitmightrun.Learningtowritecodewithfastidiousprecisionhelpsyoulearntopaycloseattentiontodetails,afundamentalrequirementforcodinginanylanguage.

Subscribe,temporarily,tomyformattingbiases.Currentcodeformattingislikeseventeenth-centuryspelling.Everyonedoesithisownway.Therearenouniversallyacceptedstandards.Butthealgorithmsthatcheckyourworkwhenyoudothe

interactiveexercisesneedstandards.Theycantgrantyouthelatitudethatahumanteachercould,because,letsfaceit,algorithmsarentthatbright.SoIvehadtosettleoncertainconventions.AlloftheconventionsIteachareembracedbyalargesegmentofthecodingcommunity,soyoullbeingoodcompany.Butthatdoesntmeanyoullbemarriedtomyformattingbiasesforever.Whenyoubegincodingprojects,youllsoondevelopyourownopinionsorjoinanorganizationthathasastylebook.Untilthen,Illaskyoutomakeyourcodelooklikemycode.

1HTML&CSS

AnHTML(HypertextMarkupLanguage)documentisatextfilethattellsthebrowser(Chrome,Firefox,InternetExplorer,Safari,andothers)howtoassembleawebpage.Itsaystothebrowser,Putthisheadinghere.Putthatparagraphthere.Insertthispicturehere.Putthattablethere.

Thoughitcancreatewebpageswithformattingthatissometimeselaborateandevenbeautiful,anHTMLdocumentitselfispuretext,withoutanyformattingwhatsoever.ThismeansyoucantuseawordprocessingprogramlikeMicrosoftWordtowriteHTML,becauseWordandotherwordprocessorsaddformatting.Instead,youllchoosefromanynumberofeditingprogramsthatproducepuretext.ThesimplestoftheseisNotepadonaPCandTextEdit,inPlainTextmode,onaMac.Youcanalsousefanciereditingprograms.AndtherearewebdevelopmenttoolslikeDreamweaver.TheyallcreatethepuretextrequiredforHTML.MyfavoritecodeeditoristheopensourceBrackets,freeathttp://brackets.io/.

WhenIaskyoutodosomethinginBrackets,Notepad,orTextEdit,feelfreetosubstituteanyofthealternativeeditors.

EachHTMLdocumentcreatesasinglewebpageinthebrowser.Ifasitehasahundredpages,ithasahundredHTMLdocuments.

AnHTMLdocumentsnameendswiththe.htmlextension,asinabout.htmlorproducts.html.

Whenyourelookingatawebpage,youcanseethenameofthepagesHTMLdocumentinthebrowsersaddressbar.

http://www.ASmarterWayToLearn.com/htmlcss/23.html

Whenthelineofcharactersshownaboveisenteredinthebrowsersaddressbar,thebrowserloadstheHTMLdocument23.html,andthatpageisassembledinthebrowseranddisplayedontheusersscreen.Ifauserclicksalinkonthepagefor,sayhelp.html,thenthefilehelp.htmlloads,andthatpageisdisplayed.

TheresoneHTMLnameyouusuallywontseeinthebrowsersaddressbar,index.html.ThatsthenameofthepagethatloadsbydefaultwhennoHTMLdocumentisspecified.Itsthesiteshomepage.Soifyouenterthisinthebrowsersaddressbar

http://www.asmarterwaytolearn.com

thedocumentthatloads(withsomeexceptions)isindex.html.

AlltheHTMLdocumentsforasitearestoredonthewebhostssserver,or,inthecaseofabig,importantsite,oftenonthesiteownersownserver.Whenthebrowseris

pointedtoapageonthesite,thebrowserfetchestheappropriateHTMLfilefromtheserveranddisplaysthatpage.

AbrowserwillalsodisplayanHTMLdocumentstoredonyourcomputersharddrive.Thatwillpromptyourbrowsertodisplaythepageonyourscreen.

WhereasanHTMLdocumentspecifiesthecontentsofawebpagetheheadings,paragraphs,images,tables,etc.ACSS(cascadingstylesheets)filespecifiesthestylingofthatpagefonts,colors,columnwidths,andthelike.

LikeanHTMLdocument,aCSSfileisplaintext.YoucancreateitwiththesameeditoryouusetocreateanHTMLdocument.ACSSfilehastheextension.css.

WhenanHTMLdocumentloads,itcallstheCSSfilethatstylesitscontents.

RatherthancreatingaseparateCSSfile,itspossibletoincludeallofthestylingspecificationsinanHTMLdocument.ButthepreferredwaytostylewebpagesistoputallthestylinginformationinaseparateCSSfile,sothatswhatImgoingtoteachyou.

ThesearetherulesImgoingtoaskyoutofollowfornamingbothHTMLandCSSfiles:

Useonlylower-casecharacters.

Avoidspaces.

Stickto0-9,a-z,and_.

Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/1.html

2Creatingparagraphs

Letsgetyourfeetwet.

1. Onyourharddrivecreateafoldercalledmy-smarter-site.(Ifyoureunclearhowtocreateafolderinyourparticularoperatingsystem,Googleit.TheresplentyofgoodWindowsandMacinstructionforthisonline.)

2. Underthemy-smarter-sitefoldercreateasubfoldercalledcss.(Again,ifthisisntsomethingyouknowhowtodo,Googleit.)

3. Online,gotohttp://asmarterwaytolearn.com/htmlcss/practice-2-0.html

4. Copyallthetextonthepage.

5. Openyourplain-texteditor(seethelastchapter)andcreateanewdocument.

6. Pastethecopiedtextintoit.

7. Savethedocumentinyourmy-smarter-sitefolderaspractice.html

8. Ontheemptylinebetweenandtypeyourname.

9. Savethefile.

10. GotoWindowsExplorer(PC)orFinder(Mac)anddouble-clickthefile.Andvoila!

Theresyourname,displayedinthebrowser.Youvejustcreatedanddisplayedyourfirstwebpage.

Ifitdoesntwork,takealookatthesamplecodeat:http://asmarterwaytolearn.com/htmlcss/practice-2-1.html

Now,onanewline,addafewmorewordstoyourcode,soitlookslikethis.

PracticeMarkMyersThatsmyname.

Savethefileanddisplaythepage,followingsteps8and9above.

Samplecode,ifyouneedit,isat:http://asmarterwaytolearn.com/htmlcss/practice-2-2.html.

Butwait!YouwrotethetextontwolinesMarkMyersThatsmyname.

Butthebrowserdisplayeditallononeline.

MarkMyersThatsmyname.

Theproblemisthatthebrowserdoesntrecognizeacarriagereturn.

Whenyouhitacarriagereturninawordprocessororyourtexteditor,theapplicationbreaksthetextyouwritenextintoanewparagraph,butwhenyouenteracarriagereturninanHTMLdocument,thebrowserignoresit.Ifyouwanttodisplayyourtwosentencesintwoseparateparagraphs,youhavetoexplicitlytellthebrowsertodoit.Youdothiswithparagraphtags.


Reviseyourpractice.htmltextdocumenttoincludethetagsshownabove.Savethefile.Displaythepageinyourbrowser.

Ifyoucodedcorrectly,thepagewillnowdisplaythetextintwoseparateparagraphs.

Samplecodeisat:http://asmarterwaytolearn.com/htmlcss/practice-2-3.html.

TagsarethecommonestfeatureofanHTMLdocument.Youusethemforallkindsofthings.Lookatthe9linesofHTMLabove.Therearetagsoneveryline.UsuallybutnotalwaysHTMLtagscomeinpairs,anopeningtagpairedwithaclosingtag.Theopeningtagconsistsofsomecharactersenclosedbyand>.Forexample,.Theclosingtagisthesameastheopeningtag,excepta/followstheopening

mentionedabove,itignorescarriagereturns.Butitsconventionaltobreakparagraphsinyourcode,likethis.Hi.Ho.

Thingstokeepinmind:

ItslegaltowriteinsteadofbutIllaskyoutosticktolower-casetags.

Therearenospacesbetweenthetagsandthetextthattheyenclose.

Goodhousekeepingdemandsthatwheneverthebrowserexpectsaclosingtag,youprovideit.Sometimesyoucangetawaywithwritingwithoutclosingwith,butitcanproduceunpredictableresults.

TakegoodcareoftheHTMLandCSSfilesyoucreatedinthischapter.Youllberevisingthefilesonaregularbasisasyoumakeyourwaythroughthisbook.Whenyoucompletethebookandfinishcodingthefiles,youwillhavetheworst-lookingwebpageinInternethistory.ButitwillbeadetaileddemonstrationademonstrationthatyoumadeofthemostimportantconceptsinHTMLandCSScoding.


3Creatingheadings

Aheadingonawebpageservesthesamepurposeasaheadinginanewspaperormagazine.Itshowstheuserwhatsimportantandgivesherasenseofwhattheparagraphsunderneathitareabout.Headingsalsohelpsearchenginesunderstandapage.

HTMLgivesyousixsizesofheadingstochoosefrom,h1throughh6.h1isthelargest,h6isthesmallest.

YoudonthavetoincludeallthedifferentsizesofheadingsinyourHTMLdocument,butyoushouldincludeanh1heading,becausesearchengineslookforit.Youcanhaveasmanyh2,h3,h4,h5,andh6headingsinyourdocumentasyouwant,butyoushouldhaveonlyoneh1heading.Otherwise,searchenginesmightgetconfused.

Thisishowyoucodethelargestheading.Thisisthelargestheading.

Noticethattheresbothanopeningandaclosingtag.

Heresalongerone,inh3size.

Thisisalongheadingthatgoesonandonandon,butitstillhasjustoneopeningandoneclosingtag.

Letslookatanotherheading.IfyouwriteAllthekingshorsesandallthekingsmencouldntputHumptytogetheragain.

thebrowserwillbreakthelinesaccordingtohowmuchwidthisavailable.Itmightbreaktheheadinglikethis:

AllthekingshorsesandallthekingsmencouldntputHumptytogetheragain.

Oritmightbreakitlikethis:


Ormaybeitllbreakitsomeotherway.Butyouwontcontrol,andmaynotbeabletopredict,howtheheadingbreaks.Ifyoureatallfussy,youmightwanttotellthebrowserhowtobreakit.Maybeyouwantitbrokenthisway:


SoyoutrywritingAllthekingshorsesandallthekingsmencouldntputHumptytogetheragain.

Butthiswayofwritingtheheadinghasnoeffectonthebrowser.Itstillbreakstheheadingthewayitwantsto.Thebrowserignorescarriagereturns.

Ifyouwantthebrowsertobreaktheheadingacertainway,youhavetotellittodosoexplicitly,usingthetag.

AllthekingshorsesandallthekingsmencouldntputHumpty

Notethattheresnospacebetweenthetextand.Andtheresnoclosingbrtag.

Bydefault,browsersseparateparagraphsbyaddingspacebetweenthem.Forexample,ifyouwriteSlowlorisesareagroupofseveralspeciesofprimateswhichmakeupthegenusNycticebus.

Theyhavearoundhead,narrowsnout,largeeyes,anddistinctivecolorationpatternsthatarespecies-dependent.

thetwoparagraphsmightcomeoutlookingsomethinglikethis:

SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.

Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.

Ifyouwantedabreakattheendofthefirstsentence,butnospacebetweenitandthenextsentence,youdconsolidatebothsentencesintoasingleparagraphanduse.

SlowlorisesareagroupofseveralspeciesofprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,anddistinctivecolorationpatternsthatarespecies-dependent.

Thenitwoulddisplaylikethis:

SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.

Thebrowserdisplayseachheadingonitsownline.Thebrowserdoesntcarewhetheryouputeachheadingonitsownseparateline,butforhuman-readability,pleasedo.Forexample:OurMissionHelpingPeopleHelpPeople

Inyourpractice.htmldocumentreplacethetwoparagraphsaboutyournamewithanh1heading,anh2heading,andamulti-lineparagraph.Savethefileanddisplayitinyourbrowser.SampleHTMLcode:http://asmarterwaytolearn.com/htmlcss/practice-3-1.html.


4Specifyingfonts

Browsersdisplayheadingsandparagraphsinthefontoftheirownchoosing.Butyoucanspecifythefontyouwant.Letsspecifyafontforparagraphs.Openyourtexteditorandcreateanewfile.

1. Inthenewfiletype:p{font-family:Georgia,TimesNewRoman,Times,serif;}

2. Savethefileasstyles.cssinthecsssubfolderofyourmy-smarter-sitefolder.

Nowyouhavetwofiles,practice.htmlinthemy-smarter-sitefolderandstyles.cssinthecsssubfolderofthemy-smarter-sitefolder.Thingstokeepinmind:

TheresnothingsacredaboutcallingyourHMTLdocumentpractice.htmlandyourCSSfilestyles.css.Youcannamethefilesanythingyouwant,aslongastheHTMLfilehastheextensionhtmlandtheCSSfilehastheextensioncss.

IveaskedyoutoputtheCSSfileinasubfolderofyourmainfolder.Thisisconventional,butnotnecessary.YoucouldputtheCSSfileinthesamefolderasyourHTMLfileifyouwantedto,butmostdevelopersdo

LetslookatyourCSScodeindetail.Itbeginswithp.Itmeans,Thisisastyleforparagraphsthatis,alltextenclosedbythetagsand.

p{font-family:Georgia,TimesNewRoman,Times,serif;}

pisfollowedbyaspaceandanopeningcurlybracket.

p{font-family:Georgia,TimesNewRoman,Times,serif;}

Next,indented2spaces,isthespecification.p{font-family:Georgia,TimesNewRoman,Times,serif;}

Noticethatitsfont-family,followedbyacolonandaspace.Thelistoffour

fontsthatfollowisknownasafontstack.Ifyourespecifyingafontotherthanthegenericserif,sans-serif,etc.,youneedtogivethebrowseroneormorefallbackfonts.(Ifyoureunclearaboutthedifferencebetweenserifandsans-seriffonts,Googleit.)Fallbackfontsarenecessarybecausethebrowsergrabsthefontsforthewebpagefromtheuserscomputer.Ifyourfirstfontchoiceisntinstalledonthecomputer,thebrowsermovesontoyoursecond-choicefont,thenyourthird-choicefont,etc.Thestackcanlistasmanyfontsasyoulike,butthecommonpracticeistolistthreeorfour.Thelastfallbackthelastfontinthestackisalwaysthegeneric,forexamplesans-serif,toguaranteethatthebrowserwillbeabletodisplaysomethinginthefamilyifnoneofyourotherchoicesisfound.Ifafontnamehasanyspacesinit,encloseitinquotationmarks,asinTimesNewRoman.Thespecificationendswithasemicolon.p{font-family:Georgia,TimesNewRoman,Times,serif;}

Finally,onalineofitsown,theresaclosingcurlybracket.p{font-family:Georgia,TimesNewRoman,Times,serif;}

Websafefontsarefontsthathaveahighlikelihoodofbeingfoundontheuserscomputer,whichmakesthemgoodtouseonyourpage.Youcanfindalistofcommonwebsafefontstacksathttp://abt.cm/O7bwre.Nowletsspecifyadifferentfontforh1headings.AddthiscodetoyourCSSfile.h1{font-family:TrebuchetMS,Helvetica,sans-serif;}

YourCSSfileshouldnowincludetwostyles.p{font-family:Georgia,TimesNewRoman,Times,serif;}h1{font-family:TrebuchetMS,Helvetica,sans-serif;}

Savethefile.SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-4-1.html.


5LinkingyourCSStoyourHTML

SincetheCSSfileisseparatefromtheHTMLfile,thebrowserhastobetoldwheretofindit.Thisishowyoudoit.


Thisisamouthful,soletsbreakitdown.

First,noticethatthelinkinformationgoesbetweentheandtags,ratherthanbetweentheandtags,whereyouwroteyourtwoparagraphs.ThedifferencebetweentheheadandbodysectionsisthattheheadsectiondealswithafewtechnicalmattersliketellingthebrowserwheretofindtheCSSfilewhilethebodysectioncontainsthecontentofthepage.

Next,noticethatthelinkinformationitselfisatag.Itsplacedinsideanopening.Butunlikealltheothertagsyouseeinthecodeabove,itisntpairedwithaclosingtag.Itstandsalone.

Thelinktagconsistsofthreeequations:Eachequationsaysthatsomethingequalssomethingelse.Thesecondsomethingisinquotationmarks.

1stequation:linkrel=stylesheettellsthebrowserthatthelinkrelationshipiswithastylesheet.

2ndequation:Thisisauseless,vestigialpartofthetag,likeyourappendix.Wevealreadytoldthebrowserthelinkistoastylesheet.Allstylesheetsendwiththeextensioncss,andtheyrealltextdocuments,sothisjustrepeatswhatthebrowsershouldalreadyknow.Butwestillhavetoincludeit(butmaybenotforlong).

3rdequation:hrefstandsforhypertextreference.ThispartofthetagtellsthebrowserwheretofindtheCSSfiletolinkto.WeveputitinthecsssubfolderofthefolderwherethisHTMLdocumentresides,themy-smarter-sitefolder.Thefilenameisstyles.css.

Somethingtonoticeaboutformattinghere:Therearenospacesinthetag,except

thoseseparatingthethreeequations.

Enterthelinktaginyourpractice.htmldocument.Saveit,andhaveyourbrowserdisplaythewebpageitcreates.Expecttheparagraphstobeinaseriffontandtheheadinginasans-seriffont,asyouspecifiedintheCSSfile.FindsampleHTMLcodeat:http://asmarterwaytolearn.com/htmlcss/practice-5-1.html.


6Specifyingafontsize

Letschangethefont-sizeofyourparagraphtextandyourh1heading.Openyourstyles.cssfileandaddthetwolineshighlightedbelow.p{font-family:Georgia,TimesNewRoman,Times,serif;font-size:1.2em;}h1{font-family:TrebuchetMS,Helvetica,sans-serif;font-size:2em;}

Whenyouspecify1.2emastheparagraphfontsize,youresaying(withoutgettingtootechnical)thatyouwantparagraphtexttobe1.2timesthedefaulttextsizethesizethatthebrowserwoulddisplayifyoudidntspecifyasize.Ifyouspecified1em,youdgetthedefaultsize..75emwouldbethree-quartersofdefaultsize.1.5emwouldbe150%ofdefaultsize.3.5emwouldbethree-and-a-halftimesdefaultsize.Thismaycomeasasurprise:Whenyouspecify2emastheh1size,yourenotsayingyouwanttheh1headingtobe200%ofthedefaulth1size,but200%ofthedefaulttextsize.A2emheadingisthesamesizeas2emparagraphtext.Theheading,though,willbeboldbydefaultandtheparagraphwontbe.Thingstonotice:

font-size:1.2em;isindented2spaces.

Thereisnospacebetween1.2andem.

Thelineendswithasemicolon.

CodingAlternativestobeAwareOfInsteadofspecifyingfont-sizeinems,youcanspecifyitinpercentages,pixels,or

points.Inthisprogramwellsticktoemsforfont-size.

SavetheCSSfile.DisplayyourHTMLfile.FindsampleCSScodeat:http://asmarterwaytolearn.com/htmlcss/practice-6-1.html.


7CSSclasses

Youvespecifiedafontfamilyandafontsizeforparagraphsandh1headings.Youcanalsocreateclassesofparagraphsandheadingswithformattingthatvariesfromgeneralstylingforparagraphsandheadings.Infact,youcancreateclassesofjustaboutanyelementonthepageforcustomformatting.Openyourstyles.cssfileandaddthisstylep.important{font-size:1.5em;}

SaveyourCSSfile.Nowyouvecreatedspecialstylingforaclassofparagraphs.Thisspecialstylenamedimportantwilloverridethegeneralstylethatyoucreatedearlier.Whenyousayyouwanttextinparagraphsoftheclassimportanttohaveafont-sizeof1.5em,youresayingyouwantthetexttobeone-and-a-halftimesnormalsize.Butwhatisnormalsize?ItdependsonwhetheryouvecreatedageneralstyleinyourCSSfilethatappliestothewholepage(SeeChapter19).Ifyouhaventcreatedageneralparagraphstyle,normalsizeisthebrowserdefaultsize1em.Sothena1.5emfont-sizefortheparagraphclassimportantwouldbeone-and-a-halftimesthebrowserdefaultsize.Therulesfornamingclasseswouldfillabook.Tokeepthingssimple,Imgoingtoaskyoutouselowercasealphabetletters,hyphens,underlines,andnumbers.Butdontstartanamewithanumber.Heresanexampleofaclassforh3headings.

h3.bigger{font-size:2.5em;}

Thisclasswillbe250%ofthesizeofnormaltext.Again,normalmeans250%ofthesizeofthebrowserdefaulttextsizeifyouhaventspecifiedastyleforthewholepage.Ifyouhavestyledh3headings,thebiggerclassofheadingswillbe250%ofthatsize.SaveyourCSSfile.OpenyourHTMLfileandaddthislineWarning:Wehavenoslowloriseshere.

NowthetextWarning:Wehavenoslowloriseshere.willbeone-and-a-halftimesnormaltextsize.Thingstonotice:

Theclassreferenceispartoftheopeningptag,allenclosedinbrackets.

Theclassnameisenclosedinquotationmarks.

Theclosingparagraphtagdoesntchange.Itsstill.

Note:Thesameclasscanbeassignedtoanynumberofelements.Andyoucan

assignmorethanoneclasstoanelement.Youjustseparatetheclassnamesbyaspace.Heresanexample.Heynow!

Letssayyouvecreatedaclassnamedspecialthatspecifiesafontsize,asecondclasscalledconspicuousthatdisplaysitinred,andathirdclasscalledenhancedthatspecifiesafont-weightofbold.Intheexampleabove,allthreeclasseswillapplytotheheading.Itwillbeextra-large,red,andbold.

Saveyourfiles.Displaythepage.

SampleCSScode:http://asmarterwaytolearn.com/htmlcss/practice-7-1.html.

SampleHTMLcode:http://asmarterwaytolearn.com/htmlcss/practice-7-2.html.


8Classesnottiedtoanelement

Ifyouintendtodefineaparticularclassforonlyonetypeofelementforexample,onlyparagraphtextoronlyh3headingswritetheelementnamebeforethedotandclassname,asinp.special{

orh3.special{

Ifyouwantaclasstobeuseableformorethanonetypeofelementforexample,bothparagraphtextandheadingsomittheelementname.Justwrite,forexample.special{

OpenyourCSSfileandaddthestylebelow..typewriter{font-family:CourierNew,Courier,monospace;}

Youvecreatedanewstylenamedtypewriterthatwillstyletextinatypewriterfont.Itcouldbeparagraphtext.Itcouldbeheadingtext.ItcouldbeotherkindsoftextelementsthatIllintroduceyoutolater.

Noticethattheresnoelementname,likeporh3,involvedhere.Itsjustadotwiththeclassnamefollowingit.Savethefile.

OpenyourHTMLfileandaddthecodebelow.Thisheadingisintypewritertext.

Thisparagraphisalsointypewritertext.

Youveassignedtheclasscodetoaheadingandaparagraph.SinceyourCSSfiledoesnttietheclasstoanyparticularelement,youcanuseitforanytextelement.

SavetheHTMLfileanddisplayit.

SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-8-1.html.

SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-8-2.html.

9Font-weight

InChapter7youcreatedaparagraphclasscalledimportant,andspecifiedafontsizeone-and-a-halftimesnormal.Nowletsmakeparagraphsclassedasimportantevenmoreimportant.Wellboldthem.

OpenyourCSSfileandaddthelinehighlightedbelow.p.important{font-size:1.5em;font-weight:900;

Byspecifyingafont-weightof900,youretellingthebrowsertomakealltheparagraphsoftheclassimportantasboldaspossible.Thescaleforfont-weightrangesfrom100through900100,200,300andsoon.100isthelightestweight.400isnormal.900isasheavyasitgets.

Now,whenthebrowserencountersaparagraphoftheimportantclass,itwilldisplayitlargerandinboldface.

Anoteaboutfont-weight:Asanalternativetothenumericalscale,youcanuseoneoffourfont-weightwords:lighter,normal,bold,andbolder.

SaveyourCSSfile.DisplayyourHTMLfile.Warning:Wehavenoslowloriseshere.shouldnowbeinbold.

FindsampleCSScodeat:http://asmarterwaytolearn.com/htmlcss/practice-9-1.html.


10Fontstyle

Youcanspecifyitalicsforanytext.Heresaclassthatappliesitalicstoaparagraph.p.standout{font-style:italic;}

Heresaclassthatappliesitalicstoh4headingsoftheclassspecial.

h4.special{font-style:italic;}

Heresaclassthatappliesitalicstoanytext,whetheritsaparagraph,heading,orsomeothertextelement..emphasized{font-style:italic;}

Remember,classnamescanbeanythingyoulike,withintheboundsofthenamingrulesIcoveredinChapter7.

InsteadofdefiningCSSclassestoitalicizetext,youcanusethetaginyourHTML.

Inthefollowingparagraph,thewordsDavidCopperfieldareitalicized.Leadingstylemanualssaybooktitles,likeDavidCopperfield

Analternativetothetagisthetag.

Youmustbedressedandreadytogo.

Bydefault,thetaghasthesamevisualeffectasthetag.Theybothitalicizetext.Themaindifferenceisthatwhenascreenreaderseesthetag,itputsextravocalemphasisonthetextenclosedinthetag.Itdoesntdothatwithtext.

InsteadofcreatingaclassforboldtextinCSS,youcanusethetaginHTML.InthefollowingparagraphthetextPleasenote:isbolded.Pleasenote:Theflightscheduleissubjecttochangewithoutnotice.

Analternativetothetagisthetag.Bydefault,thetaghasthesamevisualeffectasthetag.Theybothboldtextinmostbrowsers.Themain

differenceisthatwhenascreenreaderseesthetag,thereadermaysaythetextinalowertone.Itdoesntdothatwithtext.

InyourCSSfile,addaclassnottiedtoanelementthatitalicizestext.InyourHTMLfilecodeaheadingofthatclass.Thenwriteaone-sentenceparagraph.Intheparagraph,usethetwoHTMLtagsthatitalicizetextandthetwoHTMLtagsthatboldtext.SavethefilesanddisplayyourHTMLfile.




11Stylingbitsandpieces

SofaryouvebeenusingCSStostylewholeblocksoftextparagraphsandheadings.Butyoucanalsostylebitsandpiecesofthoseblocksusingthetag.Letsgobacktotheemphasizedclassfromthelastchapter.

.emphasized{font-style:italic;}

Sincetheclass,asyoudefinedit,isnttiedtoanyparticulartextelementitisntp.emphasizedorh5.emphasizedbutjust.emphasizeditcanbeappliedtoanytextyouchoose,includingpartofaparagraphorheading.Inthefollowingparagraphthewordssomuchareitalicized.IloveyousomuchIhavetouseitalics.

InyourHTMLfileitalicizeaportionoftheparagraphyoucreatedinthelastchapter,usingaspanclassofemphasized.SaveyourHTMLfileanddisplayit.

SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-11-1.html.Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/11.html

12Colors

Letssayyouwanttodisplaycertaintextinred.Wellcalltheclassstandout.

.standout{color:#cc0000;}

Youcould,ofcourse,tietheclasstoatextelement.Itcouldbep.standoutorh2.standout,forinstance.Butwellmakeitanall-purposeclasssowecanuseitforanytypeoftextelement.Hereitis,appliedtoasinglehyphenatedword.Thisisgoingtobeared-letterday!

Hereitis,appliedtoawholeparagraph.Pleasereadthischaptercarefully.Therewillbeaquiz.

Andhereitis,appliedtoaheading.RobotsthatCare

IntheCSSclassasIdefinedit,thecolorisspecifiedbyahexvalue,#cc0000.YoucanalsousenamesfromtheCSSlistofcolors,likered,gold,andmediumslateblue.Gethexvaluesforcolorsathttp://www.colorpicker.com/.GetalistofCSScolornamesathttp://www.crockford.com/wrrrld/color.html.

InyourCSSfilecreateaclassnottiedtoanelementthatcolorstextred.InyourHTMLfileuseaspantocolorsometextred.SavethefilesanddisplayyourHTMLfile.




13Spacing

Youcancreatestylesfortextspacing.Letssayyourh2headingnormallylookslikethis.Signupforthecoursenow.Ifyoucreatethisstyleh2{letter-spacing:.1em;}

theh2headingwouldaddextraspacebetweentheletters.Itwouldlooklikethis

Signupforthecoursenow.

Notethatwhenyouspecifyanemvalueforletter-spacing,ittellsthebrowserhowmuchmorespaceyouwantbeyondthenormalspacing.Orhowmuchless.Lookatthisstyle.h2{letter-spacing:-.05em;}

Thecodeabovetightensthespacebetweenletters,sotheheadinglookslikethis


Ifyouwantedtousedefaultletter-spacing,youdwriteh2{letter-spacing:0;}

Letter-spacingdoesntdistinguishbetweencharactersinthemiddleofawordandcharactersthatbeginorendaword.Thismeansthatletterspacingadjuststhespacenotonlybetweencharactersinawordbutalsobetweenthelastcharacterofawordandthefirstcharacterofthenextword.Ifyouincreaseletter-spacing,thespacingbetweenwordsincreasesautomatically.Ifyoucomparethethreeexamplesabove,youllseethatspacehasopenedupbetweenwordsinthefirstandsecondexamples.

Ifyouwanttoadjustspacingonlybetweenwords,useword-spacing.

Illexaggeratetheword-spacingsoyoucanclearlyseeit.

h2{word-spacing:1em;}

TheCSSabovestylestheheadingtolooklikethis.


Youprobablywontuseword-spacingveryoften.Themostcommonuseforitistoslightlyopenupthespacebetweenboldedwords,forbetterreadability.

Youcanspecifythespacingbetweentextlines,knownintheanalogworldasleading,byusingline-height.

Heresaparagraphwithnormalline-height.


Supposeyoucreatethisstyle.p.more-readable{line-height:2em;}

AnyparagraphintheHTMLfileassignedtheclassmore-readablewouldlooklikethis.

Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus

Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecoloration

patternsthatarespecies-dependent.

Inthecaseofline-height,1.2emmeansnormallinespacing.1.8emwouldberoughlyanextrahalf-lineofspacing.1emwouldbeslightlytighterspacingthannormal.InyourCSSfilecodeaparagraphclassthatincreasesletter-spacing,word-spacing,andline-height.

InyourHTMLfilecodeaparagraphandassignitthatclass.SavethefilesanddisplayyourHTMLfile.SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-13-1.html.


14Aligningtext

Youcancenter,left-align,right-align,andjustifytext.Thiscodecentersh1headingsh1{text-align:center;}

Anh1headingthatwouldnormallylooklikethis

HydrogenSkateboards

nowlookslikethis

HydrogenSkateboards

Left-alignedisthedefaultstyleforHTMLtext.Butyoucanmakeitexplicit:p{text-align:left;}

Supposeyouwanttoplaceadateallthewayovertotheright.Youcouldwrite.date-style{text-align:right;}

Textassignedthatclasswouldlookthisthis.(Lookforthedatewayoverontheright.)

July1,2018

Heresaparagraphinthedefaultleft-alignedstyle.

SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.FoundinSoutheastAsiaandborderingareas,theyrangefrom

BangladeshandNortheastIndiainthewesttothePhillipinesintheeast,andfromYunnanprovinceinChinainthenorthtotheislandofJavainthesouth.

Noticethattherightsideisragged.

Ifyouwanttoevenitup,youcouldcreateastylep.pretty{text-align:justify;}

Aparagraphassignedtheprettyclasswouldhaveanevenrightedge,likethis.

Slow lorises are a group of several species of strepsirrhine primates which make up the genusNycticebus.Theyhavea roundhead,narrowsnout, largeeyes,anda varietyof distinctive colorationpatterns that are species-dependent. Found in Southeast Asia and bordering areas, they range fromBangladeshandNortheastIndiainthewesttothePhillipinesintheeast,andfromYunnanprovinceinChinainthenorthtotheislandofJavainthesouth.

InyourCSSfilecodeallh3headingssotheycenter.Createaclassofparagraphsthatjustifiestheparagraph.InyourHTMLfilecodeacenteredheadingandajustifiedparagraph.




15First-lineindentandblockquote

Bydefault,browsersdontindentthefirstlineofaparagraph.Thefollowingparagraphshowshowthebrowserdisplaysaparagraphifyoudonttellittodisplayitdifferently.


Butyoucanspecifyafirst-lineindent.p{text-indent:1em;}

Sonowaparagraphwouldhaveafirst-lineindent,likethis.

Slowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenus

Nycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.

Notethatanypositiveemvaluegivesyouanindent.Thelargerthevalue,thedeepertheindent.

Toexplicitlyspecifythedefault,nofirst-lineindent,youcouldwritep{text-indent:0;}

Youuseblockquotetovisuallysetoffaquotationthatsmorethanafewwordslong.Bydefault,anyparagraphplacedinsideblockquotetagsisindented,likethis.

Weholdthesetruthstobeself-evident,thatallmenarecreatedequal,thattheyareendowedbytheirCreatorwithcertainunalienableRights,thatamongtheseareLife,LibertyandthepursuitofHappiness.

ThisistheHTML.Weholdthesetruthstobeself-evident,thatallmenarecreatedequal,thattheyareendowedbytheirCreatorwithcertainunalienableRights,thatamongtheseareLife,LibertyandthepursuitofHappiness.

Youcanenclosemorethanoneparagraphinblockquotetags.Youcanencloseheadings,too.Andifyoudontlikethedefaultblockquotestyling,youcanchangeitinyourCSS.Forexample,thiscodeincreasesthesizeofthetextanddisplaysthetextingray.blockquote{font-size:1.4em;color:darkslategray;}

Youcanevenincreaseoreliminatetheamountofblockquoteindent.Thatsinthenextchapter.

InyourCSSfilecodeaclassofparagraphsthatindentsthefirstline.Thencodeablockquotethatdecreasesthetextsizeandcolorsthetextgray.InyourHTMLfilecodeaparagraphthatindentsthefirstline.Thencodeaparagraphinsideblockquotetags.




16Margins

Youcanputmarginsaroundparagraphs,headings,andmanyotherHTMLelements.Amargincreatesextrawhitespacearoundthetop,bottom,orsidesofanelement.Forexample,ifyouhaveaparagraphthatwouldnormallylooklikethis


addingaleftmarginwouldaddwhitespaceontheleft,likethis


Andaddingarightmargin,inadditiontoaleftmargin,wouldaddwhitespaceontheright,likethis


Ifyouwanted,youcouldspecifytopand/orbottommarginstoaddwhitespaceaboveand/orbelowtheparagraph.

HeressomeCSScodethatcreatesaclassofparagraphsthatIvenamedoffsetthataddsmarginspaceallaroundthetext.Theamountofwhitespaceistwotimesthesizeofdefaulttext.p.offset{margin:2em2em2em2em;}

Amoreconcisewaytocodeequalmarginsonallfoursidesp.offset{margin:2em;}

Whenyourespecifyingallfourmarginsinonestatement,youspecifythemin

clockwiseorder,startingatthetop.Letssayyouwantarightmargintwicethesizeofdefaulttext,aleftmargin1.75thesizeofthefont,andnomarginsonthetoporbottom.Youdwritep.offset{margin:02em01.75em;}

Notethatwhenyouwantnomargin,youwrite0,not0em.

Ifyouwanttoaddspacebetweenparagraphs,insteadoforinadditiontoafirst-lineindent,specifyabottommargin.Thiscodeaddsspacebetweenparagraphs.

p{margin:001em0;}

Insteadofspecifyingallfourmargins,youcanspecifyindividualmargins.Analternativetotheexampleaboveisp{margin-bottom:1em;}

Youcanalsospecifymargin-top,margin-right,andmargin-left.

AddaclassofparagraphstoyourCSSfilethathasextrawhitespaceallaroundit.ThenaddaparagraphtoyourHTMLdocumentthatsinthisclass.Displaythepage.




17Borders

Youcanputaborderaroundaparagraph,aheading,andmanyotherHTMLelementsthatIllintroduceyoutoinlaterchapters.Thefollowingcodedemonstratesthesimplestwaytospecifyaborder.(Imadeuptheclassname.Youcouldmakeupadifferentname.)p.boxed{border:5pxsolidred;}

Nowanyparagraphwiththeclassboxedassignedtoitwillhavea5-pixel-wide,solid,redborderonallfoursides.

Asusual,youdonthavetotiethestyletoaparticularelement,likeaparagraphorheading.Youcanwrite,forinstance.enclosed{border:1pxdotted#0000ff;}

Nowanyelementwiththeclassenclosedassignedtoitparagraph,heading,orsomethingelsewillhavea1-pixel-wide,dotted,blueborderonallfoursides.

Youcanchooseamong8borderstyles:

dotted

dashed

solid

double

groove

ridge

inset

outset

Thingstokeepinmind:

Theresnospacebetweenthenumberandpx.Its2px,not2px.

Youcanusehexvalueslike#ff00fforcolornameslikebluetospecifycolors.Gethexvaluesforcolorsathttp://www.colorpicker.com/.GetalistofCSScolornamesathttp://www.crockford.com/wrrrld/color.html.

Alwaysstatethespecsinthisorder:width,style,color.Theresaspacebetweenthem,butnocomma.

Youarentlimitedjustto4-sidedborders.Youcanspecifywhichsidesyouwant,andcanevenmixwidths,styles,andcolorsondifferentsidesofthesameborder(thoughthiswouldntnecessarilybeconsideredgoodgraphicdesign).Herearesomeexamples.border-top:4pxdoublered;border-right:2pxsolid#666666;border-bottom:6pxdasheddarkviolet;border-left:1pxdotted#00ee44;

InyourCSSfileaddaclassnottiedtoanelementthatspecifiesaborder.InyourHTMLfilewriteaheadingofthatclass.Savethefilesanddisplaythepage.




18Padding

Whenyouputaborderaroundaparagraph,heading,orotherelement,youlloftenwanttoaddbreathingroomwhitespacebetweentheborderandwhatsinsideit.Toaddafewpixelsofwhitespaceallaround,forexample,youcouldwritep.boxed{border:5pxsolidred;padding:.1em;}

Thehighertheemvalue,thewiderthegapbetweentheborderanditscontent.

Tospecifygapsofdifferentwidthsfordifferentsides:p.boxed{border:5pxsolidred;padding:.1em.2em0.3em;}

Thecodeabovespecifiesasmallgapatthetop,alargergapontheright,nogapatthebottom,andthelargestgapontheleft.

Likecodeformargins,thenumbersstartatthetopandgoclockwise.

Youcanalsospecifypaddingforindividualsides.Thefollowingcodeduplicatestheeffectofthemoreconcisecodeabove.p.boxed{border:5pxsolidred;padding-top:.1em;padding-right:.2em;padding-bottom:0;padding-left:.3em;}

Ifyouregoingtospecifypaddingforallfoursides,themoreconcisecodeispreferable.Butifyouwanttospecifypaddingforjustoneortwosides,youmightprefertheindividualspecifications.

ReviseyourCSSfiletoincludesomepaddingintheclassthatspecifiesaborder.Savethefile.DisplayyourHTMLfile.



19Inheritance

InheritanceisanefficiencyfeatureofCSS.Itmeansyouhavetowritefarlesscode.

Inordertounderstandinheritance,youneedtounderstandthatanHTMLpageisorganizedintoparentsandchildren.Achildelementofaparentelementisanyelementthatsenclosedbytheparentelement.

Letsstartwiththeuber-parent.InanHTMLdocument,theparentofallthecontentthatdisplaysonthepageis.Everythingonthepageisachildof,becauseeveryelementisenclosedbythetags.(Bothandhaveaparent,,butwerenotconcernedwiththatnow.)

LookatthesimplifiedwebpagefromChapter2.


Thetwoparagraphs,likeeverythingelsewemightaddtothepage,areenclosedbytheopeningandclosingtags,sotheyareallchildrenof.Asthebodyelementschildren,theyinheritalltheCSSpropertiesofthatelement.So,forexample,ifwestylethebodyelementlikethisbody{font-family:Georgia,TimesNewRoman,Times,serif;font-size:1.2em;color:darkslategray;}

allthetextonthepagewilldisplayinGeorgiaoroneofthealternatives,at1.2timesthedefaultsize,andingray.ParagraphswillbeinGeorgiaoroneofitsalternatives.Sowillheadings.Alltextwillbebasedonanormaltextsizeof1.2timesthebrowsersdefaulttextsize.Alltext,whetherparagraphsorheadings,willbegray.Unless

youoverridetheinheritance.

Forexample,ifyouincludethisstyleinyourCSSh2{font-family:TrebuchetMS,Helvetica,sans-serif;

}

itoverridestheinheritedfont-family,Georgiaoritsrelatives,andstylesallh2headingsinTrebuchetoritsrelatives.Sinceyouhaventspecifiedanyoverridingstylesforsizeorcolor,theh2headingswillinheritthesestylesasspecifiedfortheparent,thebodyelement.h2headingswillbe120%thesizeofthedefaultforh2headings,andtheyllbegray.Ofcourse,youcanoverridetheseinheritedstylesaswell,forexample:h2{font-family:TrebuchetMS,Helvetica,sans-serif;font-size:.5em;color:black;}

Nowweveoverriddenalltheinheritedstyles.

Whenyouoverrideaninheritedsizewithanemvalueasinthecodeabove,thenewemvalueisrelativetotheinheritedsize.Thestylethattheh2headinginthecodeaboveinheritsfromthebodyelementis1.2em1.2timesthedefaulttextsize.Sowhenwestyletheh2headingat.5em,weresaying,Makeh2headingshalftheinheritedsize.Theinheritedsize,thankstothestyleofthebodyelement,is1.2timesthedefaultsize.Halfofthatsize,specifiedby.5em,is.6timesthedefaultsize.

Thatsprettyconfusing,whichiswhymanydevelopersspecify1emforfont-sizeinthebodystyle.Thatmakesitclearthatallemvaluesspecifiedforotherelementswillberelativetothebrowsersdefaultsize.


20Grouping

Youcangroupelementsthatshareoneormorestylecharacteristics.Forexample,ifh1,h3,andh5headingsarealltobeintheArialfontoroneofitsrelativesandyouwantthemallcentered,youcanwriteh1,h3,h5{font-family:Arial,Helvetica,sans-serif;text-align:center;}

Nowallthreetypesofheadingssharethesamefont-familyandtextalignment.

Thisdoesntpreventyoufromindividuallystylingtheseelementswithothercharacteristics.Forexample,ifyouwanth1andh5headingsinonecolorandh3headingsinanothercolor,youcouldaddthiscodeh1,h5{color:#333333;}h3{color:#999999;}

Nowallthreeheadingtypessharethesamefont-familyandtextalignment.h1andh5headingsareonecolor.Andh3headingsareanothercolor.

InyourCSSfilegrouph4headingsandaclassofparagraphsthatcenter.InyourHTMLfilecodeanh4headingandaparagraphofthatclass.Savethefilesanddisplaythepage.




21ID

AtthispointyoushouldbeclearaboutCSSclasses.Theycanbetiedtoanelement,likethis.p.extra-special{font-style:italic;}

Ortheycanbeforgeneralusethatis,nottiedtoanyparticularelement,likethis..extra-special{font-style:italic;}

InHTMLyouassignaclasstoanelementlikethis.DailySpecial

Aclasscanbeassignedtoanynumberofelements.Andanelementcanbeassignedanynumberofclasses.Ifyouhaveaparagraphclass,itcanbeassignedtoathousanddifferentparagraphsifyoulike.Ifyouhaveaclassthatisnttiedtoaparticularelement,itcanbeassignedtodifferentkindsofelements.

Anidislikeaclass,butmoreexclusive.ItcanbeassignedonlyonceinanHTMLdocument.Andanelement,thoughitcanhavemanyclasses,canhaveonlyoneid.

Forexample,supposeyourestylingaparagraphthatcontainsamissionstatement.Thisparticularstylingwontbeusedforanyotherparagraph.Youcouldstylethisspecialparagraphwithaclass,butitwouldbeclearer,fromahumanpointofview,tosingleitoutasuniquebyassigningitanid.

Thefollowingcodecreatesanidandstylingforthemissionstatement.p#mission-statement{font-family:TimesNewRoman,Times,serif;font-size:1.2em;color:darkblue;}

NotethatintheCSSthesyntaxyouusetodefineidsisexactlythesameasforclasses,exceptthata#replacesthedot.

Thefollowingcodecreatesaheadingid.

Thefollowingcodecreatesanidthatcanbeusedforaparagraph,aheading,orotherelementsthatyoulllearnaboutlater.Butremember,anyid,includingthisone,shouldbeusedonlyonceonanyHTMLpage.Forexample,ifyouuseitforaparagraph,dontuseitforanotherparagraph,aheading,oranyotherelementonthepage.

#special{font-size:1.5em;font-style:italic;}

HeresanexampleofHTMLthatassignsanidtoanelement.Thisparagraphhasauniqueid.

IntheHTMLthesyntaxisexactlythesame,exceptthatyoureplaceclasswithid.

idsareimportantinHTML,buttheyplayanevenlargerroleinJavaScript,asyoulllearninmybookASmarterWaytoLearnJavaScript,availableatAmazon.

InyourCSSfilecodeanh2idthatcolorstheheadingorange.InyourHTMLfilecodeaheadingwiththatid.Savethefiles.Displaythepage.




22Div

Youcanbreakupawebpageintosections,calleddivs.Eachofthesedivscanhaveitsownstyling,usingeitheraclassoranid.Coderscommonlycreateseparatedivsforheaders,navigationbars,maincontent,andfooters.Heressomecodethatcreatesadivforthemaincontentofthepage.Sincetherewouldbeonlyonesuchsection,Iuseanidratherthanaclass.div#main{font-size:1.1em;margin:.1em.2em.2em.2em;}

HerestheHTMLthatassignstheid.

Heresthewholestory.Itssoft.Itsfluffy.

Allelementswithinthisdivwillbecontainedinasectionthathasamarginoneachside.UnlessyouvewrittenoverridingCSScodethatchangesthefont-sizeofcertaintextelements,allelementsinthediv,whicharechildrenofthediv,willbe110%ofnormalsize(howeveryouvedefinednormalwhenyoustyledthebody).Ifthoseindividualtextelementsarestyledsmaller(lessthan1em)orlarger(morethan1em)thannormal,theyllbescaledupordowninrelationtothe1.1emspecifiedforthediv,notthenormalspecifiedforthebody.Soifyouspecified1em(thebrowsersdefaultsize)forthebody,1.1emforthediv,and1.5emforh3headings,theheadingswillbe150%of110%ofthebrowsersdefaulttextsize.

Notethatthetagisclosed,andthattheelementsthatareenclosedbythetagsareindented2spaces,sincetheyreallchildrenofthediv.

Whenyourestylingadivthatappearsonlyonceonthepage,likethenavigationsection,maincontent,orfooter,itsbesttocreateanidratherthanaclassforit.Iftheresapossibilityadivstylemaybeusedmorethanonce,defineaclass.Forexample:div.special{margin:.1em.5em.1em.5em;}

Anydivassignedthespecialclasswillhaveextramarginsontheleftandright.Theresultisthatitwillbeinset.

AddadividtoyourCSSfile.Giveit3emleftandrightmargins.Assignitthefont

familyArial,Helvetica,sans-serif.InyourHTMLfilecodeadivwiththatid.Insidethedivcodeaheadingandparagraph.Savethefilesanddisplaythepage.




23Images

Imagesonawebpagearealmostalwaysoneofthreetypes:jpg,gif,orpng.Ineachcase,thethreeinitialsrefertothefileextensionthatdenotestheimageformat.Thejpgformatisbestforphotographsandforillustrationswithmanysubtlecolors.Thegifformatcanbeusedforlinedrawings,illustrationswithjustafewcolors,andimagesoftext.Gifsoffertransparency,meaningthatthebackgroundcolorcanshowthroughwhereveryouwantitto.Gifscanbeanimated.Unlessyouneedanimation,thegifformatisrarelyyourbestchoice.Thepngformatisbetter.Ithasthesamegeneralfeaturesasgif,buthasnoanimation.Itspreferredovergifbecauseitgivesyouhigherqualitythanagifandinasmallerfilesize.Asmallerfilesizemeanspagesloadfaster.

AnHTMLfiletellsthebrowserwhichimagestoplaceonthepageandwheretoplacethem,buttheimagesthemselvesarentpartoftheHTMLfile.Theyreindividualjpg,gif,orpngfilesthatcanbestoredanywhereontheInternet.Inpractice,theyreusuallyplacedinasubfolderunderthesitesmainfolder.Thenamemostoftenusedforthesubfolderisimages.

Letsassumethatyoursitesimagesareintheimagessubfolderofyoursitesmainfolder.Thisishowtoplaceanimagecalledfounder.jpgonyourpage.imgsrc=images/founder.jpg>

imgsrcstandsforimagesource.Ittellsthebrowserwheretofindtheimage.Anequalsigncomesnext.Thentheresthepathandfilename,allinquotes.

Thereisnoclosingtag.

InthenormalflowofHTMLcode,animagewillbeplacedonthepageinthesamelocationasitappearsinthecode.Forexample,inthefollowingcodeOurfounder

Ourfounderisnolongerwithus,alas.

thephotoappearsundertheheadingandbeforetheparagraph.

Youcan,althoughoftennotlegally,displayanimagefromanotherwebsite.Inthatcase,youhavetoincludethewholeURL.

Thefollowingdisplaysanimagestoredinthesubfolderpicsofmywebsite.

UnlessyoutellitotherwiseinyourCSSfile,thebrowserwillplaceanimageallthewayoverontheleft.Later,youlllearnhowtoplaceitwhereyouwantitforexample,inthecenterofthepage.

AddanimagetoyourHTMLfile:http://www.asmarterwaytolearn.com/loris.jpg.

Savethefileanddisplayit.



24Blockvs.inline

MostmajorHTMLelementsheadings,paragraphs,lists,tables,anddivsareblockelements.Whenanelementisablockelement,itmeansthebrowserdoesntputanyotherelementbesideit.Ifyouwriteaheading,thenaparagraph,thenalist,theheadingwillbeginonanewline.Theparagraphwillbeginonanewline.Thelistwillbeginonanewline.

Blockelementscanbeplacedside-by-side,butonlyifyouspecifyspecialstyling.Divsareblockelements,butweplacethemside-by-sideallthetimeusingsomethingcalledfloat,forexamplewhenweplaceasidebarnexttoacontentsection.Youlllearnmoreaboutthislater.

Allblockelementsinsideadivowntheirownhorizontalspaceonlyinsidethatdiv.IfyourCSSspecifiesthattwodivsaretobeplacedside-by-side,thenofcourseelementsofonedivwillsitnexttoelementsoftheotherdiv.Itllbeliketwocolumns,witheachelementhavingitsownhorizontalspace,butonlywithinitscolumn.

Inadditiontostartingeachblockelementonanewline,thebrowserwilladdextraspacebetweenthem.LateryoulllearntoadjustthisspaceusingCSS.

Inlineelementsdontstartonanewline.Forexample,alinkisaninlineelement.IfyouwriteTofindthecolorthatcomplementsyourcomplexion,tryourpicker.html>ColorPicker.

theahrefelementdoesntstartonanewline.Thatsgood,becauseyouwantittobepartofthesentenceflow,notsetoff.

Youmayfinditsurprisingthatimagesareinlineratherthanblockelements.Ifyouwrite

thethreeimageswillbearrayedacrossthediv,iftheresroomforthemall.

YoucanconvertimagesintoblockelementsusingCSS.img.owns-its-own-line{display:block;}

Nowanyimageassignedtotheclassowns-its-own-linewontsharehorizontalspacewithotherimages.

InyourCSSfilecodeaclassofimagesthatdisplaysasablock.InyourHTMLfileassignthatclasstothelorisimagethatyouvealreadycoded.Thenduplicatethatimagetag.Nowyouhavetwoimagesoftheloris.Savethefilesanddisplaythepage.




25Addingmoreinfototheimagetag

Inthelastchapteryoulearnedtowritetheminimalamountofcodeforplacinganimageonthepage.

Thistaggivesthebrowserthenameoftheimagefileandthepathwhereitsstored.Thatwillgetthejobdone.Inpractice,though,youllwanttowriteamoreelaboratetag.

http://asmarterwaytolearn.com/htmlcss/practice-25-1.html.


26Positioninganimage

Ifyoudonttellthebrowserwhereyouwantanimageplaced,thebrowserwillplaceitallthewayoverontheleft.Itllalsoarrayconsecutiveimagesside-by-sideacrossthescreeniftheresroom.

Youcanisolateanimageonitsownlinebylettingthebrowserknowthatyouwanttheimagetreatedasablock,notaninlineelement.Whenitstreatedasablock,itgetstomonopolizethehorizontalspaceitsitsin.

Asyouvelearned,thisishowyoutellthebrowsertotreatanimageasablock.img.normal{display:block;}

Eventhoughthebrowserpositionsanimageallthewayoverontheleftbydefault,youcanmoveittotherightasfarasyoulike,usingmargins.Thefollowingcodedefinesanimageclassthatmovesanimageslightlytotherightoftheleftedgeofthepageorofthedivthatcontainsit.

img.inset{display:block;margin-left:1em;}

Ifyouwanteditfarthertotheright,youdincreasetheemnumber.

Areminder:insetisanameImadeup.Youcannameaclassanythingyoulikeaslongasyoufollowthenamingrules.

InyourCSSfilecreateaclassthatmovesanimageright.InyourHTMLfileaddthatclasstothesecondlorisimage.Remember,anelementcanhavemorethanoneclassassignedtoit.Sotheimagewillhaveboththeclasshas-own-lineandtheclassinset.Savethefilesanddisplaythepage.




27Centeringanimage

Letscreateaclassforcenteringimages.Imgoingtogiveitaridiculousname,toremindyouthatclassnamesaremadeup.img.smack-in-the-middle{display:block;margin-left:auto;margin-right:auto;}

autotellsthebrowsertosplittheleftandrightmarginsequally.Theresultisacenteredimage.

HerestheHTML.

NotethatintheHTMLaboveclasscomesbeforesrcandalltheotherspecifications.Thisisntstrictlynecessary,butIllaskyoutofollowtheconventionwhenyoudotheexercises.

Analternativewaytocodethestyling:img.smack-in-the-middle{display:block;margin:0auto0auto;}

InyourCSSfilecodeaclassofimagesthatcenters.InyourHTMLfileaddathirdlorisimageandassignitthisclass.Savethefilesanddisplaythepage.




28Floatingimages

Wouldyouliketowrapsometextaroundanimage?Hereshow.img.wrap-around-the-right-side{float:left;}

NowanytextthatcomesaftertheimageinyourHTMLcodewillwraparoundtheimage,ontheright.Ifthetextistoolongtofitcompletelynexttotheimage,itllcontinueatfullwidthundertheimage.

Notethattheresnodisplay:blockhere.Theimagewillshareitshorizontalspaceiftheresroom.

Ifyouwanttexttowraparoundtheleftsideoftheimage,youdwrite:img.r-float{float:right;}

Whenyoudothis,youllnoticethatthebrowserjamsthetextupagainsttheimage,leavingnobreathingroom.Youcancorrectthisbyaddingsomemargintotheimage.Inthefollowingcode,whitespaceisaddedbetweentheimageandthetextonitsright.Whitespaceisalsoaddedbelowtheimage,togivebreathingroombetweentheimageandanytextthatflowsbeneaththeimage.img.wrap-around-the-right-side{float:left;margin:0.75em.5em0;}

Theresoneunintendedconsequenceyouneedtoavoid.Letssayyouhaveashortparagraphwrappingaroundtheleftsideofanimage.Theparagraphissoshortthatitdoesntfillallthespacetotheleftoftheimage.Ifyouaddanotherparagraphundertheshortparagraph,itwillwrap.Ifyoudontwantthis,youneedtotellthebrowsertoclearthefloatafterthefirstparagraph.Todothis,youcreateaclass.p.no-wrap{clear:both;}

Bytellingthebrowsertoclearboth,youresaying,Dontwrapanythingfromhereon.HerestheHTML.

Thisisourfounder,BradleyB.Bradley,whoenvisionedaBradsBreadsticksoneverycorner.

Whereveryougo,youllfindaBradsBreadsticksnearby,withbreadsticksin43deliciousflavors.

1. InyourCSSfilecodeaclassofimagesthatfloatsandcreatessomespacebetweenitandthetextthatwrapsaroundit.

2. Createaclassofparagraphsthatclearsthewrap.

3. InyourHTMLfilecopytheimagetagforthesmallerversionoftheloris.Replacetheclassnamewiththeclassthatfloats.

4. Codeaparagraphthatwillwraparoundtheimage.

5. Codeaparagraphthatclearsthewrap.

6. Savethefilesanddisplaythepage.




29Links

NowwecometothefeatureforwhichHTMLisnamed,hypertexta.k.a.hyperlinksa.k.a.links.Youclickonsometextoranimage,andanewpageloads.Orperhapssomethingelsehappens.

Alinkisdisplayed,bydefault,inblue,withanunderline.LetssayIwanttohavealinkonmysite,ASmarterWaytoLearn,thattakestheusertotheprogrammingsiteStackOverflow.WhentheuserclicksStackOverflow,heistakentothehomepageofthatsite.ThisistheHTMLthatcreatesthelink:StackOverflow

Thesearetheparts.

atellsthebrowsertowatchforananchor.Theanchoristhelinktextbetweentheopeningtagandtheclosingtag.Itisthetextthattheusersees.Inthiscasetheanchor,orlinktext,isStackOverflow.

hrefstandsforhypertextreference.hreftellsthebrowser,Watchforanaddressimmediatelyfollowingtheequalsign.Thiswillbethepagetoloadwhentheuserclickstheanchor.

TheWebaddressisinquotes.Inthiscasetheaddressishttp://www.stackoverflow.com.

Aftertheopeningtagcomestheanchor,thetextthattheuserclickstotellthebrowsertoexecutethelink.Theanchorisnotinquotes.

Theclosingtagendsit.

Ifyourelinkingtoapageonthesamewebsite,inthesamefolder,allyouneedisthepagename:Ourproducts

Ifitsonthesamewebsitebutinasubdirectory,youaddthesubdirectoryname.Inthefollowingcode,thefileisinthecatalogsubdirectory.Ourproducts

InyourHTMLfilecodealinktoStackOverflowathttp://www.stackoverflow.com.Savethefileanddisplaythepage.Clickthelink.



30Linkaddresses

Whenalinkaddressdoesntspecifyapage,likeabout.htmlorfaq.html,thebrowserknowstogotothehomepageofthesite,usuallycalledindex.html.

http://www.stackoverflow.com

isthesameas

http://www.stackoverflow.com/index.html

IfIwantedtolinktoapageotherthanindex.html,Iwouldincludethepagenameintheaddress,likehttp://www.stackoverflow.com/web-design.html

Notethattheresa/betweenthedomainnameandthepagename.Therearenospaces.

IfthepageIwantedtolinktowereinasubfolderunderthemainfolder,Idincludethesubfoldernameaswell:

http://www.stackoverflow.com/questions/web-design.html

Alinkmightdrilldownthroughadditionallevelsofsubdirectories,togettoapage.Forexample:

http://www.stackoverflow.com/questions/rookie/newest/web-design.html

Youdonthavetohaveseverallevelsofsubdirectoriesinyoursitestructure,butyoumightwanttoforpurposesoforganizationifthesitehashundredsofpages.Ontheotherhand,ifitsasimplesite,youmighthave,forexample,justanimagessubfolderandastylessubfolderunderthemainfolder.AlltheHTMLpageswouldbeinthemainfolder.Oryoumightchoosetohaveaflatstructure,withnosubdirectoriesatall.Itsuptoyou.

Whenyoulinktoapageonyourownsite,youcanskipthedomainname.Forexample,ifIwanttodisplayalinkonthehomepageofmysitethattakestheusertomyownsitesfaqpage,IwonthavetowriteFrequentlyAskedQuestions

Icanwrite,simplyFrequentlyAskedQuestions

WhenIomitthedomainname,thebrowserunderstandsthatImlinkingtoapageonthesamesite.

IfthepageImlinkingtoisonthesamesitebutinafolderorseverallevelsofdirectorieslowerthanthefolderyourelinkingfrom,youcanstillskipthedomainname,butyouhavetoincludethename(s)ofthelowerfolderordirectories.

FrequentlyAskedQuestions

Intheexampleabove,youretellingthebrowserthatthepagecode-checking.htmlisonelevelbelowthefolderyourelinkingfrom,inthesubfolderservices.Notethatthereisno/beforethesubfoldername.

Butsupposeyouwanttolinkfromapageintheservicessubfoldertoapageintheproductssubfolderthatsonthesamelevelastheservicessubfolder.Sonowyouhavetotellthebrowsertofirstgobackuponelevel,andthengodownfromtheretotheproductssubfolder.Thisishowyoudoit.FrequentlyAskedQuestions

Foreachlevelthebrowserneedstogobackupinordertogodownagain,addanadditional../

Forexample,supposeyourewritingalinkonapagethatsinafoldertwolevelsdownfromthehomepage.Tolinkbacktothehomepage(index.html),youdwrite:Home

InyourHTMLfilecreateabriefparagraphthatincludesalinkthattakestheusertothewhy-exercises.htmlpageatsmarterwaytolearn.com.Savethefileanddisplaythepage.Clickthelink.



31Linkingtoalocation

onapage

Whenyoucreateapageofsignificantlength,youmightwanttoprovidelinkstovarioussectionsofthepage,sotheuserdoesnthavetoscrollthroughthepagelookingforthesectionshewantstosee.Onalongpage,itsalsonicetoprovidelinkstothetopofthepage,sowhenshesfinishedwithalowersection,shecanjumpbacktothetop.

Youbeginbychoosingaheading,paragraph,orotherelementtoserveasthestartingpointforthesection.Yougivethiselementanid.OURCLAIMTOFAME

Thenyoucreatealinktoit.Readallaboutourclaimtofame.

Itslikelinksyoulearnedaboutinthelastchapter,exceptthata#precedestheidinthereference.

Toinsertalinkbacktothetop,youdcreateanidforanelementatornearthetopofthepage.Itcouldbethemainheadingforthepage.Oritcouldbethecontentdivthatencompassesallthecontentonthepage.

Then,whereveryouwanttoplacethelink,youcouldwriteBacktothetop

Whenyouwanttolinktoalocationonanotherpageonthesamesite,youhavetoincludethenameofthepage.Getanswerstoyourcosmicquestions

Thecodeabovelinkstoaheading,paragraph,orotherelementwiththeidwhy-meonthefaq.htmlpage.

Whenyouwanttolinktoasectionofapageonanothersite,youhavetoincludethedomainname.Getanswerstoyourcosmicquestions

Inorderforthistowork,thepageontheothersitehastohaveanelementwiththeidwhy-me.

InyourHTMLfilegivetheheadingatthetopofthepageanid.Atthebottomofthe

pagecodealinktothatheading.Savethefileanddisplaythepage.Scrolldowntothelinkandclickit.



32Openinganewwindow

Nooneeverwantstoloseausertoanothersite,butsometimeswehavetolinkawayanyway.Thetacticforencouragingtheusernottoleavepermanentlyistoopenthelinkedsiteinanewwindow,leavingyoursiteinitsexistingwindow.Thisishowtodoit.Lookitupat

Savethefileanddisplayit.Clickthelink.



33Stylinglinks

Bydefaultbrowsersstylelinktextinbluewithanunderline.Butyoucangiveitadifferentstyle.Youcanspecifyadifferentfont-family,font-size,font-weight,color,andotherfontcharacteristics.

Youcanevenlosetheunderlineifyoulike.Butbecareful.Usershavebeenconditionedtoassociatetheunderlinewithlinks.Iftheresnounderline,theyllhaveahardertimeidentifyingtextassomethingtheycanclick.Conversely,itsabadideatounderlinenon-linkingtextforemphasis.Someuserswilltrytoclickonit.Foremphasis,itsbettertoputnon-linkingtextinitalicsorbold.

ThisCSScodecolorsallyourlinksgoldenrod.a{color:#b8860b;}

Youcanmakelinkschangetheirappearancewhentheuserhoversthemouseoverthem.Thiscodeboldsthemandremovestheunderlinewhentheuserhovers.(Removingtheunderlineonhoverisntaproblem,becausetheuserhasalreadyidentifieditasalink.)a:hover{font-weight:bold;text-decoration:none;}

Inthecodeabove,text-decoration:noneremovestheunderline.

Itsnotagoodideatounderlinenonlinkingtextsinceitmayconfusethereaderbysignallingthatthetextisclickable,butyoucanunderlinetextifyouchooseto,byspecifyingtext-decoration:underline.

Youcanchangetheappearanceoflinksatthemomenttheuserclicks.Thiscodeincreasesa:active{font-size:1.25em;}

Youcanchangetheappearanceoflinksthattheuserhasalreadyclicked.Thiscodechangestheircolor.a:visited{color:deeppink;}

InyourCSSfilecodelinksgreyandlinksthatarehoveredonorange.Savethefile.

Displaythepage.Checkthelinks.Hoveroveroneandseewhathappens.



34Clickableimages

Youcansubstituteanimageforalinkanchor(thetextthattheuserclicks).Whentheuserclicksontheimage,itworksthesameasanchortext:anewpageloadsorsomethingelsehappens.Todoit,youcombinetwotagsyoualreadyknow,theatagandtheimgtag.

LookagainatthelinkcodefromChapter28.StackOverflow

WhentheuserclicksthewordsStackOverflowshestakentostackoverflow.com.

HeressomecodethatusestheStackOverflowlogoinsteadofananchor.

Whentheuserclickstheimage,shestakentostackoverflow.com

Onewaytocreateaclickablebuttonistomakeanimageofabutton,thenmaketheimageclickable.

Anothergooduseforclickableimagesisaphotogallery.Youarrayoneormorerowsofthumbnailimagesacrossthepage.Whentheuserclicksoneofthem,alargerversionoftheimageloadsinanewwindow.Herescodethatturnsanarrayofthumbnailsintoaclickablecatalog.

5.jpgalt=Pigeonwidth=50height=50>

Anicewaytodothisistoaddtarget=_blanktotheatagasIshowedyouinChapter32,sothepagewiththebigpictureopensinanewwindow.Evennicer:openitinawindowthatssmallerthanfull-sizesotheusercanseeaportionoftheoriginalpageunderneath,asIshowedyouattheendofChapter32.

InyourHTMLfilecreateanimagetagforhttp://www.asmarterwaytolearn.com/robo_guy.pngandlinkittoasmarterwaytolearn.com.Savethepageanddisplayit.Clickthepicture.



35Imagemapspart1

Animagemapisspecialtypeofclickableimage.Yourcodesectionsitintotwoormoreparts.Iftheuserclicksonesectionoftheimage,anewpageloads.Ifheclicksanothersection,adifferentpageloads.Forexample,youmighthaveaphotographshowingsixhistoricalbuildingsinatownsquare.Whenyouclickonaparticularbuilding,apageloadsthattellsthestoryofthebuilding.

Imagemapsrequirequiteabitofcode,soImgoingtodividethesubjectintotwochapters.

Letssayyourimageis6-buildings.jpg.Youbeginwithastandardimgtag.

Withinthetagyouspecifythenameoftheimagemapthatsgoingtodivideupthephotointoclickableregions.

36Imagemapspart2

Youveplacedanimageonthepage,andyouveconnectedittoanimagemapbywriting,withintheimgtag,usemap=#buildings.Thenyouvestartedanimagemapdefinitionwiththeline

Heresthewholething.

Thesearethepartsofeachmapsection.

1. Theshapeofthearea.Writerectforrectangle,circleforcircle,orpolygonforpolygon.

2. Alternativetextforscreenreaders.YoulearnedaboutthisinChapter2

3. Thescreencoordinatesthatdefinethearea.Seebelowforhowtogetthesecoordinates.Examples:Forarectangle,coordinatesof76,42,279,510meantheclickablerectanglebegins76pixelsinfromtheleftedgeoftheimageand42pixelsdownfromthetopoftheimage,andextendsrightby279pixelsfromtheleftedgeoftheimageand510pixelsdownfromthetopoftheimage.Foracircle,coordinatesof100,60,10meantheclickablecirclehasacenterat100pixelsinfromtheleftedgeoftheimageand60pixelsdownfromthetopoftheimage,andhasaradiusof10pixels.Forapolygon,coordinatesof150,217,190,257,150,297,110,257createadiamondshape.Thetoppointofthediamondis150pixelsinfromtheleftedgeoftheimageand217pixelsdownfromthetopoftheimage.Therightpointofthediamondis190pixelsinfromtheleftedgeoftheimageand257pixelsdownfromthetopoftheimage,andsoon.Threesetsofcoordinatescreateatrianglearea,fivesetsapentagonalarea,andsoon.

4. TheWebaddressforthepagetoloadwhentheuserclicksthearea.

Ratherthantryingtocreateanimagemapbyhand,automatethetaskwithautilitythatdoesmostoftheworkforyou,includingthefussyworkofestablishingcoordinates.WebdevelopmenttoolslikeDreamweaverincludesuchautility.Youcanalsouseafreeonlineimagemapcreatorliketheoneathttp://www.image-maps.com.MyfavoritetoolforcreatingimagemapsisMapedit,adownloadableprogramfromhttp://www.boutell.com.Theresagenerousfreetrialperiod,afterwhichyoupay$15.

1. InyourHTMLfileinsertabreakaftertherobo_guy.pngimage.

2. Createanimagemapusinghttp://www.asmarterwaytolearn/stooges.jpg

3. IvemappedtheStoogesfacesasthreeclickableareas.Theyrecircles.Thecoordinatesare56,56,47126,93,31and208,66,3

4. DoaGooglesearchforeachoftheStooges.CopytheGoogleURLsthatthesearchesgenerateandusethemasthelinks.Forexample,whentheuserclicksCurlysface,shestakentotheGooglesearchforCurly.

5. Savethefileanddisplaythepage.Clickoneachofthefaces.

SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-36-1.html


37Bulletlists

andnumberedlists

TheHTMLtermforabulletlistisunorderedlist.Unorderedmeansnotnumbered.Anorderedlistisanumberedlist.MakingbulletandnumberedlistsinHTMLisconvenient,becauseHTMLautomaticallyindentslistsandautomaticallynumbersorderedlists.

Inbothtypesoflist,youwriteatagforthelistforunorderedlistsandfororderedlists.Thenyouwriteatagforeachitem,whichstandsforlistitem.isthetagforindividualitemsineithertypeoflist,orderedorunordered.

Thiscodecreatesabullet(unordered)list.

SunMoonPlanetsStars

Thiscodecreatesanumbered(ordered)list.

WashRinseRepeat

Thingstonotice:

Eachlistitemisindentedtwospaces.

Eachopeningtagiscompletedwithaclosingtag.



38Stlyinglists

Sincelistsaretextelements,youcanstylethemthewayyoudstyleaparagraphorheading,withacustomizedfont-family,font-size,font-weight,color,andmargins.

ThisCSScodeinsetsanyunorderedlist,assigningextrawhitespaceonboththeleftandright.ul{margin:01.5em01.5em;}

Youcould,ofcourse,adjustthetopand/orbottommargins,too.Usethesametypeofcodefororderedlists.Justsubstituteolforulinthecodeabove.

Thecodeabovestylesalltheunorderedlistsonthepage.Youcouldcreateaclassoflists,justforsomeofyourlists.ol.special{margin:01.5em01.5em;}

Bydefault,browsersdontaddanyspacebetweenlistitems.Ithinktheylookbetteriftheyreseparatedabit.li{margin:.75em;}

Notethattheresonlyonemarginnumberinthecodeabove.Browsersunderstandthatitspecifiesthespacebetweenlistitems.

Thedefaultisabulletontheoutsidewithalllinesoftextindented.Tomakethedefaultexplicit,writeul{list-style-position:outside;}

Toindentonlythefirstlineoftextandmakeallotherlinesflushwiththebullet,writeul{list-style-position:inside;}

InyourCSSfileaddspacebetweenlistitems.Savethefile.Displaythepage.

39Stylingalistssmarkers

Markersarethebulletsinanunorderedlistorthenumbersinanorderedlist.

Ifyoudontspecifywhatkindofbulletsyouwantinanunorderedlist,thebrowserdisplaysadisc:

ThisistheCSScodethatexplicitlyspecifiesadiscasthemarker.Itwouldnormallybesuperfluous,sincethediscisthedefault.ul{list-style-type:disc;}

Touseaforthebullet,substitutecirclefordiscinthecodeabove.

Touseasubstitutesquare.

Youcanuseanimageforabullet.Theexamplebelowcreatesaclassofunorderedlistthatusesanimage.ul.custom{list-style-image:url(images/heart.png);}

Inthecodeabove,images/heart.pngtellsthebrowserthepathandfilenameoftheimage.

Animageusedasabulletcreatesheadaches.Tobeginwith,youmustsizetheimagetofitthelisttext.Then,iftheuserzoomsinoroutonthepage,thebrowserdoesntadjustthebullettofit,asitdoeswiththebuilt-indisc,circle,andsquare.Everythinggetsoutofwhack.Itspossibletobuildadefenseagainstthis,butyoureprobablybetteroffspendingyourcodingtimeonsomethingthattheusercaresmoreabout.

Thedefaultlist-style-typefororderedlistsisdecimal1,2,3etc.Youcanchangeittodecimal-leading-zero01,02,03etc.;lower-alphaa,b,cetc.;upper-alphaA,B,Cetc.;lower-romani.,ii.,iii.etc.;andupper-romanI,II,IIIetc.Herescodethatcreatesaclassforupper-roman.

ol.second-level{list-style-type:upper-roman;}

InyourCSSfilestyleunorderedlistmarkersassquares.Savethefile.Displaythepage.


40MoreCSSselectors

ACSSselectoriseverythingonthefirstlinethatprecedesthe{.Itsthepartofastylerulethattellsthebrowserwhatelements,classes,andidsaruleappliesto.Theselectorsarehighlightedinthefollowingcodefragments.p{p.special{.special{p#intro{#intro{

Sofaryouvelearnedtocreate

1. Anelementselectorlikep,div,orimg.

2. Anelementclassselectorlikep.special,div.important,orimg.gallery.

3. Aclassselectortiedtonoparticulartypeofelementlike.special,.important,or.gallery.

4. Anelementidselectorlikep#intro,div#sidebar,orimg#logo.

5. Anidselectortiedtonoparticulartypeofelementlike#intro,#sidebar,or#logo.

Youcancombineselectorstocreatemorecomplicatedselectors.Heresone.div.importantp{

Thecodeaboveselectsallparagraphsinadivthatsbeenassignedtheclassimportant.

Thefollowingcodeselectsallimagesthatareinlistitemsinanunorderedlistwiththeidpix-list.ul#pixListliimg{

Heressomecodethatselectsthefirstparagraphfollowinganydiv.

div+p{

Thefollowingcodeselectsonlythefirstlevelofdivswithinthedivthathasanidofmain.div#content>div{

Sointhefollowingcode,onlythehighlighteddivsareselected.

[somecontent][somecontent][somecontent][somecontent][somecontent]

YoucanlearnalotaboutselectorsbyplayingaroundwiththeinteractiveW3SchoolsCSSselectortesterathttp://www.w3schools.com/CSSref/trysel.asp.

InyourHTMLfileyoucodedadivwithanid.InyourCSSfiledoublethesizeofallparagraphswithinthatdiv.Savethefile.Displaythepage.



41Tables:basicstructure

AlltheHTMLcodeforatableisenclosedinanopeningandclosingtag.

[Thedetailsofthetablegohere.]

Withinthosetagsyoucreaterowsandcolumns.Heresatablewithtworowsandtwocolumns.

Row1,column1Row1,column2Row2,column1Row2,column2

Thisiswhatthetablelookslike(withaborderthatIaddedtomaketherowsandcolumnsstandout).

Unlessyoustyleaborderexplicitly,mostbrowsersdisplayitwithoutborders,likethis.

Youlllearnhowtoaddborders,ifyouwantthem,inalaterchapter,andtostyletablessotheyremoreattractive.Fornow,letsgetyoufamiliarwiththisbarebonesstructure.

AsyoucanseefromtheHTMLcode,youbuildatablearowatatime.Youcreatearowusingthe(fortablerow)tag.Thenyoucreateallthecellswithinthatrowusingthe(fortabledata)tag.

Allthetextcontentofatablecellisenclosedbetweentheopeningtagandtheclosingtag.Theopeningtagandclosingtagdontencloseanytextcontent.Theyonlycontainthetagsandtheirtextcontent.

Allopeningtagsarepairedwithclosingtags.

Eachrowmusthavethesamenumberofcells,createdwiththeandtags,evenifsomeofthecellsareempty.Tocreatethistable,withnothinginrow2,column1

youdwrite

ApplesOrangesPears

Noticethatallthetagsareindentedtwospacesinsidethetag,andthetagsareindentedtwospacesinsidethetags.

InyourHTMLfilecodeatablewithtworowsandtwocolumns.Savethefile.Displaythepage.



42Tables:headings

Youcantellthebrowsertoaddheadingsfortables.Heresatablewithcolumnheadings.

Thisisthecode.

DogCatCanineFelineBarkMeow

PuppyKitten

Youbeginbycreatingarowfortheheadings,justasyouwouldforregularcells.Then,usingtheopening(fortableheading)andclosingtags,youconstructcellswithtextinthem,asyouwouldforregulartextcells.Butnotescope=col.Thistellsthebrowserthatyouwantcolumnheadingsheadingsontopnotrowheadings,whichwouldbegineachrowontheleft.Bydefault,mostbrowsersboldheadingtextandcenterithorizontallywiththecell.Nowletscreateatablewithrowheadings,likethisone.

Thisisthecode.

SpeciesCanineFelineSoundBarkMeowImmaturePuppyKitten

Youcreateaheadingforeachrow.Andyouwritescope=row.Heresthetablewithbothcolumnandrowheadings.

Thisisthecode.

DogCatSpeciesCanineFelineSoundBarkMeow

ImmaturePuppyKitten

Noticethattherearethreecolumnheadings,thefirstoneblank.Thistellsthebrowserthatthereisnocolumnheadingoverthecolumnofrowheadings.

InyourHTMLfilecodeatablewithbothcolumnandrowheadings.Savethefile.Displaythepage.



43Tables:

spanningcolumnsandrows

Sometimesyouneedtocombinetwoormorecellsintoasingle,extra-widecell.

Thetableaboveshowstheearly-afternoonscheduleforthreefacilities.Iveaddedborders,andIvehighlightedthetwospannedrowsthatIwantyoutopayattentionto.Neitherthebordersnorthehighlightingarepartofthecodebelow.Youlllearnhowtoaddbothkindsofstylinginsubsequentchapters.Thisisthecode.

1pm2pm3pmGymDodgeballKickboxingSackracingExerciseroomSpinning

YogamarathonPoolWaterpolo

Thecodeforacolumn-spancelllookslikearegularcell,exceptforthecodecolspan=[numberofcolumnstospan].Theclosingtagisthesameasforaregularcell.Noticethatawiththecolspanfeaturereplacesthesamenumberofregularsasthenumberofcolumnsthatarespanned.Inthefirstrow,therearethreeregulars.Inthesecondrow,wheretwocolumnsarespanned,theresoneregularplusthespan.Inthethirdrow,wherethreecolumnsarespanned,theresnoregular.Youcanmaketableheadingsspancolumns,too.Thecodeis

Whatever

Spanningrowsworksthesamewayasspanningcolumns,butusesrowspan.Heresthetableabove,reconfiguredsothefacilitiesareatthetopandthetimesareontheleft.

Thisisthecode.

GymExerciseRoomPool1pmDodgeballSpinning

Waterpolo2pmSpinningYogamarathon3pmSackracing

Youcanmaketableheadingsspanrows,too.ThecodeisWhatever

Youcandivideatableintothreesections:aheader,body,andfooter.Thishelpsscreenreaders,butdoesntdoanythingforsightedusersthatyoucantdousingthecodeIvealreadytaughtyou.Illshowyouanexample.Youwontbetestedonitintheexercises.

Thisisthecode.

GymExerciseRoomPool

3activities2activities1activity1pmDodgeballSpinningWaterpolo2pmSpinningYogamarathon3pmSackracing

Codeasimpletablewithtworowsandtwocolumns.Inthesecondrow,spanthecolumns.



44Tables:borders

Youcancreateatablewithbordersorwithout.Heresatablewhereallthecellshaveborders.

ThisistheCSScode.th,td{border:1pxsolidblack;}

Byspecifying1pxsolidblackImaskingforasolidblacklineofminimal1-pixelwidth.Foraheavierline,increasethepixelnumber.Foranothertypeofline,specifydottedoroneoftheotherborderstylescoveredinChapter17.

Bydefault,browsersaddalittlespacebetweencells,asinthetableshownabove.Thiscreatesgapsbetweenthehairlineborders.Ifyoudontwantthosegaps,addaspecificationforthetable:table{border-collapse:collapse;}

Thisistheresult.

Bydefault,browsersdontdrawaborderaroundanything.Ifyoudontwantborders,theresnothingtocode.ButwithCSSyoucanaddbordersanywhereyoulike.Forexample,heresatablewithtopandbottombordersframingthetableheaders.

HerestheCSScode.th.top-row{border-top:1pxsolidblack;border-bottom:1pxsolidblack;}

ThefirstsevenlinesofHTMLwouldbeGymExerciseRoomPool

[etc.]

TheonlyreasonIhavetodefineaspecialclassofisthatIvealsogotsrunningdowntheleftsideofthetable,denotingtimes.SinceIdontwantbordersonthese,Ineedtomakeadistinctionforsthathavecolumnscope.Otherwise,Icouldjustwriteth{border-top:1pxsolidblack;border-bottom:1pxsolidblack;}

Tocreateleftandrightbordersuseborder-leftandborder-right.Forexample,supposeyouwantheavyorangebordersdefiningtheleftandrightedgesofcertaintables.

Thisisthecode.table.standout{border-left:5pxsolidorange;border-right:5pxsolidorange;}

ThefirstlineofHTMLwouldbe

InyourCSSfilespecifybordersforallcells.Eliminatespacebetweenborders.Savethefile.Displaythepage.SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-44-1.html.Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/44.html

45Tables:

Spacingpart1

Bydefault,browsersdontaddbreathingroombetweenthetablecellbordersandthetexttheycontain.Theyrejammedupagainsteachother.Itlookscrowded.

Thesolutionistoaddpadding.th,td{padding:.25em;}

TheCSScodeaboveaddsalittlewhitespaceallaroundthetext.

Youincreaseordecreasetheamountofpaddingbychangingtheemnumber.Youcanalsospecifydifferentpaddingfordifferentsides.td{padding:.25em1.5em01.5em;}

TheCSScodeaboveaddsextrapaddingatthetop,justalittleonthesides,andnone

onthebottom.Aswithmargins,thenumbersstartatthetopandproceedclockwise.Tospecifynone,write0,not0em.

Supposeyouwantcellsspacedapartsay,evenfartherapartthanthebrowserdefault.HerestheCSScode.Imgoingtospecifylargespaces,sotheyreeasytosee.table{border-spacing:1em;}

Thisistheresult.

Notethatborder-spacingissomethingyouspecifyforthewholetable,notthe

orelements.Asusual,youcanspecifydifferentborder-spacingfordifferentsides.

table{border-spacing:0.25em0.25em;}

TheaboveCSScodewouldaddextraspaceontheleftandrightandleavetopandbottomspaceatthedefaultwidth.

Evenifatabledoesnthaveborders,youcanuseborder-spacingtoaddwhitespacebetweenthecells.Heresthesametable,withnoborderspecifiedbutwiththeall-aroundborder-spacingof2.5em.

InyourCSSfileadd.25emofpaddingtoallcells.Savethefile.Displaythepage.SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-45-1.html.

46Tables:

spacingpart2Bydefault,browsersadjustcellsizetocontents.Ifyouwrite

MondayTuesdayWednesdayThursdayFridayRomeAddisAbabaCairoSaintSeaburyonth

a smarter way to learn html & css learn it faster. remember it longer by mark myers

Documents