html & css cheat sheet - typographic web · pdf filehtml & css cheat sheet from...
TRANSCRIPT
1HTML&CSSCheatSheetFall2016
HTML&CSSCheatSheetfromTypographicWebDesign3byLauraFranzWebsafefontsvswebfontsYoucanexpectthesewebsafefontstoworkacrossmostplatformsandbrowserswithoutusing@font-faceorawebfontprovider.Georgia Verdana Arial TimesNewRomanTrebuchetMS Impact Courier ComicSansMSStartinganHTMLdocumentWheneveryoustartanewHTMLdocument,youneedtostartsomewhere!
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <meta charset="UTF-8"> <link href="name-of-file.css" rel="stylesheet" type="text/css"> </head> <body> </body> </html>
BasicTypeTagsWraptextintagstotellthebrowserwhatkindofelementitis.Youhavesixheadingstoworkwith(h1-h6)butonlyonep!
h1, h2, h3, h4, h5, h6, p
DescribetypeelementsinCSSlikeso(optionalvaluesareinparenthesis):
h1{ font-family: Georgia; font-weight: normal; (bold) font-style: italic; (normal) font-size: 60px; (can measure in px, em, rem, %) line-height: 60px; (can measure in px, em, %) text-transform: uppercase; (lowercase, capitalize) letter-spacing: 5px; (can measure in px, em, %) text-align: center; (right, left, justify) color: #ffffff; (#cccccc, #999999, #666666, #333333, #000000) }
2HTML&CSSCheatSheetFall2016
UsingDivsAddadivwithanIDintheHTMLlikeso:
<div id=”name-of-div”> </div>
DescribedivsinCSSlikeso(thisisa400pxwidedivcenteredleft-rightinthebrowser,witha1pxblackborderandawhitebackground):
#name-of-div{ width: 400px; border-width: 1px; border-style: solid; margin-top: 20px; margin-right: auto; margin-bottom: 0px; margin-left: auto; background-color: #ffffff; }
GivingthepageabackgroundcolorStylethebackgroundofthewholepageinCSSbydescribingthebody:
body{ background-color: #999999; }
ValidatingYourFilesValidateyourHTMLandCSSat:
validator.w3.org jigsaw.w3.org/css-validator
AdjustingSpaceAroundElementsYoucanadjustthespacearoundelements(includingtextelements)usingmarginandpadding.Tocontrolspacing,settextelementsto:
margin:0; padding:0;
Youcanthenaddspacebackinwhereneeded,asneeded:
margin-top:0; margin-right:0; margin-bottom:5px; margin-left:0; padding:0;
Youcanindentparagraphsbyusingtext-indent:
text-indent: 22px; (use whatever measurement works best for you!)
Youcanalso“outdent”textbyaddingapositivemargintothetext,thenmovethefirstlineoutwithanegativeamount.
margin:0px; margin-left:22px; text-indent:-22px;
Addingemphasiswithoutusinganh1-6tag:em,strong,classYoucanemphasizewordsusing:
<em></em>
Bydefault,textemphasizedwith<em></em>willbeitalic.ButyoucanalwaysstyleitinyourCSS(justlikeotherelements),likeso:
em{ }
Youcanemphasizewordsmorestronglywith:
<strong></strong>
Bydefault,textwillbebold.Again,youcanstylethestrongelementlikeso:
strong{ }
Youcanstyleanelementdifferentlyonthesamepage(forexample,youcanmakesomeparagraphslookdifferentfromotherparagraphs)withaclass.Unlikedivs,classescanbeusedmultipletimesonthesamepage:
<p class=”intro”>Paragraph of text goes here.</p>
Andagain,youcanstyletheclassintheCSS:
.class{ }
CurlyQuotes!Usecharacterentitiessoyourquotationmarksarecurly:
“ (left) ” (right)
3HTML&CSSCheatSheetFall2016
UsingFontSquirrelfor@font-faceWebFonts Youcanget@font-facefontsfromothersources,butFontSquirrel.comisagreatplacetostart.It’sfree,anditprovidesyouwiththefilesyouneed.1. Alwaystestdriveafontusingtheword/
wordsyou’llbeusing(helpsyoucatchproblemsearly).
2. GettheWebfontKit(gotoWebfontKittab).
3. IftheWebfontKitisavailable,youcanselectallfourfontformats,andclickthe“download@font-facekit”button.
4. IftheWebfontKitisNOTavailable,downloadtheOTFandusethewebfontgenerator(useoptimalsetting)tocreateaWebfontKit.
5. Viewthehtmlfilewiththeworddemoinitsnameinabrowser(ifthewebfontshowsupcorrectly,everythingdownloadedcorrectly)
6. Openthestylesheet.cssfileprovidedintheWebfontKit,copythe@font-facesyntax,andpasteitintothetopofyourcssfile.
7. Copythefont-familyname(includingthequotationmarks)fromthe@font-facesyntax,andpasteitintotheelement(e.g.,h1)whereyouwanttousethefont.Fontfamilynamesmustmatchexactly(inthe@font-facesyntaxandintheelementwhereyouareusingit)!
8. Putthefourorfivefontfiles(eot,woff,ttf,svg–sometimesoneofthefilesissplitintotwo),intheexactsamefolderasthecssfile.Donotputthefontfilesintotheirownfolderinsidethefolder.Theymustbeatthesamelevelasthecss.
9. MakeanoteinyourCSSaboutwhereyougotthefontfrom,whothedesigneris,etc.
MakingNotesinCSSwithCommentsCSScommentsdon’taffecttheHTMLfile.
/* Use slashes and asterisks like this to comment in the CSS. */
BuildingaFontStackFontstacksprovidea“fallbackfont”incasesomethinggoeswrongwiththewebfont.Separatefontswithacommalikethis:
h1{ font-family: ‘rochester’, Georgia; }
UsingGoogleWebFontsYoucangetwebfontsfromotherservices,butfonts.google.comisagreatplacetostart.It’sfree,anditprovidesyouwiththefilesyouneed.Thedirectionsonthesiteareprettystraightforward.Justremember:don’tusemoreweightsandstylesthanyouneed(itwillslowyourpagedown).Andusethedirectionsforthe“Standard”Embed.RESPONSIVELAYOUTSMobileFirstAlwaysbuildmobilefirst(stylingbiggerversionswithmediaqueries).Breakpoints/MediaQueriesAtthepointwherealayout“breaks”andyouneedtorestyleelements,useamediaquery.Example:
@media (min-width: 590px) { }
UniversalSelector(*)IsusedtostyleallelementsintheCSSfile.Forexample,tosetthemarginandpaddingofallelementsto0,type:
*{ margin:0; padding:0; }
max-widthTokeepeverythinginplace,allelementsshouldliveinsidethemain_container,whichissetwithamax-width.Forexample:
#main_container{ max-width:1400px; }
4HTML&CSSCheatSheetFall2016
ResponsiveWidthsThedivsinsidethemain_containeraremaderesponsivebysettingwidthin%,notpixels.PutColumnsSide-by-SideUsingthefloatproperty.Forexample:
#intro_column{ float:left; }
TotalWidthMustbeLessThan100%Theleftmargin,leftpadding,width,rightpadding,andrightmarginofallelementsinarowmustequal100%orless.Otherwise,theywon’tfit,andthelastelementwillfalltothenextrow.Recommendation:don’tsetrightmargin.Letthe“leftover”spaceactastherightmargin.Main_container{overflow:hidden;}Otherwise,wheninternal(aka“child”)elementsfloat,themain_containerwon’trecognizethem,andwilllooktooshort.ColumnsEqualHeightAddalargeamountofpadding-bottom(e.g.,999px),thenanegativeamountofmargin-bottom(-999px).Note:Thisonlyworksifthemain_containercontainingthecolumnsissettooverflow:hidden;vwUnitsIfyouneedaverticalspace(height)toberesponsiveandsimilartoahorizontalspace(width),tryusingvwunitsfortheheight.1vwisequalto1/100oftheviewportwidth.Thusitisequalto1%ofthewidthoftheviewport.Note:oncetheviewportisbiggerthanthemain_container,1vw(1/100oftheviewport)isnolongerequalto1%(1/100ofthemain_container).MakeMobile=ResponsiveTellmobiledevicetouseaviewportequaltotheirdevicewidthbyincludingthislineofsyntaxinthe<head></head>
<meta name="viewport" content="width=device-width">
Userespond-min.jsforEI6–8HelpearlyInternetExplorerbrowsersreadthemax-widthormin-widthmediaqueriesbyputtingacopyofrespond-min.jsinascriptsfileandputtingthissyntaximmediatelyfollowingthecsslineofsyntax:
<!--[if lt IE 9]> <script type="text/javascript" src="scripts/respond-min.js"> </script> <![endif]-->
ADDINGIMAGESContentImagesPutanimageinyour“images”folderandusethefollowingsyntaxinyourHTML:
<img src="images/filename.jpg">
MakeContentImagesPseudoResponsiveUsethefollowingsyntaxinyourCSS:
img{ width:100%; }
BackgroundImagesCanbeusedinthebackgroundofanyelement.Putanimageinyour“images”folderandusethefollowingsyntaxinyourCSS(thisexampleputsthebackgroundimageinthebody):
body{ background-image:url(images/filename.png) }
GENERALTYPOGRAPHYBreaktagSometimes,youneedlinesoftexttobreakinaspecificway,butstayinthesameparagraph.(Example,linesofpoetry).Usethebreaktag.Butuseitsparingly!Neveruseittofixraggededges.
<br>