a smarter way to learn html & css learn it faster. remember it longer by mark myers
Post on 16-Dec-2015
51 Views
Preview:
DESCRIPTION
TRANSCRIPT
-
AlsobyMarkMyers
-
ASmarterWayToLearnHTML&CSS
Learnitfaster.Rememberitlonger.
-
MarkMyers
-
Copyright2015MarkMyersAllrightsreserved,includingtherighttoreproducethisbook,oranyportionsofit,inany
form.
1.0
http://www.ASmarterWayToLearn.com
-
Chapters
Learnitfaster.Rememberitlonger.
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
65Layout:amodernheaderpart2
66Layout:amodernheaderpart3
67Layout:amodernheaderpart4
68Layout:amodernheaderpart5
69Averticalnavigationbarpart1
70Averticalnavigationbarpart2
71Averticalnavigationbarpart3
72Averticalnavigationbarpart4
73Averticalnavigationbarpart5
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
-
Learnitfaster.Rememberitlonger.
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.
PracticeMarkMyersThatsmyname.
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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/2.html
-
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:
AllthekingshorsesandallthekingsmencouldntputHumptytogetheragain.
-
Ormaybeitllbreakitsomeotherway.Butyouwontcontrol,andmaynotbeabletopredict,howtheheadingbreaks.Ifyoureatallfussy,youmightwanttotellthebrowserhowtobreakit.Maybeyouwantitbrokenthisway:
AllthekingshorsesandallthekingsmencouldntputHumptytogetheragain.
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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/3.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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/4.html
-
5LinkingyourCSStoyourHTML
SincetheCSSfileisseparatefromtheHTMLfile,thebrowserhastobetoldwheretofindit.Thisishowyoudoit.
PracticeMarkMyersThatsmyname.
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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/5.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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/6.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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/7.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.
-
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/8.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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/9.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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-10-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-10-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/10.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-12-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-12-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/12.html
-
13Spacing
Youcancreatestylesfortextspacing.Letssayyourh2headingnormallylookslikethis.Signupforthecoursenow.Ifyoucreatethisstyleh2{letter-spacing:.1em;}
theh2headingwouldaddextraspacebetweentheletters.Itwouldlooklikethis
Signupforthecoursenow.
Notethatwhenyouspecifyanemvalueforletter-spacing,ittellsthebrowserhowmuchmorespaceyouwantbeyondthenormalspacing.Orhowmuchless.Lookatthisstyle.h2{letter-spacing:-.05em;}
Thecodeabovetightensthespacebetweenletters,sotheheadinglookslikethis
Signupforthecoursenow.
Ifyouwantedtousedefaultletter-spacing,youdwriteh2{letter-spacing:0;}
Letter-spacingdoesntdistinguishbetweencharactersinthemiddleofawordandcharactersthatbeginorendaword.Thismeansthatletterspacingadjuststhespacenotonlybetweencharactersinawordbutalsobetweenthelastcharacterofawordandthefirstcharacterofthenextword.Ifyouincreaseletter-spacing,thespacingbetweenwordsincreasesautomatically.Ifyoucomparethethreeexamplesabove,youllseethatspacehasopenedupbetweenwordsinthefirstandsecondexamples.
Ifyouwanttoadjustspacingonlybetweenwords,useword-spacing.
Illexaggeratetheword-spacingsoyoucanclearlyseeit.
-
h2{word-spacing:1em;}
TheCSSabovestylestheheadingtolooklikethis.
Signupforthecoursenow.
Youprobablywontuseword-spacingveryoften.Themostcommonuseforitistoslightlyopenupthespacebetweenboldedwords,forbetterreadability.
Youcanspecifythespacingbetweentextlines,knownintheanalogworldasleading,byusingline-height.
Heresaparagraphwithnormalline-height.
SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-13-2.html.
-
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/13.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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-14-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-14-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/14.html
-
15First-lineindentandblockquote
Bydefault,browsersdontindentthefirstlineofaparagraph.Thefollowingparagraphshowshowthebrowserdisplaysaparagraphifyoudonttellittodisplayitdifferently.
SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-15-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-15-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/15.html
-
16Margins
Youcanputmarginsaroundparagraphs,headings,andmanyotherHTMLelements.Amargincreatesextrawhitespacearoundthetop,bottom,orsidesofanelement.Forexample,ifyouhaveaparagraphthatwouldnormallylooklikethis
SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.
addingaleftmarginwouldaddwhitespaceontheleft,likethis
SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.
Andaddingarightmargin,inadditiontoaleftmargin,wouldaddwhitespaceontheright,likethis
SlowlorisesareagroupofseveralspeciesofstrepsirrhineprimateswhichmakeupthegenusNycticebus.Theyhavearoundhead,narrowsnout,largeeyes,andavarietyofdistinctivecolorationpatternsthatarespecies-dependent.
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-16-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-16-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/16.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-17-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-17-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/17.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-18-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/18.html
-
19Inheritance
InheritanceisanefficiencyfeatureofCSS.Itmeansyouhavetowritefarlesscode.
Inordertounderstandinheritance,youneedtounderstandthatanHTMLpageisorganizedintoparentsandchildren.Achildelementofaparentelementisanyelementthatsenclosedbytheparentelement.
Letsstartwiththeuber-parent.InanHTMLdocument,theparentofallthecontentthatdisplaysonthepageis.Everythingonthepageisachildof,becauseeveryelementisenclosedbythetags.(Bothandhaveaparent,,butwerenotconcernedwiththatnow.)
LookatthesimplifiedwebpagefromChapter2.
PracticeMarkMyersThatsmyname.
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.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/19.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-20-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-20-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/20.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-21-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-21-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/21.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-22-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-22-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/22.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-23-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/23.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-24-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-24-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/24.html
-
25Addingmoreinfototheimagetag
Inthelastchapteryoulearnedtowritetheminimalamountofcodeforplacinganimageonthepage.
Thistaggivesthebrowserthenameoftheimagefileandthepathwhereitsstored.Thatwillgetthejobdone.Inpractice,though,youllwanttowriteamoreelaboratetag.
-
http://asmarterwaytolearn.com/htmlcss/practice-25-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/25.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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-26-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-26-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/26.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-27-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-27-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/27.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-28-1.html.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-28-2.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/28.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-29-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/29.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-30-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/30.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-31-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/31.html
-
32Openinganewwindow
Nooneeverwantstoloseausertoanothersite,butsometimeswehavetolinkawayanyway.Thetacticforencouragingtheusernottoleavepermanentlyistoopenthelinkedsiteinanewwindow,leavingyoursiteinitsexistingwindow.Thisishowtodoit.Lookitupat
-
Savethefileanddisplayit.Clickthelink.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-32-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/32.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-33-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/33.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-34-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/34.html
-
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
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/36.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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-37-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/37.html
-
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.
-
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-38-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/38.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-39-1.html.
-
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/39.html
-
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.
SampleCSScodeisat:http://asmarterwaytolearn.com/htmlcss/practice-40-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/40.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-41-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/41.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-42-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/42.html
-
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.
SampleHTMLcodeisat:http://asmarterwaytolearn.com/htmlcss/practice-43-1.html.
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/43.html
-
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.
-
Findtheinteractivecodingexercisesforthischapterat:http://www.ASmarterWayToLearn.com/htmlcss/45.html
-
46Tables:
spacingpart2Bydefault,browsersadjustcellsizetocontents.Ifyouwrite
MondayTuesdayWednesdayThursdayFridayRomeAddisAbabaCairoSaintSeaburyonth
top related