table of contents · table of contents preface introduction to css a brief history of css adding...

TableofContentsPreface

IntroductiontoCSS

AbriefhistoryofCSS

AddingCSStoanHTMLpage

Selectors

Cascade

Specificity

Inheritance

Import

Attributeselectors

Pseudo-classes

Pseudo-elements

Colors

Backgrounds

Comments

CustomProperties

Typography

BoxModel

Border

Padding

Margin

BoxSizing

Display

Positioning

Floatingandclearing

z-index

CSSGrid

Flexbox

Tables

Centering

Mediaqueriesandresponsivedesign

FeatureQueries

Filters

Transforms

Transitions

Animations

NormalizingCSS

Errorhandling

Vendorprefixes

CSSforprint

Preface

Welcome!IwrotethisbooktohelpyouquicklylearnCSSandgetfamiliarwiththeadvancedCSStopics.

CSS,ashorthandforCascadingStyleSheets,isoneofthemainbuildingblocksoftheWeb.Itshistorygoesbacktothe90'sandalongwithHTMLithaschangedalotsinceitshumblebeginnings.

HavingcreatedwebsitessincebeforeCSSexisted,Ihaveseenitsevolution.

CSSisanamazingtool,andinthelastfewyearsithasgrownalot,introducingmanyfantasticfeatureslikeCSSGrid,FlexboxandCSSCustomProperties.

Thishandbookisaimedatavastaudience.

First,thebeginner.IexplainCSSfromzeroinasuccinctbutcomprehensiveway,soyoucanusethisbooktolearnCSSfromthebasics.

Then,theprofessional.CSSisoftenconsideredlikeasecondarythingtolearn,especiallybyJavaScriptdevelopers.TheyknowCSSisnotarealprogramminglanguage,theyareprogrammersandthereforetheyshouldnotbotherlearningCSStherightway.Iwrotethisbookforyou,too.

Next,thepersonthatknowsCSSfromafewyearsbuthasn'thadtheopportunitytolearnthenewthingsinit.We'lltalkextensivelyaboutthenewfeaturesofCSS,theonesthataregoingtobuildthewebofthenextdecade.

CSShasimprovedalotinthepastfewyearsandit'sevolvingfast.

Evenifyoudon'twriteCSSforaliving,knowinghowCSSworkscanhelpsaveyousomeheadacheswhenyouneedtounderstanditfromtimetotime,forexamplewhiletweakingawebpage.

Thankyouforgettingthisebook.MygoalwithitistogiveyouaquickyetcomprehensiveoverviewofCSS.

Flavio

Youcanreachmeviaemailatflavio@flaviocopes.com,onTwitter@flaviocopes.

Mywebsiteisflaviocopes.com.

Preface

IntroductiontoCSSCSS(anabbreviationofCascadingStyleSheets)isthelanguagethatweusetostyleanHTMLfile,andtellthebrowserhowshoulditrendertheelementsonthepage.

InthisbookItalkexclusivelyaboutstylingHTMLdocuments,althoughCSScanbeusedtostyleotherthingstoo.

ACSSfilecontainsseveralCSSrules.

Eachruleiscomposedby2parts:

theselectorthedeclarationblock

Theselectorisastringthatidentifiesoneormoreelementsonthepage,followingaspecialsyntaxthatwe'llsoontalkaboutextensively.

Thedeclarationblockcontainsoneormoredeclarations,inturncomposedbyapropertyandvaluepair.

ThoseareallthethingswehaveinCSS.

Carefullyorganisingproperties,associatingthemvalues,andattachingthosetospecificelementsofthepageusingaselectoristhewholeargumentofthisebook.

HowdoesCSSlooklikeACSSrulesethasonepartcalledselector,andtheotherpartcalleddeclaration.Thedeclarationcontainsvariousrules,eachcomposedbyaproperty,andavalue.

Inthisexample, pistheselector,andappliesonerulewhichsetsthevalue 20pxtothefont-sizeproperty:

font-size:20px;

Multiplerulesarestackedoneaftertheother:

font-size:20px;

IntroductiontoCSS

color:blue;

Aselectorcantargetoneormoreitems:

font-size:20px;

anditcantargetHTMLtags,likeabove,orHTMLelementsthatcontainacertainclassattributewith .my-class,orHTMLelementsthathaveaspecific idattributewith #my-id.

Moreadvancedselectorsallowyoutochooseitemswhoseattributematchesaspecificvalue,oralsoitemswhichrespondtopseudo-classes(moreonthatlater)

SemicolonsEveryCSSruleterminateswithasemicolon.Semicolonsarenotoptional,exceptafterthelastrule,butIsuggesttoalwaysusethemforconsistencyandtoavoiderrorsifyouaddanotherpropertyandforgettoaddthesemicolononthepreviousline.

FormattingandindentationThereisnofixedruleforformatting.ThisCSSisvalid:

font-size:20px;

a{color:blue;}

butapaintosee.Sticktosomeconventions,liketheonesyouseeintheexamplesabove:stickselectorsandtheclosingbracketstotheleft,indent2spacesforeachrule,havetheopeningbracketonthesamelineoftheselector,separatedbyonespace.

Correctandconsistentuseofspacingandindentationisavisualaidinunderstandingyourcode.

IntroductiontoCSS

AbriefhistoryofCSSBeforemovingon,IwanttogiveyouabriefrecapofthehistoryofCSS.

CSSwasgrownoutofthenecessityofstylingwebpages.BeforeCSSwasintroduced,peoplewantedawaytostyletheirwebpages,whichlookedallverysimilarand"academic"backintheday.Youcouldn'tdomuchintermsofpersonalisation.

HTML3.2introducedtheoptionofdefiningcolorsinlineasHTMLelementattributes,andpresentationaltagslike centerand font,butthatescalatedquicklyintoafarfromidealsituation.

CSSletusmoveeverythingpresentation-relatedfromtheHTMLtotheCSS,sothatHTMLcouldgetbackbeingtheformatthatdefinesthestructureofthedocument,ratherthanhowthingsshouldlookinthebrowser.

CSSiscontinuouslyevolving,andCSSyouused5yearsagomightjustbeoutdated,asnewidiomaticCSStechniquesemergedandbrowserschanged.

It'shardtoimaginethetimeswhenCSSwasbornandhowdifferentthewebwas.

Atthetime,wehadseveralcompetingbrowsers,themainonesbeingInternetExplorerorNetscapeNavigator.

PageswerestyledbyusingHTML,withspecialpresentationaltagslike boldandspecialattributes,mostofwhicharenowdeprecated.

Thismeantyouhadalimitedamountofcustomisationopportunities.

Thebulkofthestylingdecisionswerelefttothebrowser.

Also,youbuiltasitespecificallyforoneofthem,becauseeachoneintroduceddifferentnon-standardtagstogivemorepowerandopportunities.

Soonpeoplerealisedtheneedforawaytostylepages,inawaythatwouldworkacrossallbrowsers.

Aftertheinitialideaproposedin1994,CSSgotitsfirstreleasein1996,whentheCSSLevel1("CSS1")recommendationwaspublished.

CSSLevel2("CSS2")gotpublishedin1998.

Sincethen,workbeganonCSSLevel3.TheCSSWorkingGroupdecidedtospliteveryfeatureandworkonitseparately,inmodules.

AbriefhistoryofCSS

Browsersweren'tespeciallyfastatimplementingCSS.Wehadtowaituntil2002tohavethefirstbrowserimplementthefullCSSspecification:IEforMac,asnicelydescribedinthisCSSTrickspost:https://css-tricks.com/look-back-history-css/

InternetExplorerimplementedtheboxmodelincorrectlyrightfromthestart,whichledtoyearsofpaintryingtohavethesamestyleappliedconsistentlyacrossbrowsers.Wehadtousevarioustricksandhackstomakebrowsersrenderthingsaswewanted.

Todaythingsaremuch,muchbetter.WecanjustusetheCSSstandardswithoutthinkingaboutquirks,mostofthetime,andCSShasneverbeenmorepowerful.

Wedon'thaveofficialreleasenumbersforCSSanymorenow,buttheCSSWorkingGroupreleasesa"snapshot"ofthemodulesthatarecurrentlyconsideredstableandreadytobeincludedinbrowsers.Thisisthelatestsnapshot,from2018:https://www.w3.org/TR/css-2018/

CSSLevel2isstillthebasefortheCSSwewritetoday,andwehavemanymorefeaturesbuiltontopofit.

AbriefhistoryofCSS

AddingCSStoanHTMLpageCSSisattachedtoanHTMLpageindifferentways.

1:Usingthe linktagThe linktagisthewaytoincludeaCSSfile.ThisisthepreferredwaytouseCSSasit'sintendedtobeused:oneCSSfileisincludedbyallthepagesofyoursite,andchangingonelineonthatfileaffectsthepresentationofallthepagesinthesite.

Tousethismethod,youadda linktagwiththe hrefattributepointingtotheCSSfileyouwanttoinclude.Youadditinsidethe headtagofthesite(notinsidethe bodytag):

<linkrel="stylesheet"type="text/css"href="myfile.css">

The reland typeattributesarerequiredtoo,astheytellthebrowserwhichkindoffilewearelinkingto.

2:usingthe styletagInsteadofusingthe linktagtopointtoseparatestylesheetcontainingourCSS,wecanaddtheCSSdirectlyinsidea styletag.Thisisthesyntax:

<style>

...ourCSS...

</style>

UsingthismethodwecanavoidcreatingaseparateCSSfile.Ifindthisisagoodwaytoexperimentbefore"formalising"CSStoaseparatefile,ortoaddaspeciallineofCSSjusttoafile.

3:inlinestylesInlinestylesarethethirdwaytoaddCSStoapage.Wecanadda styleattributetoanyHTMLtag,andaddCSSintoit.

<divstyle="">...</div>

Example:

<divstyle="background-color:yellow">...</div>

SelectorsAselectorallowsustoassociateoneormoredeclarationstooneormoreelementsonthepage.

BasicselectorsSupposewehavea pelementonthepage,andwewanttodisplaythewordsintoitusingtheyellowcolor.

Wecantargetthatelementusingthisselector p,whichtargetsalltheelementusingthe ptaginthepage.AsimpleCSSruletoachievewhatwewantis:

color:yellow;

EveryHTMLtaghasacorrespondingselector,forexample: div, span, img.

Ifaselectormatchesmultipleelements,alltheelementsinthepagewillbeaffectedbythechange.

HTMLelementshave2attributeswhichareverycommonlyusedwithinCSStoassociatestylingtoaspecificelementonthepage: classand id.

Thereisonebigdifferencebetweenthosetwo:insideanHTMLdocumentyoucanrepeatthesame classvalueacrossmultipleelements,butyoucanonlyusean idonce.Asacorollary,usingclassesyoucanselectanelementwith2ormorespecificclassnames,somethingnotpossibleusingids.

Classesareidentifiedusingthe .symbol,whileidsusingthe #symbol.

Exampleusingaclass:

<pclass="dog-name">

.dog-name{

color:yellow;

Selectors

Exampleusinganid:

<pid="dog-name">

#dog-name{

color:yellow;

CombiningselectorsSofarwe'veseenhowtotargetanelement,aclassoranid.Let'sintroducemorepowerfulselectors.

Targetinganelementwithaclassorid

Youcantargetaspecificelementthathasaclass,orid,attached.

Exampleusingaclass:

<pclass="dog-name">

p.dog-name{

color:yellow;

Exampleusinganid:

<pid="dog-name">

p#dog-name{

color:yellow;

Whywouldyouwanttodothat,iftheclassoridalreadyprovidesawaytotargetthatelement?Youmighthavetodothattohavemorespecificity.We'llseewhatthatmeanslater.

Selectors

Targetingmultipleclasses

Youcantargetanelementwithaspecificclassusing .class-name,asyousawpreviously.Youcantargetanelementwith2(ormore)classesbycombiningtheclassnamesseparatedwithadot,withoutspaces.

Example:

<pclass="dog-nameroger">

.dog-name.roger{

color:yellow;

Combiningclassesandids

Inthesameway,youcancombineaclassandanid.

Example:

<pclass="dog-name"id="roger">

.dog-name#roger{

color:yellow;

GroupingselectorsYoucancombineselectorstoapplythesamedeclarationstomultipleselectors.Todoso,youseparatethemwithacomma.

Example:

Mydognameis:

<spanclass="dog-name">

</span>

Selectors

p,.dog-name{

color:yellow;

Youcanaddspacesinthosedeclarationstomakethemmoreclear:

.dog-name{

color:yellow;

FollowthedocumenttreewithselectorsWe'veseenhowtotargetanelementinthepagebyusingatagname,aclassoranid.

Youcancreateamorespecificselectorbycombiningmultipleitemstofollowthedocumenttreestructure.Forexample,ifyouhavea spantagnestedinsidea ptag,youcantargetthatonewithoutapplyingthestyletoa spantagnotincludedina ptag:

<span>

Hello!

</span>

Mydognameis:

<spanclass="dog-name">

</span>

pspan{

color:yellow;

Seehowweusedaspacebetweenthetwotokens pand span.

Thisworkseveniftheelementontherightismultiplelevelsdeep.

Tomakethedependencystrictonthefirstlevel,youcanusethe >symbolbetweenthetwotokens:

p>span{

color:yellow;

Selectors

Inthiscase,ifa spanisnotafirstchildrenofthe pelement,it'snotgoingtohavethenewcolorapplied.

Directchildrenwillhavethestyleapplied:

<span>

Thisisyellow

</span>

<span>

Thisisnotyellow

</span>

</strong>

Adjacentsiblingselectorsletusstyleanelementonlyifprecededbyaspecificelement.Wedosousingthe +operator:

Example:

p+span{

color:yellow;

Thiswillassignthecoloryellowtoallspanelementsprecededbya pelement:

<p>Thisisaparagraph</p>

<span>Thisisayellowspan</span>

Wehavealotmoreselectorswecanuse:

attributeselectorspseudoclassselectorspseudoelementselectors

We'llfindallabouttheminthenextsections.

Selectors

CascadeCascadeisafundamentalconceptofCSS.Afterall,it'sinthenameitself,thefirstCofCSS-CascadingStyleSheets-itmustbeanimportantthing.

Whatdoesitmean?

Cascadeistheprocess,oralgorithm,thatdeterminesthepropertiesappliedtoeachelementonthepage.TryingtoconvergefromalistofCSSrulesthataredefinedinvariousplaces.

Itdoessotakinginconsideration:

specificityimportanceinheritanceorderinthefile

Italsotakescareofresolvingconflicts.

TwoormorecompetingCSSrulesforthesamepropertyappliedtothesameelementneedtobeelaboratedaccordingtotheCSSspec,todeterminewhichoneneedstobeapplied.

EvenifyoujusthaveoneCSSfileloadedbyyourpage,thereisotherCSSthatisgoingtobepartoftheprocess.Wehavethebrowser(useragent)CSS.Browserscomewithadefaultsetofrules,alldifferentbetweenbrowsers.

ThenyourCSScomeintoplay.

Thenthebrowserappliesanyuserstylesheet,whichmightalsobeappliedbybrowserextensions.

Allthoserulescomeintoplaywhilerenderingthepage.

We'llnowseetheconceptsofspecificityandinheritance.

Cascade

SpecificityWhathappenswhenanelementistargetedbymultiplerules,withdifferentselectors,thataffectthesameproperty?

Forexample,let'stalkaboutthiselement:

<pclass="dog-name">

Wecanhave

.dog-name{

color:yellow;

andanotherrulethattargets p,whichsetsthecolortoanothervalue:

color:red;

Andanotherrulethattargets p.dog-name.Whichruleisgoingtotakeprecedenceovertheothers,andwhy?

Enterspecificity.Themorespecificrulewillwin.Iftwoormoreruleshavethesamespecificity,theonethatappearslastwins.

Sometimeswhatismorespecificinpracticeisabitconfusingtobeginners.Iwouldsayit'salsoconfusingtoexpertsthatdonotlookatthoserulesthatfrequently,orsimplyoverlookthem.

HowtocalculatespecificitySpecificityiscalculatedusingaconvention.

Wehave4slots,andeachoneofthemstartsat0: 00000.Theslotattheleftisthemostimportant,andtherightmostoneistheleastimportant.

Likeitworksfornumbersinthedecimalsystem: 1000ishigherthan 0100.

Specificity

Thefirstslot,therightmostone,istheleastimportant.

Weincreasethisvaluewhenwehaveanelementselector.Anelementisatagname.Ifyouhavemorethanoneelementselectorintherule,youincrementaccordinglythevaluestoredinthisslot.

Examples:

p{}/*0001*/

span{}/*0001*/

pspan{}/*0002*/

p>span{}/*0002*/

divp>span{}/*0003*/

Thesecondslotisincrementedby3things:

classselectorspseudo-classselectorsattributeselectors

Everytimearulemeetsoneofthose,weincrementthevalueofthesecondcolumnfromtheright.

Examples:

.name{}/*0010*/

.users.name{}/*0020*/

[href$='.pdf']{}/*0010*/

:hover{}/*0010*/

Ofcourseslot2selectorscanbecombinedwithslot1selectors:

div.name{}/*0011*/

a[href$='.pdf']{}/*0011*/

.picturesimg:hover{}/*0021*/

Onenicetrickwithclassesisthatyoucanrepeatthesameclassandincreasethespecificity.Forexample:

.name{}/*0010*/

.name.name{}/*0020*/

.name.name.name{}/*0030*/

Specificity

Slot3holdsthemostimportantthingthatcanaffectyourCSSspecificityinaCSSfile:theid.

Everyelementcanhavean idattributeassigned,andwecanusethatinourstylesheettotargettheelement.

Examples:

#name{}/*0100*/

.user#name{}/*0110*/

#namespan{}/*0101*/

Slot4isaffectedbyinlinestyles.AnyinlinestylewillhaveprecedenceoveranyruledefinedinanexternalCSSfile,orinsidethe styletaginthepageheader.

Example:

<pstyle="color:red">Test</p>/*1000*/

EvenifanyotherruleintheCSSdefinesthecolor,thisinlinestyleruleisgoingtobeapplied.Exceptforonecase-if !importantisused,whichfillstheslot5.

ImportanceSpecificitydoesnotmatterifaruleendswith !important:

font-size:20px!important;

Thatrulewilltakeprecedenceoveranyrulewithmorespecificity

Adding !importantinaCSSruleisgoingtomakethatrulebemoreimportantthananyotherrule,accordingtothespecificityrules.Theonlywayanotherrulecantakeprecedenceistohave !importantaswell,andhavehigherspecificityintheotherlessimportantslots.

Specificity

Ingeneralyoushouldusetheamountofspecificityyouneed,butnotmore.Inthisway,youcancraftotherselectorstooverwritetherulessetbyprecedingruleswithoutgoingmad.

!importantisahighlydebatedtoolthatCSSoffersus.ManyCSSexpertsadvocateagainstusingit.IfindmyselfusingitespeciallywhentryingoutsomestyleandaCSSrulehassomuchspecificitythatIneedtouse !importanttomakethebrowserapplymynewCSS.

Butgenerally, !importantshouldhavenoplaceinyourCSSfiles.

Usingthe idattributetostyleCSSisalsodebatedalot,sinceithasaveryhighspecificity.Agoodalternativeistouseclassesinstead,whichhavelessspecificity,andsotheyareeasiertoworkwith,andtheyaremorepowerful(youcanhavemultipleclassesforanelement,andaclasscanbereusedmultipletimes).

ToolstocalculatethespecificityYoucanusethesitehttps://specificity.keegan.st/toperformthespecificitycalculationforyouautomatically.

It'susefulespeciallyifyouaretryingtofigurethingsout,asitcanbeanicefeedbacktool.

Specificity

InheritanceWhenyousetsomepropertiesonaselectorinCSS,theyareinheritedbyallthechildrenofthatselector.

Isaidsome,becausenotallpropertiesshowthisbehaviour.

Thishappensbecausesomepropertiesmakesensetobeinherited.ThishelpsuswriteCSSmuchmoreconcisely,sincewedon'thavetoexplicitlysetthatpropertyagainoneverysinglechildren.

Someotherpropertiesmakemoresensetonotbeinherited.

Thinkaboutfonts:youdon'tneedtoapplythe font-familytoeverysingletagofyourpage.Yousetthe bodytagfont,andeverychildreninheritsit,alongwithotherproperties.

The background-colorproperty,ontheotherhand,makeslittlesensetobeinherited.

PropertiesthatinheritHereisalistofthepropertiesthatdoinherit.Thelistisnon-comprehensive,butthoserulesarejustthemostpopularonesyou'lllikelyuse:

border-collapseborder-spacingcaption-sidecolorcursordirectionempty-cellsfont-familyfont-sizefont-stylefont-variantfont-weightfont-size-adjustfont-stretchfontletter-spacingline-heightlist-style-image

Inheritance

list-style-positionlist-style-typelist-styleorphansquotestab-sizetext-aligntext-align-lasttext-decoration-colortext-indenttext-justifytext-shadowtext-transformvisibilitywhite-spacewidowsword-breakword-spacing

IgotitfromthisniceSitepointarticleonCSSinheritance.

ForcingpropertiestoinheritWhatifyouhaveapropertythat'snotinheritedbydefault,andyouwantitto,inachildren?

Inthechildren,yousetthepropertyvaluetothespecialkeyword inherit.

Example:

background-color:yellow;

background-color:inherit;

ForcingpropertiestoNOTinheritOnthecontrary,youmighthaveapropertyinheritedandyouwanttoavoidso.

Inheritance

Youcanusethe revertkeywordtorevertit.Inthiscase,thevalueisrevertedtotheoriginalvaluethebrowsergaveitinitsdefaultstylesheet.

Inpracticethisisrarelyused,andmostofthetimesyou'lljustsetanothervalueforthepropertytooverwritethatinheritedvalue.

OtherspecialvaluesInadditiontothe inheritand revertspecialkeywordswejustsaw,youcanalsosetanypropertyto:

initial:usethedefaultbrowserstylesheetifavailable.Ifnot,andifthepropertyinheritsbydefault,inheritthevalue.Otherwisedonothing.unset:ifthepropertyinheritsbydefault,inherit.Otherwisedonothing.

Inheritance

ImportFromanyCSSfileyoucanimportanotherCSSfileusingthe @importdirective.

Hereishowyouuseit:

@importurl(myfile.css)

url()canmanageabsoluteorrelativeURLs.

Oneimportantthingyouneedtoknowisthat @importdirectivesmustbeputbeforeanyotherCSSinthefile,ortheywillbeignored.

YoucanusemediadescriptorstoonlyloadaCSSfileonthespecificmedia:

@importurl(myfile.css)all;

@importurl(myfile-screen.css)screen;

@importurl(myfile-print.css)print;

Import

AttributeselectorsWealreadyintroducedseveralofthebasicCSSselectors:usingelementselectors,class,id,howtocombinethem,howtotargetmultipleclasses,howtostyleseveralselectorsinthesamerule,howtofollowthepagehierarchywithchildanddirectchildselectors,andadjacentsiblings.

Inthissectionwe'llanalyzeattributeselectors,andwe'lltalkaboutpseudoclassandpseudoelementselectorsinthenext2sections.

AttributepresenceselectorsThefirstselectortypeistheattributepresenceselector.

Wecancheckifanelementhasanattributeusingthe []syntax. p[id]willselectall ptagsinthepagethathavean idattribute,regardlessofitsvalue:

p[id]{

/*...*/

ExactattributevalueselectorsInsidethebracketsyoucanchecktheattributevalueusing =,andtheCSSwillbeappliedonlyiftheattributematchestheexactvaluespecified:

p[id="my-id"]{

/*...*/

MatchanattributevalueportionWhile =letuscheckforexactvalue,wehaveotheroperators:

*=checksiftheattributecontainsthepartial̂ =checksiftheattributestartswiththepartial$=checksiftheattributeendswiththepartial|=checksiftheattributestartswiththepartialandit'sfollowedbyadash(commoninclasses,forexample),orjustcontainsthepartial

Attributeselectors

~=checksifthepartialiscontainedintheattribute,butseparatedbyspacesfromtherest

Allthecheckswementionedarecasesensitive.

Ifyouaddan ijustbeforetheclosingbracket,thecheckwillbecaseinsensitive.It'ssupportedinmanybrowsersbutnotinall,checkhttps://caniuse.com/#feat=css-case-insensitive.

Attributeselectors

Pseudo-classesPseudoclassesarepredefinedkeywordsthatareusedtoselectanelementbasedonitsstate,ortotargetaspecificchild.

Theystartwithasinglecolon :.

Theycanbeusedaspartofaselector,andtheyareveryusefultostyleactiveorvisitedlinksforexample,changethestyleonhover,focus,ortargetthefirstchild,oroddrows.Veryhandyinmanycases.

Thesearethemostpopularpseudoclassesyouwilllikelyuse:

Pseudoclass Targets

:activeanelementbeingactivatedbytheuser(e.g.clicked).Mostlyusedonlinksorbuttons

:checked acheckbox,optionorradioinputtypesthatareenabled

:default thedefaultinasetofchoices(like,optioninaselectorradiobuttons)

:disabled anelementdisabled

:empty anelementwithnochildren

:enabled anelementthat'senabled(oppositeto :disabled)

:first-

child thefirstchildofagroupofsiblings

:focus theelementwithfocus

:hover anelementhoveredwiththemouse

:last-child thelastchildofagroupofsiblings

:link alinkthat'snotbeenvisited

:not() anyelementnotmatchingtheselectorpassed.E.g. :not(span)

child() anelementmatchingthespecifiedposition

:nth-last-

child() anelementmatchingthespecificposition,startingfromtheend

:only-child anelementwithoutanysiblings

:required aformelementwiththe requiredattributeset

representsthe htmlelement.It'sliketargeting html,butit'smorespecific.UsefulinCSSVariables.

:targettheelementmatchingthecurrentURLfragment(forinnernavigationinthepage)

Pseudo-classes

:valid formelementsthatvalidatedclient-sidesuccessfully

:visited alinkthat'sbeenvisited

Let'sdoanexample.Acommonone,actually.Youwanttostylealink,soyoucreateaCSSruletotargetthe aelement:

color:yellow;

Thingsseemtoworkfine,untilyouclickonelink.Thelinkgoesbacktothepredefinedcolor(blue)whenyouclickit.Thenwhenyouopenthelinkandgobacktothepage,nowthelinkisblue.

Whydoesthathappen?

Becausethelinkwhenclickedchangesstate,andgoesinthe :activestate.Andwhenit'sbeenvisited,itisinthe :visitedstate.Forever,untiltheuserclearsthebrowsinghistory.

So,tocorrectlymakethelinkyellowacrossallstates,youneedtowrite

a:visited,

a:active{

color:yellow;

:nth-child()deservesaspecialmention.Itcanbeusedtotargetoddorevenchildrenwith:nth-child(odd)and :nth-child(even).

Itiscommonlyusedinliststocoloroddlinesdifferentlyfromevenlines:

ul:nth-child(odd){

color:white;

background-color:black;

Youcanalsouseittotargetthefirst3childrenofanelementwith :nth-child(-n+3).Oryoucanstyle1inevery5elementswith :nth-child(5n).

Somepseudoclassesarejustusedforprinting,like :first, :left, :right,soyoucantargetthefirstpage,alltheleftpages,andalltherightpages,whichareusuallystyledslightlydifferently.

Pseudo-classes

Pseudo-elementsPseudo-elementsareusedtostyleaspecificpartofanelement.

Theystartwithadoublecolon ::.

Sometimesyouwillspottheminthewildwithasinglecolon,butthisisonlyasyntaxsupportedforbackwardscompatibilityreasons.Youshoulduse2colonstodistinguishthemfrompseudo-classes.

::beforeand ::afterareprobablythemostusedpseudo-elements.Theyareusedtoaddcontentbeforeorafteranelement,likeiconsforexample.

Here'sthelistofthepseudo-elements:

Pseudo-element Targets

::after createsapseudo-elementaftertheelement

::before createsapseudo-elementbeforetheelement

::first-letter canbeusedtostylethefirstletterofablockoftext

::first-line canbeusedtostylethefirstlineofablockoftext

::selection targetsthetextselectedbytheuser

Let'sdoanexample.Sayyouwanttomakethefirstlineofaparagraphslightlybiggerinfontsize,acommonthingintypography:

p::first-line{

font-size:2rem;

Ormaybeyouwantthefirstlettertobebolder:

p::first-letter{

font-weight:bolder;

::afterand ::beforeareabitlessintuitive.IrememberusingthemwhenIhadtoaddiconsusingCSS.

Youspecifythe contentpropertytoinsertanykindofcontentafterorbeforeanelement:

p::before{

content:url(/myimage.png);

Pseudo-elements

.myElement::before{

content:"HeyHey!";

Pseudo-elements

ColorsBydefaultanHTMLpageisrenderedbywebbrowsersquitesadlyintermsofthecolorsused.

Wehaveawhitebackground,blackcolor,andbluelinks.That'sit.

LuckilyCSSgivesustheabilitytoaddcolorstoourdesigns.

Wehavetheseproperties:

background-color

border-color

Allofthemacceptacolorvalue,whichcanbeindifferentforms.

NamedcolorsFirst,wehaveCSSkeywordsthatdefinecolors.CSSstartedwith16,buttodaythereisahugenumberofcolorsnames:

aliceblue

antiquewhite

aquamarine

bisque

blanchedalmond

blueviolet

burlywood

cadetblue

chartreuse

chocolate

cornflowerblue

cornsilk

crimson

Colors

darkblue

darkcyan

darkgoldenrod

darkgray

darkgreen

darkgrey

darkkhaki

darkmagenta

darkolivegreen

darkorange

darkorchid

darkred

darksalmon

darkseagreen

darkslateblue

darkslategray

darkslategrey

darkturquoise

darkviolet

deeppink

deepskyblue

dimgray

dimgrey

dodgerblue

firebrick

floralwhite

forestgreen

fuchsia

gainsboro

ghostwhite

goldenrod

greenyellow

honeydew

hotpink

indianred

Colors

indigo

lavender

lavenderblush

lawngreen

lemonchiffon

lightblue

lightcoral

lightcyan

lightgoldenrodyellow

lightgray

lightgreen

lightgrey

lightpink

lightsalmon

lightseagreen

lightskyblue

lightslategray

lightslategrey

lightsteelblue

lightyellow

limegreen

magenta

maroon

mediumaquamarine

mediumblue

mediumorchid

mediumpurple

mediumseagreen

mediumslateblue

mediumspringgreen

mediumturquoise

mediumvioletred

midnightblue

mintcream

mistyrose

moccasin

Colors

navajowhite

oldlace

olivedrab

orange

orangered

orchid

palegoldenrod

palegreen

paleturquoise

palevioletred

papayawhip

peachpuff

powderblue

purple

rebeccapurple

rosybrown

royalblue

saddlebrown

salmon

sandybrown

seagreen

seashell

sienna

silver

skyblue

slateblue

slategray

slategrey

springgreen

steelblue

thistle

Colors

tomato

turquoise

violet

whitesmoke

yellow

yellowgreen

plus tranparent,and currentColorwhichpointstothe colorproperty,forexampleusefultomakethe border-colorinheritit.

TheyaredefinedintheCSSColorModule,Level4.Theyarecaseinsensitive.

Wikipediahasanicetablewhichletsyoupicktheperfectcolorbyitsname.

Namedcolorsarenottheonlyoption.

RGBandRGBaYoucanusethe rgb()functiontocalculateacolorfromitsRGBnotation,whichsetsthecolorbasedonitsred-green-blueparts.From0to255:

color:rgb(255,255,255);/*white*/

background-color:rgb(0,0,0);/*black*/

rgba()letsyouaddthealphachanneltoenteratransparentpart.Thatcanbeanumberfrom0to1:

background-color:rgb(0,0,0,0.5);

HexadecimalnotationAnotheroptionistoexpresstheRGBpartsofthecolorsinthehexadecimalnotation,whichiscomposedby3blocks.

Black,whichis rgb(0,0,0)isexpressedas #000000or #000(wecanshortcutthe2numbersto1iftheyareequal).

Colors

White, rgb(255,255,255)canbeexpressedas #ffffffor #fff.

Thehexadecimalnotationletsexpressanumberfrom0to255injust2digits,sincetheycangofrom0to"15"(f).

Wecanaddthealphachannelbyadding1or2moredigitsattheend,forexample#00000033.Notallbrowserssupporttheshortenednotation,souseall6digitstoexpresstheRGBpart.

HSLandHSLaThisisamorerecentadditiontoCSS.

HSL=HueSaturationLightness.

Inthisnotation,blackis hsl(0,0%,0%)andwhiteis hsl(0,0%,100%).

IfyouaremorefamiliarwithHSLthanRGBbecauseofyourpastknowledge,youcandefinitelyusethat.

Youalsohave hsla()whichaddsthealphachanneltothemix,againanumberfrom0to1:hsl(0,0%,0%,0.5)

Colors

UnitsOneofthethingsyou'lluseeverydayinCSSareunits.Theyareusedtosetlengths,paddings,margins,alignelementsandsoon.

Thingslike px, em, rem,orpercentages.

Theyareeverywhere.Therearesomeobscureones,too.We'llgothrougheachoftheminthissection.

PixelsThemostwidelyusedmeasurementunit.Apixeldoesnotactuallycorrelatetoaphysicalpixelonyourscreen,asthatvaries,alot,bydevice(thinkhigh-DPIdevicesvsnon-retinadevices).

Thereisaconventionthatmakethisunitworkconsistentlyacrossdevices.

PercentagesAnotherveryusefulmeasure,percentagesletyouspecifyvaluesinpercentagesofthatparentelement'scorrespondingproperty.

Example:

.parent{

width:400px;

.child{

width:50%;/*=200px*/

Real-worldmeasurementunitsWehavethosemeasurementunitswhicharetranslatedfromtheoutsideworld.Mostlyuselessonscreen,theycanbeusefulforprintstylesheets.Theyare:

cmacentimeter(mapsto37.8pixels)mmamillimeter(0.1cm)qaquarterofamillimeterinaninch(mapsto96pixels)

ptapoint(1inch=72points)pcapica(1pica=12points)

Relativeunitsemisthevalueassignedtothatelement's font-size,thereforeitsexactvaluechangesbetweenelements.Itdoesnotchangedependingonthefontused,justonthefontsize.Intypographythismeasuresthewidthofthe mletter.remissimilarto em,butinsteadofvaryingonthecurrentelementfontsize,itusestherootelement( html)fontsize.Yousetthatfontsizeonce,and remwillbeaconsistentmeasureacrossallthepage.exislike em,butinsertedofmeasuringthewidthof m,itmeasurestheheightofthexletter.Itcanchangedependingonthefontused,andonthefontsize.chislike exbutinsteadofmeasuringtheheightof xitmeasuresthewidthof 0(zero).

Viewportunitsvwtheviewportwidthunitrepresentsapercentageoftheviewportwidth. 50vwmeans50%oftheviewportwidth.vhtheviewportheightunitrepresentsapercentageoftheviewportheight. 50vhmeans50%oftheviewportheight.vmintheviewportminimumunitrepresentstheminimumbetweentheheightorwidthintermsofpercentage. 30vministhe30%ofthecurrentwidthorheight,dependingwhichoneissmallervmaxtheviewportmaximumunitrepresentsthemaximumbetweentheheightorwidthintermsofpercentage. 30vmaxisthe30%ofthecurrentwidthorheight,dependingwhichoneisbigger

Fractionunitsfrarefractionunits,andtheyareusedinCSSGridtodividespaceintofractions.

We'lltalkabouttheminthecontextofCSSGridlateron.

urlWhenwetalkaboutbackgroundimages, @import,andmore,weusethe url()functiontoloadaresource:

background-image:url(test.png);

InthiscaseIusedarelativeURL,whichsearchesthefileinthefolderwheretheCSSfileisdefined.

Icouldgoonelevelback

background-image:url(../test.png);

orgointoafolder

background-image:url(subfolder/test.png);

OrIcouldloadafilestartingfromtherootofthedomainwheretheCSSishosted:

background-image:url(/test.png);

OrIcoulduseanabsoluteURLtoloadanexternalresource:

background-image:url(https://mysite.com/test.png);

calcThe calc()functionletsyouperformbasicmathoperationsonvalues,andit'sespeciallyusefulwhenyouneedtoaddorsubtractalengthvaluefromapercentage.

Thisishowitworks:

max-width:calc(80%-100px)

Itreturnsalengthvalue,soitcanbeusedanywhereyouexpectapixelvalue.

Youcanperform

additionsusing +subtractionsusing -multiplicationusing *divisionusing /

Onecaveat:withadditionandsubtraction,thespacearoundtheoperatorismandatory,otherwiseitdoesnotworkasexpected.

Examples:

max-width:calc(50%/3)

max-width:calc(50%+3px)

BackgroundsThebackgroundofanelementcanbechangedusingseveralCSSproperties:

background-color

background-image

background-clip

background-position

background-origin

background-repeat

background-attachment

background-size

andtheshorthandproperty background,whichallowstoshortendefinitionsandgroupthemonasingleline.

background-coloracceptsacolorvalue,whichcanbeoneofthecolorkeywords,oran rgbor hslvalue:

background-color:yellow;

background-color:#333;

Insteadofusingacolor,youcanuseanimageasbackgroundtoanelement,byspecifyingtheimagelocationURL:

background-image:url(image.png);

background-clipletsyoudeterminetheareausedbythebackgroundimage,orcolor.Thedefaultvalueis border-box,whichextendsuptotheborderouteredge.

Othervaluesare

padding-boxtoextendthebackgrounduptothepaddingedge,withoutthebordercontent-boxtoextendthebackgrounduptothecontentedge,withoutthepaddinginherittoapplythevalueoftheparent

Backgrounds

Whenusinganimageasbackgroundyouwillwanttosetthepositionoftheimageplacementusingthe background-positionproperty: left, right, centerareallvalidvaluesfortheXaxis,and top, bottomfortheYaxis:

background-position:topright;

Iftheimageissmallerthanthebackground,youneedtosetthebehaviorusing background-repeat.Shouldit repeat-x, repeat-yor repeatonalltheaxis?Thislastoneisthedefaultvalue.Anothervalueis no-repeat.

background-originletsyouchoosewherethebackgroundshouldbeapplied:totheentireelementincludingpadding(default)using padding-box,totheentireelementincludingtheborderusing border-box,totheelementwithoutthepaddingusing content-box.

With background-attachmentwecanattachthebackgroundtotheviewport,sothatscrollingwillnotaffectthebackground:

background-attachment:fixed;

Bydefaultthevalueis scroll.Thereisanothervalue, local.ThebestwaytovisualizetheirbehavioristhisCodepen.

Thelastbackgroundpropertyis background-size.Wecanuse3keywords: auto, coverandcontain. autoisthedefault.

coverexpandstheimageuntiltheentireelementiscoveredbythebackground.

containstopsexpandingthebackgroundimagewhenonedimension(xory)coversthewholesmallestedgeoftheimage,soit'sfullycontainedintotheelement.

Youcanalsospecifyalengthvalue,andifsoitsetsthewidthofthebackgroundimage(andtheheightisautomaticallydefined):

background-size:100%;

Ifyouspecify2values,oneisthewidthandthesecondistheheight:

background-size:800px600px;

Backgrounds

Theshorthandproperty backgroundallowstoshortendefinitionsandgroupthemonasingleline.

Thisisanexample:

background:url(bg.png)topleftno-repeat;

Ifyouuseanimage,andtheimagecouldnotbeloaded,youcansetafallbackcolor:

background:url(image.png)yellow;

Youcanalsosetagradientasbackground:

background:linear-gradient(#fff,#333);

Backgrounds

CommentsCSSgivesyoutheabilitytowritecommentsinaCSSfile,orinthe styletaginthepageheader

Theformatisthe /*thisisacomment*/C-style(orJavaScript-style,ifyouprefer)comments.

Thisisamultilinecomment.Untilyouaddtheclosing */token,theallthelinesfoundaftertheopeningonearecommented.

Example:

#name{display:block;}/*Nicerule!*/

/*#name{display:block;}*/

#name{

display:block;/*

color:red;

CSSdoesnothaveinlinecomments,like //inCorJavaScript.

Payattentionthough-ifyouadd //beforearule,therulewillnotbeapplied,lookinglikethecommentworked.Inreality,CSSdetectedasyntaxerrorandduetohowitworksitignoredthelinewiththeerror,andwentstraighttothenextline.

Knowingthisapproachletsyoupurposefullywriteinlinecomments,althoughyouhavetobecarefulbecauseyoucan'taddrandomtextlikeyoucaninablockcomment.

Forexample:

//Nicerule!

#name{display:block;}

Inthiscase,duetohowCSSworks,the #nameruleisactuallycommentedout.Youcanfindmoredetailshereifyoufindthisinteresting.Toavoidshootingyourselfinthefoot,justavoidusinginlinecommentsandrelyonblockcomments.

Comments

CustomPropertiesInthelastfewyearsCSSpreprocessorshadalotofsuccess.ItwasverycommonforgreenfieldprojectstostartwithLessorSass.Andit'sstillaverypopulartechnology.

Themainbenefitsofthosetechnologiesare,inmyopinion:

TheyallowtonestselectorsTheprovideaneasyimportsfunctionalityTheygiveyouvariables

ModernCSShasanewpowerfulfeaturecalledCSSCustomProperties,alsocommonlyknownasCSSVariables.

CSSisnotaprogramminglanguagelikeJavaScript,Python,PHP,RubyorGowherevariablesarekeytodosomethinguseful.CSSisverylimitedinwhatitcando,andit'smainlyadeclarativesyntaxtotellbrowsershowtheyshoulddisplayanHTMLpage.

Butavariableisavariable:anamethatreferstoavalue,andvariablesinCSShelpsreducerepetitionandinconsistenciesinyourCSS,bycentralizingthevaluesdefinition.

AnditintroducesauniquefeaturethatCSSpreprocessorswon'tneverhave:youcanaccessandchangethevalueofaCSSVariableprogrammaticallyusingJavaScript.

ThebasicsofusingvariablesACSSVariableisdefinedwithaspecialsyntax,prependingtwodashestoaname( --variable-name),thenacolonandavalue.Likethis:

:root{

--primary-color:yellow;

(moreon :rootlater)

Youcanaccessthevariablevalueusing var():

color:var(--primary-color)

ThevariablevaluecanbeanyvalidCSSvalue,forexample:

CustomProperties

:root{

--default-padding:30px30px20px20px;

--default-color:red;

--default-background:#fff;

CreatevariablesinsideanyelementCSSVariablescanbedefinedinsideanyelement.Someexamples:

:root{

a:hover{

Whatchangesinthosedifferentexamplesisthescope.

VariablesscopeAddingvariablestoaselectormakesthemavailabletoallthechildrenofit.

Intheexampleaboveyousawtheuseof :rootwhendefiningaCSSvariable:

:root{

:rootisaCSSpseudo-classthatidentifiestherootelementofatree.

CustomProperties

InthecontextofanHTMLdocument,usingthe :rootselectorpointstothe htmlelement,exceptthat :roothashigherspecificity(takespriority).

InthecontextofanSVGimage, :rootpointstothe svgtag.

AddingaCSScustompropertyto :rootmakesitavailabletoalltheelementsinthepage.

Ifyouaddavariableinsidea .containerselector,it'sonlygoingtobeavailabletochildrenof.container:

.container{

--secondary-color:yellow;

andusingitoutsideofthiselementisnotgoingtowork.

Variablescanbereassigned:

:root{

.container{

--primary-color:blue;

Outside .container, --primary-colorwillbeyellow,butinsideitwillbeblue.

YoucanalsoassignoroverwriteavariableinsidetheHTMLusinginlinestyles:

<mainstyle="--primary-color:orange;">

</main>

CSSVariablesfollowthenormalCSScascadingrules,withprecedencesetaccordingtospecificity

InteractingwithaCSSVariablevalueusingJavaScriptThecoolestthingwithCSSVariablesistheabilitytoaccessandeditthemusingJavaScript.

Here'showyousetavariablevalueusingplainJavaScript:

constelement=document.getElementById('my-element')

CustomProperties

element.style.setProperty('--variable-name','a-value')

Thiscodebelowcanbeusedtoaccessavariablevalueinstead,incasethevariableisdefinedon :root:

conststyles=getComputedStyle(document.documentElement)

constvalue=String(styles.getPropertyValue('--variable-name')).trim()

Or,togetthestyleappliedtoaspecificelement,incaseofvariablessetwithadifferentscope:

constelement=document.getElementById('my-element')

conststyles=getComputedStyle(element)

constvalue=String(styles.getPropertyValue('--variable-name')).trim()

HandlinginvalidvaluesIfavariableisassignedtoapropertywhichdoesnotacceptthevariablevalue,it'sconsideredinvalid.

Forexampleyoumightpassapixelvaluetoa positionproperty,oraremvaluetoacolorproperty.

Inthiscasethelineisconsideredinvalidandignored.

BrowsersupportBrowsersupportforCSSVariablesisverygood,accordingtoCanIUse.

CSSVariablesareheretostay,andyoucanusethemtodayifyoudon'tneedtosupportInternetExplorerandoldversionsoftheotherbrowsers.

IfyouneedtosupportolderbrowsersyoucanuselibrarieslikePostCSSorMyth,butyou'lllosetheabilitytointeractwithvariablesviaJavaScriptortheBrowserDeveloperTools,astheyaretranspiledtogoodoldvariable-lessCSS(andassuch,youlosemostofthepowerofCSSVariables).

CSSVariablesarecasesensitiveThisvariable:

--width:100px;

CustomProperties

isdifferentthan:

--Width:100px;

MathinCSSVariablesTodomathinCSSVariables,youneedtouse calc(),forexample:

:root{

--default-left-padding:calc(10px*2);

MediaquerieswithCSSVariablesNothingspecialhere.CSSVariablesnormallyapplytomediaqueries:

--width:500px;

@mediascreenand(max-width:1000px)and(min-width:700px){

--width:800px;

.container{

width:var(--width);

Settingafallbackvalueforvar()var()acceptsasecondparameter,whichisthedefaultfallbackvaluewhenthevariablevalueisnotset:

.container{

margin:var(--default-margin,30px);

CustomProperties

FontsAtthedawnofthewebyouonlyhadahandfuloffontsyoucouldchoosefrom.

Thankfullytodayyoucanloadanykindoffontonyourpages.

CSShasgainedmanynicecapabilitiesovertheyearsinregardstofonts.

The fontpropertyistheshorthandforanumberofproperties:

font-family

font-weight

font-stretch

font-style

font-size

Let'sseeeachoneofthemandthenwe'llcover font.

Thenwe'lltalkabouthowtoloadcustomfonts,using @importor @font-face,orbyloadingafontstylesheet.

font-family

Setsthefontfamilythattheelementwilluse.

Why"family"?Becausewhatweknowasafontisactuallycomposedofseveralsub-fonts.whichprovideallthestyle(bold,italic,light..)weneed.

Here'sanexamplefrommyMac'sFontBookapp-theFiraCodefontfamilyhostsseveraldedicatedfontsunderneath:

Thispropertyletsyouselectaspecificfont,forexample:

font-family:Helvetica;

Youcansetmultiplevalues,sothesecondoptionwillbeusedifthefirstcannotbeusedforsomereason(ifit'snotfoundonthemachine,orthenetworkconnectiontodownloadthefontfailed,forexample):

font-family:Helvetica,Arial;

Iusedsomespecificfontsuptonow,oneswecallWebSafeFonts,astheyarepre-installedondifferentoperatingsystems.

WedividetheminSerif,Sans-Serif,andMonospacefonts.Here'salistofsomeofthemostpopularones:

GeorgiaPalatinoTimesNewRomanTimes

Sans-Serif

ArialHelveticaVerdanaGenevaTahomaLucidaGrandeImpactTrebuchetMSArialBlack

Monospace

CourierNewCourierLucidaConsoleMonaco

Youcanuseallofthoseas font-familyproperties,buttheyarenotguaranteedtobethereforeverysystem.Othersexist,too,withavaryinglevelofsupport.

Youcanalsousegenericnames:

sans-serifafontwithoutligaturesserifafontwithligaturesmonospaceafontespeciallygoodforcodecursiveusedtosimulatehandwrittenpiecesfantasythenamesaysitall

Thosearetypicallyusedattheendofa font-familydefinition,toprovideafallbackvalueincasenothingelsecanbeapplied:

font-family:Helvetica,Arial,sans-serif;

font-weight

Thispropertysetsthewidthofafont.Youcanusethosepredefinedvalues:

normalboldbolder(relativetotheparentelement)lighter(relativetotheparentelement)

Orusingthenumerickeywords

100200300400,mappedto normal500600700mappedto bold800900

where100isthelightestfont,and900istheboldest.

Someofthosenumericvaluesmightnotmaptoafont,becausethatmustbeprovidedinthefontfamily.Whenoneismissing,CSSmakesthatnumberbeatleastasboldastheprecedingone,soyoumighthavenumbersthatpointtothesamefont.

font-stretch

Allowstochooseanarroworwidefaceofthefont,ifavailable.

Thisisimportant:thefontmustbeequippedwithdifferentfaces.

Valuesallowedare,fromnarrowertowider:

ultra-condensed

extra-condensed

condensed

semi-condensed

normal

semi-expanded

expanded

extra-expanded

ultra-expanded

font-style

Allowsyoutoapplyanitalicstyletoafont:

font-style:italic;

Thispropertyalsoallowsthevalues obliqueand normal.Thereisverylittle,ifany,differencebetweenusing italicand oblique.Thefirstiseasiertome,asHTMLalreadyoffersan ielementwhichmeansitalic.

font-size

Thispropertyisusedtodeterminethesizeoffonts.

Youcanpass2kindsofvalues:

1. alengthvalue,like px, em, remetc,orapercentage2. apredefinedvaluekeyword

Inthesecondcase,thevaluesyoucanuseare:

xx-smallx-smallsmallmediumlargex-largexx-largesmaller(relativetotheparentelement)larger(relativetotheparentelement)

Usage:

font-size:20px;

font-size:medium;

font-variant

Thispropertywasoriginallyusedtochangethetexttosmallcaps,andithadjust3validvalues:

normal

inherit

small-caps

Smallcapsmeansthetextisrenderedin"smallercaps"besideitsuppercaseletters.

The fontpropertyletsyouapplydifferentfontpropertiesinasingleone,reducingtheclutter.

Wemustatleastset2properties, font-sizeand font-family,theothersareoptional:

font:20pxHelvetica;

Ifweaddotherproperties,theyneedtobeputinthecorrectorder.

Thisistheorder:

font:<font-stretch><font-style><font-variant><font-weight><font-size><line-height><

font-family>;

Example:

font:italicbold20pxHelvetica;

section{

font:small-capsbold20pxHelvetica;

Loadingcustomfontsusing @font-face@font-faceletsyouaddanewfontfamilyname,andmapittoafilethatholdsafont.

Thisfontwillbedownloadedbythebrowserandusedinthepage,andit'sbeensuchafundamentalchangetotypographyontheweb-wecannowuseanyfontwewant.

Wecanadd @font-facedeclarationsdirectlyintoourCSS,orlinktoaCSSdedicatedtoimportingthefont.

InourCSSfilewecanalsouse @importtoloadthatCSSfile.

A @font-facedeclarationcontainsseveralpropertiesweusetodefinethefont,includingsrc,theURI(oneormoreURIs)tothefont.Thisfollowsthesame-originpolicy,whichmeansfontscanonlybedownloadedformthecurrentorigin(domain+port+protocol).

Fontsareusuallyintheformats

woff(WebOpenFontFormat)woff2(WebOpenFontFormat2.0)eot(EmbeddedOpenType)otf(OpenTypeFont)ttf(TrueTypeFont)

Thefollowingpropertiesallowustodefinethepropertiestothefontwearegoingtoload,aswesawabove:

font-family

font-weight

font-style

font-stretch

AnoteonperformanceOfcourseloadingafonthasperformanceimplicationswhichyoumustconsiderwhencreatingthedesignofyourpage.

TypographyWealreadytalkedaboutfonts,butthere'smoretostylingtext.

Inthissectionwe'lltalkaboutthefollowingproperties:

text-transform

text-decoration

text-align

vertical-align

line-height

text-indent

text-align-last

word-spacing

letter-spacing

text-shadow

white-space

tab-size

writing-mode

hyphens

text-orientation

direction

line-break

word-break

overflow-wrap

text-transform

Thispropertycantransformthecaseofanelement.

Thereare4validvalues:

capitalizetouppercasethefirstletterofeachworduppercasetouppercaseallthetextlowercasetolowercaseallthetextnonetodisabletransformingthetext,usedtoavoidinheritingtheproperty

Example:

text-transform:uppercase;

Typography

text-decoration

Thispropertyissedtoadddecorationstothetext,including

underline

overline

line-through

Example:

text-decoration:underline;

Youcanalsosetthestyleofthedecoration,andthecolor.

Example:

text-decoration:underlinedashedyellow;

Validstylevaluesare solid, double, dotted, dashed, wavy.

Youcandoallinoneline,orusethespecificproperties:

text-decoration-line

text-decoration-color

text-decoration-style

Example:

text-decoration-line:underline;

text-decoration-color:yellow;

text-decoration-style:dashed;

text-align

Typography

Bydefaulttextalignhasthe startvalue,meaningthetextstartsatthe"start",origin0,0oftheboxthatcontainsit.Thismeanstopleftinleft-to-rightlanguages,andtoprightinright-to-leftlanguages.

Possiblevaluesare start, end, left, right, center, justify(nicetohaveaconsistentspacingatthelineends):

text-align:right;

vertical-align

Determineshowinlineelementsareverticallyaligned.

Wehaveseveralvaluesforthisproperty.Firstwecanassignalengthorpercentagevalue.Thoseareusedtoalignthetextinapositionhigherorlower(usingnegativevalues)thanthebaselineoftheparentelement.

Thenwehavethekeywords:

baseline(thedefault),alignsthebaselinetothebaselineoftheparentelementsubmakesanelementsubscripted,simulatingthe subHTMLelementresultsupermakesanelementsuperscripted,simulatingthe supHTMLelementresulttopalignthetopoftheelementtothetopofthelinetext-topalignthetopoftheelementtothetopoftheparentelementfontmiddlealignthemiddleoftheelementtothemiddleofthelineoftheparentbottomalignthebottomoftheelementtothebottomofthelinetext-bottomalignthebottomoftheelementtothebottomoftheparentelementfont

line-height

Thisallowsyoutochangetheheightofaline.Eachlineoftexthasacertainfontheight,butthenthereisadditionalspacingverticallybetweenthelines.That'sthelineheight:

line-height:0.9rem;

text-indent

Indentthefirstlineofaparagraphbyasetlength,orapercentageoftheparagraphwidth:

Typography

text-indent:-10px;

text-align-last

Bydefaultthelastlineofaparagraphisalignedfollowingthe text-alignvalue.Usethispropertytochangethatbehavior:

text-align-last:right;

word-spacing

Modifiesthespacingbetweeneachword.

Youcanusethe normalkeyword,toresetinheritedvalues,orusealengthvalue:

word-spacing:2px;

word-spacing:-0.2em;

letter-spacing

Modifiesthespacingbetweeneachletter.

Youcanusethe normalkeyword,toresetinheritedvalues,orusealengthvalue:

letter-spacing:0.2px;

letter-spacing:-0.2em;

text-shadow

Typography

Applyashadowtothetext.Bydefaultthetexthasnowshadow.

Thispropertyacceptsanoptionalcolor,andasetofvaluesthatset

theXoffsetoftheshadowfromthetexttheYoffsetoftheshadowfromthetexttheblurradius

Ifthecolorisnotspecified,theshadowwillusethetextcolor.

Examples:

text-shadow:0.2px2px;

text-shadow:yellow0.2px2px3px;

white-space

SetshowCSShandlesthewhitespace,newlinesandtabsinsideanelement.

Validvaluesthatcollapsewhitespaceare:

normalcollapseswhitespace.Addsnewlineswhennecessaryasthetextreachesthecontainerendnowrapcollapseswhitespace.Doesnotaddanewlinewhenthetextreachestheendofthecontainer,andsuppressesanylinebreakaddedtothetextpre-linecollapseswhitespace.Addsnewlineswhennecessaryasthetextreachesthecontainerend

Validvaluesthatpreservewhitespaceare:

prepreserveswhitespace.Doesnotaddanewlinewhenthetextreachestheendofthecontainer,butpreserveslinebreakaddedtothetextpre-wrappreserveswhitespace.Addsnewlineswhennecessaryasthetextreachesthecontainerend

tab-size

Setsthewidthofthetabcharacter.Bydefaultit's8,andyoucansetanintegervaluethatsetsthecharacterspacesittakes,oralengthvalue:

Typography

tab-size:2;

tab-size:4px;

writing-mode

Defineswhetherlinesoftextarelaidouthorizontallyorvertically,andthedirectioninwhichblocksprogress.

Thevaluesyoucanuseare

horizontal-tb(default)vertical-rlcontentislaidoutvertically.Newlinesareputontheleftofthepreviousvertical-lrcontentislaidoutvertically.Newlinesareputontherightoftheprevious

hyphens

Determinesifhyphensshouldbeautomaticallyaddedwhengoingtoanewline.

Validvaluesare

none(default)manualonlyaddanhyphenwhenthereisalreadyavisiblehyphenorahiddenhyphen(aspecialcharacter)autoaddhyphenswhendeterminedthetextcanhaveahyphen.

text-orientation

When writing-modeisinaverticalmode,determinestheorientationofthetext.

Validvaluesare

mixedisthedefault,andifalanguageisvertical(likeJapanese)itpreservesthatorientation,whilerotatingtextwritteninwesternlanguagesuprightmakesalltextbeverticallyorientedsidewaysmakesalltexthorizontallyoriented

direction

Typography

Setsthedirectionofthetext.Validvaluesare ltrand rtl:

direction:rtl;

word-break

Thispropertyspecifieshowtobreaklineswithinwords.

normal(default)meansthetextisonlybrokenbetweenwords,notinsideawordbreak-allthebrowsercanbreakaword(butnohyphensareadded)keep-allsuppresssoftwrapping.MostlyusedforCJK(Chinese/Japanese/Korean)text.

SpeakingofCJKtext,theproperty line-breakisusedtodeterminehowtextlinesbreak.I'mnotanexpertwiththoselanguages,soIwillavoidcoveringit.

overflow-wrap

Ifawordistoolongtofitaline,itcanoverflowoutsideofthecontainer.

Thispropertyisalsoknownas word-wrap,althoughthatisnon-standard(butstillworksasanalias)

Thisisthedefaultbehavior( overflow-wrap:normal;).

Wecanuse:

overflow-wrap:break-word;

tobreakitattheexactlengthoftheline,or

overflow-wrap:anywhere;

ifthebrowserseesthere'sasoftwrapopportunitysomewhereearlier.Nohyphensareadded,inanycase.

Thispropertyisverysimilarto word-break.Wemightwanttochoosethisoneonwesternlanguages,while word-breakhasspecialtreatmentfornon-westernlanguages.

Typography

BoxModelEveryCSSelementisessentiallyabox.Everyelementisagenericbox.

TheboxmodelexplainsthesizingoftheelementsbasedonafewCSSproperties.

Fromtheinsidetotheoutside,wehave:

thecontentareapaddingbordermargin

ThebestwaytovisualizetheboxmodelistoopenthebrowserDevToolsandcheckhowitisdisplayed:

HereyoucanseehowFirefoxtellsmethepropertiesofa spanelementIhighlighted.Iright-clickedonit,pressedInspectElement,andwenttotheLayoutpaneloftheDevTools.

See,thelightbluespaceisthecontentarea.Surroundingitthereisthepadding,thentheborderandfinallythemargin.

Bydefault,ifyousetawidth(orheight)ontheelement,thatisgoingtobeappliedtothecontentarea.Allthepadding,border,andmargincalculationsaredoneoutsideofthevalue,soyouhavetotakethisinmindwhenyoudoyourcalculation.

YoucanchangethisbehaviorusingBoxSizing.

BoxModel

BorderTheborderisathinlayerbetweenpaddingandmargin.Editingtheborderyoucanmakeelementsdrawtheirperimeteronscreen.

Youcanworkonbordersbyusingthoseproperties:

border-style

border-color

border-width

Theproperty bordercanbeusedasashorthandforallthoseproperties.

border-radiusisusedtocreateroundedcorners.

Youalsohavetheabilitytouseimagesasborders,anabilitygiventoyouby border-imageanditsspecificseparateproperties:

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

Let'sstartwith border-style.

TheborderstyleThe border-stylepropertyletsyouchoosethestyleoftheborder.Theoptionsyoucanuseare:

dotted

dashed

double

groove

outset

hidden

Border

CheckthisCodepenforaliveexample

Thedefaultforthestyleis none,sotomaketheborderappearatallyouneedtochangeittosomethingelse. solidisagoodchoicemostofthetimes.

Youcansetadifferentstyleforeachedgeusingtheproperties

border-top-style

border-right-style

border-bottom-style

border-left-style

oryoucanuse border-stylewithmultiplevaluestodefinethem,usingtheusualTop-Right-Bottom-Leftorder:

border-style:soliddottedsoliddotted;

Theborderwidthborder-widthisusedtosetthewidthoftheborder.

Border

Youcanuseoneofthepre-definedvalues:

medium(thedefaultvalue)thick

orexpressavalueinpixels,emorremoranyothervalidlengthvalue.

Example:

border-width:2px;

Youcansetthewidthofeachedge(Top-Right-Bottom-Left)separatelybyusing4values:

border-width:2px1px2px1px;

oryoucanusethespecificedgeproperties border-top-width, border-right-width, border-bottom-width, border-left-width.

Thebordercolorborder-colorisusedtosetthecoloroftheborder.

Ifyoudon'tsetacolor,theborderbydefaultiscoloredusingthecolorofthetextintheelement.

Youcanpassanyvalidcolorvalueto border-color.

Example:

border-color:yellow;

Youcansetthecolorofeachedge(Top-Right-Bottom-Left)separatelybyusing4values:

border-color:blackredyellowblue;

Border

oryoucanusethespecificedgeproperties border-top-color, border-right-color, border-bottom-color, border-left-color.

ThebordershorthandpropertyThose3propertiesmentioned, border-width, border-styleand border-colorcanbesetusingtheshorthandproperty border.

Example:

border:2pxblacksolid;

Youcanalsousetheedge-specificproperties border-top, border-right, border-bottom,border-left.

Example:

border-left:2pxblacksolid;

border-right:3pxreddashed;

Theborderradiusborder-radiusisusedtosetroundedcornerstotheborder.Youneedtopassavaluethatwillbeusedastheradiusofthecirclethatwillbeusedtoroundtheborder.

Usage:

border-radius:3px;

Youcanalsousetheedge-specificproperties border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius.

Usingimagesasborders

Border

Oneverycoolthingwithbordersistheabilitytouseimagestostylethem.Thisletsyougoverycreativewithborders.

Wehave5properties:

border-image-source

border-image-slice

border-image-width

border-image-outset

border-image-repeat

andtheshorthand border-image.Iwon'tgoinmuchdetailshereasimagesasborderswouldneedamorein-depthcoverageastheoneIcandointhislittlechapter.IrecommendreadingtheCSSTricksalmanacentryonborder-imageformoreinformation.

Border

PaddingThe paddingCSSpropertyiscommonlyusedinCSStoaddspaceintheinnersideofanelement.

Remember:

marginaddsspaceoutsideanelementborderpaddingaddsspaceinsideanelementborder

Specificpaddingpropertiespaddinghas4relatedpropertiesthatalterthepaddingofasingleedgeatonce:

padding-top

padding-right

padding-bottom

padding-left

Theusageofthoseisverysimpleandcannotbeconfused,forexample:

padding-left:30px;

padding-right:3em;

Usingthe paddingshorthandpaddingisashorthandtospecifymultiplepaddingvaluesatthesametime,anddependingonthenumberofvaluesentered,itbehavesdifferently.

1value

Usingasinglevalueappliesthattoallthepaddings:top,right,bottom,left.

padding:20px;

2values

Using2valuesappliesthefirsttobottom&top,andthesecondtoleft&right.

padding:20px10px;

Padding

3values

Using3valuesappliesthefirsttotop,thesecondtoleft&right,thethirdtobottom.

padding:20px10px30px;

4values

Using4valuesappliesthefirsttotop,thesecondtoright,thethirdtobottom,thefourthtoleft.

padding:20px10px5px0px;

So,theorderistop-right-bottom-left.

Valuesacceptedpaddingacceptsvaluesexpressedinanykindoflengthunit,themostcommononesarepx,em,rem,butmanyothersexist.

Padding

MarginThe marginCSSpropertyiscommonlyusedinCSStoaddspacearoundanelement.

Remember:

marginaddsspaceoutsideanelementborderpaddingaddsspaceinsideanelementborder

Specificmarginpropertiesmarginhas4relatedpropertiesthatalterthemarginofasingleedgeatonce:

margin-top

margin-right

margin-bottom

margin-left

Theusageofthoseisverysimpleandcannotbeconfused,forexample:

margin-left:30px;

margin-right:3em;

Usingthe marginshorthandmarginisashorthandtospecifymultiplemarginsatthesametime,anddependingonthenumberofvaluesentered,itbehavesdifferently.

1value

Usingasinglevalueappliesthattoallthemargins:top,right,bottom,left.

margin:20px;

2values

Using2valuesappliesthefirsttobottom&top,andthesecondtoleft&right.

margin:20px10px;

Margin

3values

Using3valuesappliesthefirsttotop,thesecondtoleft&right,thethirdtobottom.

margin:20px10px30px;

4values

Using4valuesappliesthefirsttotop,thesecondtoright,thethirdtobottom,thefourthtoleft.

margin:20px10px5px0px;

So,theorderistop-right-bottom-left.

Valuesacceptedmarginacceptsvaluesexpressedinanykindoflengthunit,themostcommononesarepx,em,rem,butmanyothersexist.

Italsoacceptspercentagevalues,andthespecialvalue auto.

Using autotocenterelementsautocanbeusedtotellthebrowsertoselectautomaticallyamargin,andit'smostcommonlyusedtocenteranelementinthisway:

margin:0auto;

Assaidabove,using2valuesappliesthefirsttobottom&top,andthesecondtoleft&right.

ThemodernwaytocenterelementsistouseFlexbox,andits justify-content:center;directive.

OlderbrowsersofcoursedonotimplementFlexbox,andifyouneedtosupportthem margin:0auto;isstillagoodchoice.

Usinganegativemargin

Margin

marginistheonlypropertyrelatedtosizingthatcanhaveanegativevalue.It'sextremelyuseful,too.Settinganegativetopmarginmakesanelementmoveoverelementsbeforeit,andgivenenoughnegativevalueitwillmoveoutofthepage.

Anegativebottommarginmovesuptheelementsafterit.

Anegativerightmarginmakesthecontentoftheelementexpandbeyonditsallowedcontentsize.

Anegativeleftmarginmovestheelementleftovertheelementsthatprecedeit,andgivenenoughnegativevalueitwillmoveoutofthepage.

Margin

BoxSizingThedefaultbehaviorofbrowserswhencalculatingthewidthofanelementistoapplythecalculatedwidthandheighttothecontentarea,withouttakinganyofthepadding,borderandmargininconsideration.

Thisapproachhasproventobequitecomplicatedtoworkwith.

Youcanchangethisbehaviorbysettingthe box-sizingproperty.

The box-sizingpropertyisagreathelp.Ithas2values:

border-box

content-box

content-boxisthedefault,theonewehadforagesbefore box-sizingbecameathing.

border-boxisthenewandgreatthingwearelookingfor.Ifyousetthatonanelement:

.my-div{

box-sizing:border-box;

widthandheightcalculationincludethepaddingandtheborder.Onlythemarginisleftout,whichisreasonablesinceinourmindwealsotypicallyseethatasaseparatething:marginisoutsideofthebox.

Thispropertyisasmallchangebuthasabigimpact.CSSTricksevendeclaredaninternationalbox-sizingawarenessday,justsaying,andit'srecommendedtoapplyittoeveryelementonthepage,outofthebox,withthis:

*,*:before,*:after{

box-sizing:border-box;

BoxSizing

DisplayThe displaypropertyofanobjectdetermineshowitisrenderedbythebrowser.

It'saveryimportantproperty,andprobablytheonewiththehighestnumberofvaluesyoucanuse.

Thosevaluesinclude:

inline

contents

flow-root

table(andallthe table-*ones)flex

list-item

inline-block

inline-table

inline-flex

inline-grid

inline-list-item

plusothersyouwillnotlikelyuse,like ruby.

Choosinganyofthosewillconsiderablyalterthebehaviorofthebrowserwiththeelementanditschildren.

Inthissectionwe'llanalyzethemostimportantonesnotcoveredelsewhere:

inline

inline-block

We'llseesomeoftheothersinlaterchapters,includingcoverageof table, flexand grid.

inline

InlineisthedefaultdisplayvalueforeveryelementinCSS.

Display

AlltheHTMLtagsaredisplayedinlineoutoftheboxexceptsomeelementslike div, pandsection,whicharesetas blockbytheuseragent(thebrowser).

Inlineelementsdon'thaveanymarginorpaddingapplied.

Sameforheightandwidth.

Youcanaddthem,buttheappearanceinthepagewon'tchange-theyarecalculatedandappliedautomaticallybythebrowser.

inline-block

Similarto inline,butwith inline-block widthand heightareappliedasyouspecified.

Asmentioned,normallyelementsaredisplayedinline,withtheexceptionofsomeelements,including

section

whicharesetas blockbythebrowser.

With display:block,elementsarestackedoneaftereachother,vertically,andeveryelementtakesup100%ofthepage.

Thevaluesassignedtothe widthand heightpropertiesarerespected,ifyousetthem,alongwith marginand padding.

Using display:nonemakesanelementdisappear.It'sstillthereintheHTML,butjustnotvisibleinthebrowser.

Display

PositioningPositioningiswhatmakesusdeterminewhereelementsappearonthescreen,andhowtheyappear.

Youcanmoveelementsaround,andpositionthemexactlywhereyouwant.

Inthissectionwe'llalsoseehowthingschangeonapagebasedonhowelementswithdifferent positioninteractwitheachother.

WehaveonemainCSSproperty: position.

Itcanhavethose5values:

static

relative

absolute

sticky

StaticpositioningThisisthedefaultvalueforanelement.Staticpositionedelementsaredisplayedinthenormalpageflow.

RelativepositioningIfyouset position:relativeonanelement,youarenowabletopositionitwithanoffset,usingtheproperties

toprightbottomleft

whicharecalledoffsetproperties.Theyacceptalengthvalueorapercentage.

TakethisexampleImadeonCodepen.Icreateaparentcontainer,achildcontainer,andaninnerboxwithsometext:

<divclass="parent">

<divclass="child">

Positioning

<divclass="box">

</div>

withsomeCSStogivesomecolorsandpadding,butdoesnotaffectpositioning:

.parent{

background-color:#af47ff;

padding:30px;

width:300px;

.child{

background-color:#ff4797;

padding:30px;

background-color:#f3ff47;

padding:30px;

border:2pxsolid#333;

border-style:dotted;

font-family:courier;

text-align:center;

font-size:2rem;

here'stheresult:

YoucantryandaddanyofthepropertiesImentionedbefore( top, right, bottom, left)to .box,andnothingwillhappen.Thepositionis static.

Positioning

Nowifweset position:relativetothebox,atfirstapparentlynothingchanges.Buttheelementisnowabletomoveusingthe top, right, bottom, leftproperties,andnowyoucanalterthepositionofitrelativelytotheelementcontainingit.

Forexample:

/*...*/

position:relative;

top:-60px;

Anegativevaluefor topwillmaketheboxmoveuprelativelytoitscontainer.

/*...*/

position:relative;

top:-60px;

left:180px;

Positioning

Noticehowthespacethatisoccupiedbytheboxremainspreservedinthecontainer,likeitwasstillinitsplace.

Anotherpropertythatwillnowworkis z-indextoalterthez-axisplacement.We'lltalkaboutitlateron.

AbsolutepositioningSetting position:absoluteonanelementwillremoveitfromthedocument'sflow,anditwillnotlonger.

Rememberinrelativepositioningthatwenoticedthespaceoriginallyoccupiedbyanelementwaspreservedevenifitwasmovedaround?

Withabsolutepositioning,assoonasweset position:absoluteon .box,itsoriginalspaceisnowcollapsed,andonlytheorigin(x,ycoordinates)remainthesame.

/*...*/

position:absolute;

Positioning

Wecannowmovetheboxaroundasweplease,usingthe top, right, bottom, leftproperties:

/*...*/

position:absolute;

top:0px;

left:0px;

/*...*/

position:absolute;

top:140px;

left:50px;

Positioning

Thecoordinatesarerelativetotheclosestcontainerthatisnot static.

Thismeansthatifweadd position:relativetothe .childelement,andweset topandleftto0,theboxwillnotbepositionedatthetopleftmarginofthewindow,butratheritwillbepositionedatthe0,0coordinatesof .child:

.child{

/*...*/

position:relative;

/*...*/

position:absolute;

top:0px;

left:0px;

Here's(howwealreadysaw)of .childisstatic(thedefault):

Positioning

.child{

/*...*/

position:static;

/*...*/

position:absolute;

top:0px;

left:0px;

Likeforrelativepositioning,youcanuse z-indextoalterthez-axisplacement.

FixedpositioningLikewithabsolutepositioning,whenanelementisassigned position:fixedit'sremovedfromtheflowofthepage.

Thedifferencewithabsolutepositioningisthis:elementsarenowalwayspositionedrelativetothewindow,insteadofthefirstnon-staticcontainer.

/*...*/

position:fixed;

Positioning

/*...*/

position:fixed;

top:0;

left:0;

Anotherbigdifferenceisthatelementsarenotaffectedbyscrolling.Onceyouputastickyelementsomewhere,scrollingthepagedoesnotremoveitfromthevisiblepartofthepage.

StickypositioningWhiletheabovevalueshavebeenaroundforaverylongtime,thisonewasintroducedrecentlyandit'sstillrelativelyunsupported(seecaniuse.com)

TheUITableViewiOScomponentisthethingthatcomestomindwhenIthinkabout position:sticky.Youknowwhenyouscrollinthecontactslistandthefirstletterisstickedtothetop,toletyouknowyouareviewingthatparticularletter'scontacts?

WeusedJavaScripttoemulatethat,butthisistheapproachtakenbyCSStoallowitnatively.

Positioning

FloatingandclearingFloatinghasbeenaveryimportanttopicinthepast.

Itwasusedinlotsofhacksandcreativeusagesbecauseitwasoneofthefewways,alongwithtables,wecouldreallyimplementsomelayouts.Inthepastweusedtofloatthesidebartotheleft,forexample,toshowitontheleftsideofthescreenandaddedsomemargintothemaincontent.

LuckilytimeshavechangedandtodaywehaveFlexboxandGridtohelpuswithlayout,andfloathasgonebacktoitsoriginalscope:placingcontentononesideofthecontainerelement,andmakeitssiblingsshowuparoundit.

The floatpropertysupports3values:

none(thedefault)

Saywehaveaboxwhichcontainsaparagraphwithsometext,andtheparagraphalsocontainsanimage.

Here'ssomecode:

<divclass="parent">

<divclass="child">

<divclass="box">

<p>Thisissomerandomparagraphandanimage.<imgsrc="https://via.placeholder.com

/100x100"/>Theimageisinthemiddleofthetext.Theimageisinthemiddleofthetex

t.Theimageisinthemiddleofthetext.Theimageisinthemiddleofthetext.Theima

geisinthemiddleofthetext.Theimageisinthemiddleofthetext.Theimageisint

hemiddleofthetext.Theimageisinthemiddleofthetext.Theimageisinthemiddle

ofthetext.

</div>

.parent{

padding:30px;

width:500px;

.child{

background-color:#ff4797;

padding:30px;

Floatingandclearing

background-color:#f3ff47;

padding:30px;

border-style:dotted;

font-family:courier;

text-align:justify;

font-size:1rem;

andthevisualappearance:

Asyoucansee,thenormalflowbydefaultconsiderstheimageinline,andmakesspaceforitinthelineitself.

Ifweadd float:lefttotheimage,andsomepadding:

float:left;

Floatingandclearing

thisistheresult:

andthisiswhatwegetbyapplyingafloat:right,adjustingthepaddingaccordingly:

float:right;

Floatingandclearing

Afloatedelementisremovedfromthenormalflowofthepage,andtheothercontentflowsaroundit.

SeetheexampleonCodepen

Youarenotlimitedtofloatingimages,too.Hereweswitchtheimagewitha spanelement:

<divclass="parent">

<divclass="child">

<divclass="box">

<p>Thisissomerandomparagraphandanimage.<span>Sometexttofloat</span>Thei

mageisinthemiddleofthetext.Theimageisinthemiddleofthetext.Theimageisin

themiddleofthetext.Theimageisinthemiddleofthetext.Theimageisinthemiddl

eofthetext.Theimageisinthemiddleofthetext.Theimageisinthemiddleofthet

ext.Theimageisinthemiddleofthetext.Theimageisinthemiddleofthetext.

</div>

float:right;

margin:20px0px20px20px;

padding:10px;

border:1pxsolidblack

Floatingandclearing

andthisistheresult:

ClearingWhathappenswhenyoufloatmorethanoneelement?

Ifwhenfloatedtheyfindanotherfloatedimage,bydefaulttheyarestackeduponenexttotheother,horizontally.Untilthereisnoroom,andtheywillstartbeingstackedonanewline.

Saywehad3inlineimagesinsidea ptag:

Floatingandclearing

Ifweadd float:lefttothoseimages:

float:left;

thisiswhatwe'llhave:

Floatingandclearing

ifyouadd clear:lefttoimages,thosearegoingtobestackedverticallyratherthanhorizontally:

Floatingandclearing

Iusedthe leftvaluefor clear.Itallows

lefttoclearleftfloatsrighttoclearrightfloatsbothtoclearbothleftandrightfloatsnone(default)disablesclearing

Floatingandclearing

z-indexWhenwetalkedaboutpositioning,Imentionedthatyoucanusethe z-indexpropertytocontroltheZaxispositioningofelements.

It'sveryusefulwhenyouhavemultipleelementsthatoverlapeachother,andyouneedtodecidewhichoneisvisible,asnearertotheuser,andwhichone(s)shouldbehiddenbehindit.

Thispropertytakesanumber(withoutdecimals)andusesthatnumbertocalculatewhichelementsappearnearertotheuser,intheZaxis.

Thehigherthez-indexvalue,themoreanelementispositionednearertotheuser.

Whendecidingwhichelementshouldbevisibleandwhichoneshouldbepositionedbehindit,thebrowserdoesacalculationonthez-indexvalue.

Thedefaultvalueis auto,aspecialkeyword.Using auto,theZaxisorderisdeterminedbythepositionoftheHTMLelementinthepage-thelastsiblingappearsfirst,asit'sdefinedlast.

Bydefaultelementshavethe staticvalueforthe positionproperty.Inthiscase,the z-indexpropertydoesnotmakeanydifference-itmustbesetto absolute, relativeorfixedtowork.

Example:

.my-first-div{

position:absolute;

top:0;

left:0;

width:600px;

height:600px;

z-index:10;

.my-second-div{

position:absolute;

top:0;

left:0;

width:500px;

height:500px;

z-index:20;

Theelementwithclass .my-second-divwillbedisplayed,andbehindit .my-first-div.

z-index

Hereweused10and20,butyoucanuseanynumber.Negativenumberstoo.It'scommontopicknon-consecutivenumbers,soyoucanpositionelementsinthemiddle.Ifyouuseconsecutivenumbersinstead,youwouldneedtore-calculatethez-indexofeachelementinvolvedinthepositioning.

z-index

CSSGridCSSGridisthenewkidintheCSStown,andwhilenotyetfullysupportedbyallbrowsers,it'sgoingtobethefuturesystemforlayouts.

CSSGridisafundamentallynewapproachtobuildinglayoutsusingCSS.

KeepaneyeontheCSSGridLayoutpageoncaniuse.com(https://caniuse.com/#feat=css-grid)tofindoutwhichbrowserscurrentlysupportit.Atthetimeofwriting,April2019,allmajorbrowsers(exceptIE,whichwillneverhavesupportforit)arealreadysupportingthistechnology,covering92%ofallusers.

CSSGridisnotacompetitortoFlexbox.Theyinteroperateandcollaborateoncomplexlayouts,becauseCSSGridworkson2dimensions(rowsANDcolumns)whileFlexboxworksonasingledimension(rowsORcolumns).

Buildinglayoutsforthewebhastraditionallybeenacomplicatedtopic.

Iwon'tdigintothereasonsforthiscomplexity,whichisacomplextopiconitsown,butyoucanthinkyourselfasaveryluckyhumanbecausenowadaysyouhave2verypowerfulandwellsupportedtoolsatyourdisposal:

CSSFlexboxCSSGrid

These2arethetoolstobuildtheWeblayoutsofthefuture.

UnlessyouneedtosupportoldbrowserslikeIE8andIE9,thereisnoreasontobemessingwiththingslike:

TablelayoutsFloatsclearfixhacksdisplay:tablehacks

Inthisguidethere'sallyouneedtoknowaboutgoingfromazeroknowledgeofCSSGridtobeingaproficientuser.

ThebasicsTheCSSGridlayoutisactivatedonacontainerelement(whichcanbea divoranyothertag)bysetting display:grid.

CSSGrid

Aswithflexbox,youcandefinesomepropertiesonthecontainer,andsomepropertiesoneachindividualiteminthegrid.

Thesepropertiescombinedwilldeterminethefinallookofthegrid.

Themostbasiccontainerpropertiesare grid-template-columnsand grid-template-rows.

grid-template-columnsandgrid-template-rows

Thosepropertiesdefinethenumberofcolumnsandrowsinthegrid,andtheyalsosetthewidthofeachcolumn/row.

Thefollowingsnippetdefinesagridwith4columnseach200pxwide,and2rowswitha300pxheighteach.

.container{

display:grid;

grid-template-columns:200px200px200px200px;

grid-template-rows:300px300px;

CSSGrid

Here'sanotherexampleofagridwith2columnsand2rows:

.container{

display:grid;

grid-template-columns:200px200px;

CSSGrid

Automaticdimensions

Manytimesyoumighthaveafixedheadersize,afixedfootersize,andthemaincontentthatisflexibleinheight,dependingonitslength.Inthiscaseyoucanusethe autokeyword:

.container{

display:grid;

grid-template-rows:100pxauto100px;

Differentcolumnsandrowsdimensions

Intheaboveexampleswemaderegulargridsbyusingthesamevaluesforrowsandthesamevaluesforcolumns.

Youcanspecifyanyvalueforeachrow/column,tocreatealotofdifferentdesigns:

.container{

display:grid;

CSSGrid

Anotherexample:

.container{

display:grid;

CSSGrid

Addingspacebetweenthecells

Unlessspecified,thereisnospacebetweenthecells.

Youcanaddspacingbyusingthoseproperties:

grid-column-gap

grid-row-gap

ortheshorthandsyntax grid-gap.

Example:

.container{

display:grid;

CSSGrid

grid-column-gap:25px;

grid-row-gap:25px;

Thesamelayoutusingtheshorthand:

.container{

display:grid;

grid-gap:25px;

Spawningitemsonmultiplecolumnsand/orrows

Everycellitemhastheoptiontooccupymorethanjustoneboxintherow,andexpandhorizontallyorverticallytogetmorespace,whilerespectingthegridproportionssetinthecontainer.

Thosearethepropertieswe'lluseforthat:

grid-column-start

grid-column-end

grid-row-start

grid-row-end

CSSGrid

Example:

.container{

display:grid;

.item1{

grid-column-start:2;

grid-column-end:4;

.item6{

grid-column-start:3;

grid-column-end:5;

Thenumberscorrespondtotheverticallinethatseparateseachcolumn,startingfrom1:

CSSGrid

Thesameprincipleappliesto grid-row-startand grid-row-end,exceptthistimeinsteadoftakingmorecolumns,acelltakesmorerows.

Shorthandsyntax

Thosepropertieshaveashorthandsyntaxprovidedby:

grid-column

grid-row

Theusageissimple,here'showtoreplicatetheabovelayout:

.container{

display:grid;

.item1{

CSSGrid

grid-column:2/4;

.item6{

grid-column:3/5;

Anotherapproachistosetthestartingcolumn/row,andsethowmanyitshouldoccupyusingspan:

.container{

display:grid;

.item1{

grid-column:2/span2;

.item6{

grid-column:3/span2;

Moregridconfiguration

Usingfractions

Specifyingtheexactwidthofeachcolumnorrowisnotidealineverycase.

Afractionisaunitofspace.

Thefollowingexampledividesagridinto3columnswiththesamewidth,1/3oftheavailablespaceeach.

.container{

grid-template-columns:1fr1fr1fr;

Usingpercentagesandrem

Youcanalsousepercentages,andmixandmatchfractions,pixels,remandpercentages:

.container{

grid-template-columns:3rem15%1fr2fr

Using repeat()

CSSGrid

repeat()isaspecialfunctionthattakesanumberthatindicatesthenumberoftimesarow/columnwillberepeated,andthelengthofeachone.

Ifeverycolumnhasthesamewidthyoucanspecifythelayoutusingthissyntax:

.container{

grid-template-columns:repeat(4,100px);

Thiscreates4columnswiththesamewidth.

Orusingfractions:

.container{

grid-template-columns:repeat(4,1fr);

Specifyaminimumwidthforarow

Commonusecase:Haveasidebarthatnevercollapsesmorethanacertainamountofpixelswhenyouresizethewindow.

Here'sanexamplewherethesidebartakes1/4ofthescreenandnevertakeslessthan200px:

.container{

grid-template-columns:minmax(200px,3fr)9fr;

Youcanalsosetjustamaximumvalueusingthe autokeyword:

.container{

grid-template-columns:minmax(auto,50%)9fr;

orjustaminimumvalue:

.container{

grid-template-columns:minmax(100px,auto)9fr;

Positioningelementsusing grid-template-areas

BydefaultelementsarepositionedinthegridusingtheirorderintheHTMLstructure.

CSSGrid

Using grid-template-areasYoucandefinetemplateareastomovethemaroundinthegrid,andalsotospawnanitemonmultiplerows/columnsinsteadofusing grid-column.

Here'sanexample:

<divclass="container">

<main>

</main>

<aside>

</aside>

</header>

</footer>

</div>

.container{

display:grid;

grid-template-areas:

"headerheaderheaderheader"

"sidebarmainmainmain"

"footerfooterfooterfooter";

grid-area:main;

aside{

grid-area:sidebar;

header{

grid-area:header;

footer{

grid-area:footer;

Despitetheiroriginalorder,itemsareplacedwhere grid-template-areasdefine,dependingonthe grid-areapropertyassociatedtothem.

Addingemptycellsintemplateareas

Youcansetanemptycellusingthedot .insteadofanareanamein grid-template-areas:

.container{

CSSGrid

display:grid;

".headerheader."

"sidebar.mainmain"

".footerfooter.";

FillapagewithagridYoucanmakeagridextendtofillthepageusing fr:

.container{

display:grid;

height:100vh;

grid-template-columns:1fr1fr1fr1fr;

grid-template-rows:1fr1fr;

Anexample:header,sidebar,contentandfooterHereisasimpleexampleofusingCSSGridtocreateasitelayoutthatprovidesaheaderoptop,amainpartwithsidebarontheleftandcontentontheright,andafooterafterwards.

Here'sthemarkup:

<divclass="wrapper">

<header>Header</header>

<h1>Welcome</h1>

</article>

CSSGrid

<aside><ul><li>Sidebar</li></ul></aside>

<footer>Footer</footer>

</div>

andhere'stheCSS:

header{

grid-area:header;

background-color:#fed330;

padding:20px;

article{

grid-area:content;

background-color:#20bf6b;

padding:20px;

aside{

grid-area:sidebar;

background-color:#45aaf2;

footer{

padding:20px;

grid-area:footer;

background-color:#fd9644;

.wrapper{

display:grid;

grid-gap:20px;

grid-template-columns:1fr3fr;

"headerheader"

"sidebarcontent"

"footerfooter";

Iaddedsomecolorstomakeitprettier,butbasicallyitassignstoeverydifferenttaga grid-areaname,whichisusedinthe grid-template-areaspropertyin .wrapper.

Whenthelayoutissmallerwecanputthesidebarbelowthecontentusingamediaquery:

@media(max-width:500px){

.wrapper{

grid-template-columns:4fr;

"header"

"content"

"sidebar"

"footer";

SeeonCodePen

CSSGrid

WrappingupThesearethebasicsofCSSGrid.TherearemanythingsIdidn'tincludeinthisintroductionbutIwantedtomakeitverysimple,tostartusingthisnewlayoutsystemwithoutmakingitfeeloverwhelming.

CSSGrid

FlexboxFlexbox,alsocalledFlexibleBoxModule,isoneofthetwomodernlayoutssystems,alongwithCSSGrid.

ComparedtoCSSGrid(whichisbi-dimensional),flexboxisaone-dimensionallayoutmodel.Itwillcontrolthelayoutbasedonaroworonacolumn,butnottogetheratthesametime.

Themaingoalofflexboxistoallowitemstofillthewholespaceofferedbytheircontainer,dependingonsomerulesyouset.

UnlessyouneedtosupportoldbrowserslikeIE8andIE9,Flexboxisthetoolthatletsyouforgetaboutusing

TablelayoutsFloatsclearfixhacksdisplay:tablehacks

Let'sdiveintoflexboxandbecomeamasterofitinaveryshorttime.

BrowsersupportAtthetimeofwriting(Feb2018),it'ssupportedby97.66%oftheusers,allthemostimportantbrowsersimplementitsinceyears,soevenolderbrowsers(includingIE10+)arecovered:

Flexbox

WhilewemustwaitafewyearsforuserstocatchuponCSSGrid,Flexboxisanoldertechnologyandcanbeusedrightnow.

EnableFlexboxAflexboxlayoutisappliedtoacontainer,bysetting

display:flex;

display:inline-flex;

thecontentinsidethecontainerwillbealignedusingflexbox.

Containerproperties

Flexbox

Someflexboxpropertiesapplytothecontainer,whichsetsthegeneralrulesforitsitems.Theyare

flex-direction

justify-content

align-items

flex-wrap

flex-flow

Alignrowsorcolumns

Thefirstpropertywesee, flex-direction,determinesifthecontainershouldalignitsitemsasrows,orascolumns:

flex-direction:rowplacesitemsasarow,inthetextdirection(left-to-rightforwesterncountries)flex-direction:row-reverseplacesitemsjustlike rowbutintheoppositedirectionflex-direction:columnplacesitemsinacolumn,orderingtoptobottomflex-direction:column-reverseplacesitemsinacolumn,justlike columnbutintheoppositedirection-

Verticalandhorizontalalignment

Bydefaultitemsstartfromtheleftis flex-directionisrow,andfromthetopif flex-directioniscolumn.

Flexbox

Youcanchangethisbehaviorusing justify-contenttochangethehorizontalalignment,andalign-itemstochangetheverticalalignment.

Changethehorizontalalignment

justify-contenthas5possiblevalues:

Flexbox

flex-start:aligntotheleftsideofthecontainer.flex-end:aligntotherightsideofthecontainer.center:alignatthecenterofthecontainer.space-between:displaywithequalspacingbetweenthem.space-around:displaywithequalspacingaroundthem

Changetheverticalalignment

align-itemshas5possiblevalues:

Flexbox

flex-start:aligntothetopofthecontainer.flex-end:aligntothebottomofthecontainer.center:alignattheverticalcenterofthecontainer.baseline:displayatthebaselineofthecontainer.stretch:itemsarestretchedtofitthecontainer.

Flexbox

Anoteon baseline

baselinelookssimilarto flex-startinthisexample,duetomyboxesbeingtoosimple.CheckoutthisCodepentohaveamoreusefulexample,whichIforkedfromaPenoriginallycreatedbyMartinMichálek.Asyoucanseethere,itemsdimensionsarealigned.

Bydefaultitemsinaflexboxcontainerarekeptonasingleline,shrinkingthemtofitinthecontainer.

Toforcetheitemstospreadacrossmultiplelines,use flex-wrap:wrap.Thiswilldistributetheitemsaccordingtotheordersetin flex-direction.Use flex-wrap:wrap-reversetoreversethisorder.

Ashorthandpropertycalled flex-flowallowsyoutospecify flex-directionand flex-wrapinasingleline,byaddingthe flex-directionvaluefirst,followedby flex-wrapvalue,forexample: flex-flow:rowwrap.

PropertiesthatapplytoeachsingleitemSincenow,we'veseenthepropertiesyoucanapplytothecontainer.

Singleitemscanhaveacertainamountofindependenceandflexibility,andyoucanaltertheirappearanceusingthoseproperties:

align-self

flex-grow

flex-shrink

flex-basis

Let'sseethemindetail.

Movingitemsbefore/afteranotheroneusingorder

Itemsareorderedbasedonaordertheyareassigned.Bydefaulteveryitemhasorder 0andtheappearanceintheHTMLdeterminesthefinalorder.

Flexbox

Youcanoverridethispropertyusing orderoneachseparateitem.Thisisapropertyyousetontheitem,notthecontainer.Youcanmakeanitemappearbeforealltheothersbysettinganegativevalue.

Verticalalignmentusingalign-self

Anitemcanchoosetooverridethecontainer align-itemssetting,using align-self,whichhasthesame5possiblevaluesof align-items:

flex-start:aligntothetopofthecontainer.flex-end:aligntothebottomofthecontainer.center:alignattheverticalcenterofthecontainer.baseline:displayatthebaselineofthecontainer.stretch:itemsarestretchedtofitthecontainer.

Flexbox

Groworshrinkanitemifnecessary

flex-grow

Thedefautforanyitemis0.

Ifallitemsaredefinedas1andoneisdefinedas2,thebiggerelementwilltakethespaceoftwo"1"items.

flex-shrink

Thedefautforanyitemis1.

Ifallitemsaredefinedas1andoneisdefinedas3,thebiggerelementwillshrink3xtheotherones.Whenlessspaceisavailable,itwilltake3xlessspace.

flex-basis

Ifsetto auto,itsizesanitemaccordingtoitswidthorheight,andaddsextraspacebasedonthe flex-growproperty.

Ifsetto0,itdoesnotaddanyextraspacefortheitemwhencalculatingthelayout.

Ifyouspecifyapixelnumbervalue,itwillusethatasthelengthvalue(widthorheightdependsifit'saroworacolumnitem)

Flexbox

Thispropertycombinestheabove3properties:

flex-grow

flex-shrink

flex-basis

andprovidesashorthandsyntax: flex:01auto

Flexbox

TablesTablesinthepastweregreatlyoverusedinCSS,astheywereoneoftheonlywayswecouldcreateafancypagelayout.

TodaywithGridandFlexboxwecanmovetablesbacktothejobtheywereintendedtodo:stylingtables.

Let'sstartfromtheHTML.Thisisabasictable:

<table>

<thead>

<thscope="col">Name</th>

<thscope="col">Age</th>

</thead>

<tbody>

<thscope="row">Flavio</th>

<thscope="row">Roger</th>

</tbody>

</table>

Bydefaultit'snotveryattractive.Thebrowserprovidessomestandardstyles,andthat'sit:

WecanuseCSStostylealltheelementsofthetable,ofcourse.

Let'sstartwiththeborder.Anicebordercangoalongway.

Tables

Wecanapplyitonthe tableelement,andontheinnerelementstoo,like thand td:

table,th,td{

Ifwepairitwithsomemargin,wegetaniceresult:

Onecommonthingwithtablesistheabilitytoaddacolortoonerow,andadifferentcolortoanotherrow.Thisispossibleusingthe :nth-child(odd)or :nth-child(even)selector:

tbodytr:nth-child(odd){

Thisgivesus:

Tables

Ifyouadd border-collapse:collapse;tothetableelement,allbordersarecollapsedintoone:

Tables

CenteringCenteringthingsinCSSisataskthatisverydifferentifyouneedtocenterhorizontallyorvertically.

InthispostIexplainthemostcommonscenariosandhowtosolvethem.IfanewsolutionisprovidedbyFlexboxIignoretheoldtechniquesbecauseweneedtomoveforward,andFlexboxissupportedbybrowserssinceyears,IE10included.

Centerhorizontally

Textisverysimpletocenterhorizontallyusingthe text-alignpropertysetto center:

text-align:center;

Blocks

ThemodernwaytocenteranythingthatisnottextistouseFlexbox:

#mysection{

display:flex;

justify-content:center;

anyelementinside #mysectionwillbehorizontallycentered.

Centering

Hereisthealternativeapproachifyoudon'twanttouseFlexbox.

Anythingthatisnottextcanbecenteredbyapplyinganautomaticmargintoleftandright,andsettingthewidthoftheelement:

section{

margin:0auto;

width:50%;

theabove margin:0auto;isashorthandfor:

section{

margin-top:0;

margin-bottom:0;

margin-left:auto;

margin-right:auto;

Remembertosettheitemto display:blockifit'saninlineelement.

CenterverticallyTraditionallythishasalwaysbeenadifficulttask.Flexboxnowprovidesusagreatwaytodothisinthesimplestpossibleway:

#mysection{

display:flex;

align-items:center;

anyelementinside #mysectionwillbeverticallycentered.

Centering

CenterbothverticallyandhorizontallyFlexboxtechniquestocenterverticallyandhorizontallycanbecombinedtocompletelycenteranelementinthepage.

#mysection{

display:flex;

align-items:center;

justify-content:center;

ThesamecanbedoneusingCSSGrid:

display:grid;

Centering

place-items:center;

height:100vh;

Centering

ListsListsareaveryimportantpartofmanywebpages.

CSScanstylethemusingseveralproperties.

list-style-typeisusedtosetapredefinedmarkertobeusedbythelist:

list-style-type:square;

Wehavelotsofpossiblevalues,whichyoucanseeherehttps://developer.mozilla.org/en-US/docs/Web/CSS/list-style-typewithexamplesoftheirappearance.Someofthemostpopularonesare disc, circle, squareand none.

list-style-imageisusedtouseacustommarkerwhenapredefinedmarkerisnotappropriate:

list-style-image:url(list-image.png);

list-style-positionletsyouaddthemarker outside(thedefault)or insideofthelistcontent,intheflowofthepageratherthanoutsideofit

list-style-position:inside;

The list-styleshorthandpropertyletsusspecifyallthosepropertiesinthesameline:

list-style:url(list-image.png)inside;

MediaqueriesandresponsivedesignInthissectionwe'regoingtofirstintroducemediatypesandmediafeaturedescriptors,thenwe'llexplainmediaqueries.

MediatypesUsedinmediaqueriesand@importdeclarations,mediatypesallowustodetermineonwhichmediaaCSSfile,orapieceofCSS,isloaded.

Wehavethefollowingmediatypes

allmeansallthemediaprintusedwhenprintingscreenusedwhenthepageispresentedonascreenspeechusedforscreenreaders

screenisthedefault.

Inthepastwehadmoreofthem,butmostaredeprecatedastheyproventonotbeaneffectivewayofdeterminingdeviceneeds.

Wecanusethemin@importstatementslikethis:

@importurl(myfile.css)screen;

@importurl(myfile-print.css)print;

WecanloadaCSSfileonmultiplemediatypesseparatingeachwithacomma:

@importurl(myfile.css)screen,print;

Thesameworksforthe linktaginHTML:

<linkrel="stylesheet"type="text/css"href="myfile.css"media="screen"/>

<linkrel="stylesheet"type="text/css"href="another.css"media="screen,print"/>

We'renotlimitedtojustusingmediatypesinthe mediaattributeandinthe @importdeclaration.There'smore

Mediafeaturedescriptors

First,let'sintroducemediafeaturedescriptors.Theyareadditionalkeywordsthatwecanaddtothe mediaattributeof linkorthethe @importdeclaration,toexpressmoreconditionalsovertheloadingoftheCSS.

Here'sthelistofthem:

height

device-width

device-height

aspect-ratio

device-aspect-ratio

color-index

monochrome

resolution

orientation

Eachofthemhaveacorrespondingmin-andmax-,forexample:

min-width, max-widthmin-device-width, max-device-width

andsoon.

Someofthoseacceptalengthvaluewhichcanbeexpressedin pxor remoranylengthvalue.It'sthecaseof width, height, device-width, device-height.

Forexample:

@importurl(myfile.css)screenand(max-width:800px);

Noticethatwewrapeachblockusingmediafeaturedescriptorsinparentheses.

Someacceptafixedvalue. orientation,usedtodetectthedeviceorientation,acceptsportraitor landscape.

Example:

<linkrel="stylesheet"type="text/css"href="myfile.css"media="screenand(orientation:p

ortrait)"/>

scan,usedtodeterminethetypeofscreen,accepts progressive(formoderndisplays)orinterlace(forolderCRTdevices)

Someotherswantaninteger.

Like colorwhichinspectsthenumberofbitspercolorcomponentusedbythedevice.Verylow-level,butyoujustneedtoknowit'sthereforyourusage(like grid, color-index,monochrome).

aspect-ratioand device-aspect-ratioacceptaratiovaluerepresentingthewidthtoheightviewportratio,whichisexpressedasafraction.

Example:

@importurl(myfile.css)screenand(aspect-ratio:4/3);

resolutionrepresentsthepixeldensityofthedevice,expressedinaresolutiondatatypelikedpi.

Example:

@importurl(myfile.css)screenand(min-resolution:100dpi);

LogicoperatorsWecancombinerulesusing and:

<linkrel="stylesheet"type="text/css"href="myfile.css"media="screenand(max-width:800

px)"/>

Wecanperforman"or"typeoflogicoperationusingcommas,whichcombinesmultiplemediaqueries:

@importurl(myfile.css)screen,print;

Wecanuse nottonegateamediaquery:

@importurl(myfile.css)notscreen;

Important: notcanonlybeusedtonegateanentiremediaquery,soitmustbeplacedatthebeginningofit(orafteracomma)

MediaqueriesAllthoseaboveruleswesawappliedto@importorthethe linkHTMLtagcanbeappliedinsidetheCSS,too.

Youneedtowrapthemina @media(){}structure.

Example:

@mediascreenand(max-width:800px){

/*entersomeCSS*/

andthisisthefoundationforresponsivedesign.

Mediaqueriescanbequitecomplex.ThisexampleappliestheCSSonlyifit'sascreendevice,thewidthisbetween600and800pixels,andtheorientationislandscape:

@mediascreenand(max-width:800px)and(min-width:600px)and(orientation:landscape){

/*entersomeCSS*/

FeatureQueriesFeaturequeriesarearecentandrelativelyunknownabilityofCSS,butawellsupportedone.

Wecanuseittocheckifafeatureissupportedbythebrowserusingthe @supportskeyword.

ForexampleIthinkthisisespeciallyuseful,atthetimeofwriting,forcheckingifabrowsersupportsCSSgrid,forexample,whichcanbedoneusing:

@supports(display:grid){

/*applythisCSS*/

Wecheckifthebrowsersupportsthe gridvalueforthe displayproperty.

Wecanuse @supportsforanyCSSproperty,tocheckanyvalue.

Wecanalsousethelogicaloperators and, orand nottobuildcomplexfeaturequeries:

@supports(display:grid)and(display:flex){

/*applythisCSS*/

FeatureQueries

FiltersFiltersallowustoperformoperationsonelements.

ThingsyounormallydowithPhotoshoporotherphotoeditingsoftware,likechangingtheopacityorthebrightness,andmore.

Youusethe filterproperty.Here'sanexampleofitappliedonanimage,butthispropertycanbeusedonanyelement:

filter:<something>;

Youcanusevariousvalueshere:

blur()

brightness()

contrast()

drop-shadow()

grayscale()

hue-rotate()

invert()

opacity()

sepia()

saturate()

Noticetheparenthesesaftereachoption,becausetheyallrequireaparameter.

Forexample:

filter:opacity(0.5);

meanstheimagewillbe50%transparent,because opacity()takesonevaluefrom0to1,orapercentage.

Youcanalsoapplymultiplefiltersatonce:

filter:opacity(0.5)blur(2px);

Filters

Let'snowtalkabouteachfilterindetails.

blur()

Blursanelementcontent.Youpassitavalue,expressedin pxor emor remthatwillbeusedtodeterminetheblurradius.

Example:

filter:blur(4px);

opacity()

opacity()takesonevaluefrom0to1,orapercentage,anddeterminestheimagetransparencybasedonit.

0,or 0%,meanstotallytransparent. 1,or 100%,orhigher,meanstotallyvisible.

Example:

filter:opacity(0.5);

CSSalsohasan opacityproperty. filterhowevercanbehardwareaccelerated,dependingontheimplementation,sothisshouldbethepreferredmethod.

drop-shadow()

drop-shadow()showsashadowbehindtheelement,whichfollowsthealphachannel.Thismeansthatifyouhaveatransparentimage,yougetashadowappliedtotheimageshape,nottheimagebox.Iftheimagedoesnothaveanalphachannel,theshadowwillbeappliedtotheentireimagebox.

Itacceptsaminimumof2parameters,upto5:

offset-xsetsthehorizontaloffset.Canbenegative.offset-ysetstheverticaloffset.Canbenegative.blur-radius,optional,setstheblurradiusfortheshadow.Itdefaultsto0,noblur.spread-radius,optional,setsthespreadradius.Expressedin px, remor emcolor,optional,setsthecoloroftheshadow.

Filters

Youcansetthecolorwithoutsettingthespreadradiusorblurradius.CSSunderstandsthevalueisacolorandnotalengthvalue.

Example:

filter:drop-shadow(10px10px5pxorange);

filter:drop-shadow(10px10pxorange);

filter:drop-shadow(10px10px5px5px#333);

grayscale()

Maketheelementhaveagraycolor.

Youpassonevaluefrom0to1,orfrom0%to100%,where1and100%meancompletelygray,and0or0%meantheimageisnottouched,andtheoriginalcolorsremain.

Example:

filter:grayscale(50%);

sepia()

Maketheelementhaveasepiacolor.

Youpassonevaluefrom0to1,orfrom0%to100%,where1and100%meancompletelysepia,and0or0%meantheimageisnottouched,andtheoriginalcolorsremain.

Example:

filter:sepia(50%);

invert()

Filters

Invertthecolorsofanelement.InvertingacolormeanslookinguptheoppositeofacolorintheHSLcolorwheel.Justsearch"colorwheel"inGoogleifyouhavenoideawhatdoesthatmeans.Forexample,theoppositeofyellowisblue,theoppositeofrediscyan.Everysinglecolorhasanopposite.

Youpassanumber,from0to1orfrom0%to100%,thatdeterminestheamountofinversion.1or100%meansfullinversion,0or0%meansnoinversion.

0.5or50%willalwaysrendera50%graycolor,becauseyoualwaysendupinthemiddleofthewheel.

Example:

filter:invert(50%);

hue-rotate()

TheHSLcolorwheelisrepresentedindegrees.Using hue-rotate()youcanrotatethecolorusingapositiveornegativerotation.

Thefunctionacceptsa degvalue.

Example:

filter:hue-rotate(90deg);

brightness()

Altersthebrightnessofanelement.

0or0%givesatotalblackelement.1or100%givesanunchangedimage

Valueshigherthan1or100%maketheimagebrighteruptoreachingatotalwhiteelement.

Example:

filter:brightness(50%);

contrast()

Filters

Altersthecontrastofanelement.

0or0%givesatotalgrayelement.1or100%givesanunchangedimage

Valueshigherthan1or100%givemorecontrast.

Example:

filter:contrast(150%);

saturate()

Altersthesaturationofanelement.

0or0%givesatotalgrayscaleelement(withlesssaturation).1or100%givesanunchangedimage

Valueshigherthan1or100%givemoresaturation.

Example:

filter:saturate();

ThisfilterallowstoapplyafilterdefinedinanSVGfile.YoupointtotheSVGfilelocation.

Example:

filter:url(filter.svg);

SVGfiltersareoutofthescopeofthisbook,butyoucanreadmoreonthisSmashingMagazinepost:https://www.smashingmagazine.com/2015/05/why-the-svg-filter-is-awesome/

Filters

TransformsTransformsallowyoutotranslate,rotate,scale,andskewelements,inthe2Dor3Dspace.TheyareaverycoolCSSfeature,especiallywhencombinedwithanimations.

2DtransformsThe transformpropertyacceptsthosefunctions:

translate()tomoveelementsaroundrotate()torotateelementsscale()toscaleelementsinsizeskew()totwistorslantanelementmatrix()awaytoperformanyoftheaboveoperationsusingamatrixof6elements,alessuserfriendlysyntaxbutlessverbose

Wealsohaveaxis-specificfunctions:

translateX()tomoveelementsaroundontheXaxistranslateY()tomoveelementsaroundontheYaxisscaleX()toscaleelementsinsizeontheXaxisscaleY()toscaleelementsinsizeontheYaxisskewX()totwistorslantanelementontheXaxisskewY()totwistorslantanelementontheYaxis

Hereisanexampleofatransformwhichchangesthe .boxelementwidthby2(duplicatingit)andtheheightby0.5(reducingittohalf):

transform:scale(2,0.5);

transform-originletsussettheorigin(the (0,0)coordinates)forthetransformation,lettinguschangetherotationcenter.

CombiningmultipletransformsYoucancombinemultipletransformsbyseparatingeachfunctionwithaspace.

Forexample:

Transforms

transform:rotateY(20deg)scaleX(3)translateY(100px);

3DtransformsWecangoonestepfurtherandmoveourelementsina3Dspaceinsteadthanona2Dspace.With3D,weareaddinganotheraxis,Z,whichaddsdepthtooutvisuals.

Usingthe perspectivepropertyyoucanspecifyhowfarthe3Dobjectisfromtheviewer.

Example:

.3Delement{

perspective:100px;

perspective-origindeterminestheappearanceofthepositionoftheviewer,howarewelookingatitintheXandYaxis.

NowwecanuseadditionalfunctionsthatcontroltheZaxis,thataddsuptotheotherXandYaxistransforms:

translateZ()

rotateZ()

scaleZ()

andthecorrespondingshorthands translate3d(), rotate3d()and scale3d()asshorthandsforusingthe translateX(), translateY()and translateZ()functionsandsoon.

3Dtransformsareabittooadvancedforthishandbook,butagreattopictoexploreonyourown.

Transforms

TransitionsCSSTransitionsarethemostsimplewaytocreateananimationinCSS.

Inatransition,youchangethevalueofaproperty,andyoutellCSStoslowlychangeitaccordingtosomeparameters,towardsafinalstate.

CSSTransitionsaredefinedbytheseproperties:

Property Descriptiontransition-

property theCSSpropertythatshouldtransition

transition-

duration thedurationofthetransition

transition-timing-

function

thetimingfunctionusedbytheanimation(commonvalues:linear,ease).Default:ease

transition-delay optionalnumberofsecondstowaitbeforestartingtheanimation

The transitionpropertyisahandyshorthand:

.container{

transition:property

duration

timing-function

delay;

ExampleofaCSSTransitionThiscodeimplementsaCSSTransition:

.three{

background:rgba(142,92,205,.75);

transition:background1sease-in;

.four{

.circle:hover{

background:rgba(142,92,205,.25);/*lighter*/

Transitions

SeetheexampleonGlitchhttps://flavio-css-transitions-example.glitch.me

Whenhoveringthe .oneand .threeelements,thepurplecircles,thereisatransitionanimationthateasethechangeofbackground,whiletheyellowcirclesdonot,becausetheydonothavethe transitionpropertydefined.

Transitiontimingfunctionvaluestransition-timing-functionallowstospecifytheaccelerationcurveofthetransition.

Therearesomesimplevaluesyoucanuse:

linear

ease-in

ease-out

ease-in-out

ThisGlitchshowshowthoseworkinpractice.

Youcancreateacompletelycustomtimingfunctionusingcubicbeziercurves.Thisisratheradvanced,butbasicallyanyofthosefunctionsaboveisbuiltusingbeziercurves.Wehavehandynamesastheyarecommonones.

CSSTransitionsinBrowserDevToolsTheBrowserDevToolsofferagreatwaytovisualizetransitions.

ThisisChrome:

Transitions

ThisisFirefox:

Transitions

Fromthosepanelsyoucanliveeditthetransitionandexperimentinthepagedirectlywithoutreloadingyourcode.

WhichPropertiesyoucanAnimateusingCSSAnimationsAlot!TheyarethesameyoucananimateusingCSSTransitions,too.

Here'sthefulllist:

background

background-color

background-position

background-size

border

border-color

border-width

border-bottom

border-bottom-color

border-bottom-left-radius

Transitions

border-bottom-right-radius

border-bottom-width

border-left

border-left-color

border-left-width

border-radius

border-right

border-right-color

border-right-width

border-spacing

border-top

border-top-color

border-top-left-radius

border-top-right-radius

border-top-width

bottom

box-shadow

caret-color

column-count

column-gap

column-rule

column-rule-color

column-rule-width

column-width

columns

content

filter

flex-basis

flex-grow

flex-shrink

font-size

font-size-adjust

font-stretch

font-weight

grid-area

grid-auto-columns

Transitions

grid-auto-flow

grid-auto-rows

grid-column-end

grid-column-gap

grid-column-start

grid-column

grid-gap

grid-row-end

grid-row-gap

grid-row-start

grid-row

grid-template-areas

grid-template-columns

grid-template-rows

grid-template

height

letter-spacing

line-height

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

opacity

outline

outline-color

outline-offset

outline-width

padding

padding-bottom

padding-left

padding-right

padding-top

Transitions

perspective

perspective-origin

quotes

tab-size

text-decoration

text-indent

text-shadow

transform.

vertical-align

visibility

word-spacing

z-index

Transitions

AnimationsCSSAnimationsareagreatwaytocreatevisualanimations,notlimitedtoasinglemovementlikeCSSTransitions,butmuchmorearticulated.

Ananimationisappliedtoanelementusingthe animationproperty.

.container{

animation:spin10slinearinfinite;

spinisthenameoftheanimation,whichweneedtodefineseparately.WealsotellCSStomaketheanimationlast10seconds,performitinalinearway(noaccelerationoranydifferenceinitsspeed)andtorepeatitinfinitely.

Youmustdefinehowyouranimationworksusingkeyframes.Exampleofananimationthatrotatesanitem:

@keyframesspin{

transform:rotateZ(0);

transform:rotateZ(360deg);

Insidethe @keyframesdefinitionyoucanhaveasmanyintermediatewaypointsasyouwant.

InthiscaseweinstructCSStomakethetransformpropertytorotatetheZaxisfrom0to360grades,completingthefullloop.

YoucanuseanyCSStransformhere.

Noticehowthisdoesnotdictateanythingaboutthetemporalintervaltheanimationshouldtake.Thisisdefinedwhenyouuseitvia animation.

ACSSAnimationsExampleIwanttodrawfourcircles,allwithastartingpointincommon,all90degreesdistantfromeachother.

<divclass="container">

<divclass="circleone"></div>

Animations

<divclass="circletwo"></div>

<divclass="circlethree"></div>

<divclass="circlefour"></div>

</div>

display:grid;

place-items:center;

height:100vh;

.circle{

border-radius:50%;

left:calc(50%-6.25em);

top:calc(50%-12.5em);

transform-origin:50%12.5em;

width:12.5em;

height:12.5em;

position:absolute;

box-shadow:01em2emrgba(0,0,0,.5);

.three{

.four{

.three{

.four{

transform:rotateZ(-90deg);

YoucanseetheminthisGlitch:https://flavio-css-circles.glitch.me

Let'smakethisstructure(allthecirclestogether)rotate.Todothis,weapplyananimationonthecontainer,andwedefinethatanimationasa360degreesrotation:

Animations

@keyframesspin{

.container{

Seeitonhttps://flavio-css-animations-tutorial.glitch.me

Youcanaddmorekeyframestohavefunnieranimations:

@keyframesspin{

Seetheexampleonhttps://flavio-css-animations-four-steps.glitch.me

TheCSSanimationpropertiesCSSanimationsoffersalotofdifferentparametersyoucantweak:

Property Description

animation-

namethenameoftheanimation,itreferencesananimationcreatedusing@keyframes

animation-

duration howlongtheanimationshouldlast,inseconds

animation-

timing-

function

thetimingfunctionusedbytheanimation(commonvalues: linear,ease).Default: ease

Animations

animation-

delayoptionalnumberofsecondstowaitbeforestartingtheanimation

animation-

iteration-

howmanytimestheanimationshouldbeperformed.Expectsanumber,orinfinite.Default:1

animation-

direction

thedirectionoftheanimation.Canbe normal, reverse, alternateoralternate-reverse.Inthelast2,italternatesgoingforwardandthenbackwards

animation-

fill-mode

defineshowtostyletheelementwhentheanimationends,afteritfinishesitsiterationcountnumber. noneor backwardsgobacktothefirstkeyframestyles. forwardsand bothusethestylethat'ssetinthelastkeyframe

animation-

play-state ifsetto paused,itpausestheanimation.Defaultis running

The animationpropertyisashorthandforalltheseproperties,inthisorder:

.container{

animation:name

duration

timing-function

iteration-count

direction

fill-mode

play-state;

Thisistheexampleweusedabove:

.container{

JavaScripteventsforCSSAnimationsUsingJavaScriptyoucanlistenforthefollowingevents:

animationstart

animationend

animationiteration

Becarefulwith animationstart,becauseiftheanimationstartsonpageload,yourJavaScriptcodeisalwaysexecutedaftertheCSShasbeenprocessed,sotheanimationisalreadystartedandyoucannotintercepttheevent.

constcontainer=document.querySelector('.container')

Animations

container.addEventListener('animationstart',(e)=>{

//dosomething

},false)

container.addEventListener('animationend',(e)=>{

//dosomething

},false)

container.addEventListener('animationiteration',(e)=>{

//dosomething

},false)

WhichPropertiesYouCanAnimateusingCSSAnimationsAlot!TheyarethesameyoucananimateusingCSSTransitions,too.

Here'sthefulllist:

background

background-color

background-position

background-size

border

border-color

border-width

border-bottom

border-bottom-color

border-bottom-left-radius

border-bottom-right-radius

border-bottom-width

border-left

border-left-color

border-left-width

border-radius

border-right

border-right-color

border-right-width

border-spacing

border-top

border-top-color

border-top-left-radius

Animations

border-top-right-radius

border-top-width

bottom

box-shadow

caret-color

column-count

column-gap

column-rule

column-rule-color

column-rule-width

column-width

columns

content

filter

flex-basis

flex-grow

flex-shrink

font-size

font-size-adjust

font-stretch

font-weight

grid-area

grid-auto-columns

grid-auto-flow

grid-auto-rows

grid-column-end

grid-column-gap

grid-column-start

grid-column

grid-gap

grid-row-end

grid-row-gap

grid-row-start

grid-row

grid-template-areas

grid-template-columns

Animations

grid-template-rows

grid-template

height

letter-spacing

line-height

margin

margin-bottom

margin-left

margin-right

margin-top

max-height

max-width

min-height

min-width

opacity

outline

outline-color

outline-offset

outline-width

padding

padding-bottom

padding-left

padding-right

padding-top

perspective

perspective-origin

quotes

tab-size

text-decoration

text-indent

text-shadow

transform.

vertical-align

visibility

Animations

word-spacing

z-index

Animations

NormalizingCSSThedefaultbrowserstylesheetisthesetofrulesthatbrowserhavetoapplysomeminimumstyletoelements.

Mostofthetimesthosestylesareveryuseful.

Sinceeverybrowserhasitsownset,it'scommonfindingacommonground.

Ratherthanremovingalldefaults,likeoneoftheCSSresetapproachesdo,thenormalizingprocessremovesbrowserinconsistencies,whilekeepingabasicsetofrulesyoucanrelyon.

Normalize.csshttp://necolas.github.io/normalize.cssisthemostcommonlyusedsolutionforthisproblem.

YoumustloadthenormalizingCSSfilebeforeanyotherCSS.

NormalizingCSS

ErrorhandlingCSSisresilient.Whenitfindsanerror,itdoesnotactlikeJavaScriptwhichpacksupallitsthingsandgoesawayaltogether,terminatingallthescriptexecutionaftertheerrorisfound.

CSStriesveryhardtodowhatyouwant.

Ifalinehasanerror,itskipsitandjumpstothenextlinewithoutanyerror.

Ifyouforgetthesemicolonononeline:

font-size:20px

color:black;

border:1pxsolidblack;

thelinewiththeerrorANDthenextonewillnotbeapplied,butthethirdrulewillbesuccessfullyappliedonthepage.Basically,itscansalluntilitfindsasemicolon,butwhenitreachesit,theruleisnow font-size:20pxcolor:black;,whichisinvalid,soitskipsit.

Sometimesit'strickytorealizethereisanerrorsomewhere,andwherethaterroris,becausethebrowserwon'ttellus.

ThisiswhytoolslikeCSSLintexist.

Errorhandling

VendorprefixesVendorprefixesareonewaybrowsersusetogiveusCSSdevelopersaccesstonewerfeaturesnotyetconsideredstable.

Beforegoingonkeepinmindthisapproachisdeclininginpopularitythough,infavourofusingexperimentalflags,whichmustbeenabledexplicitlyintheuser'sbrowser.

Why?Becausedevelopersinsteadofconsideringvendorprefixesasawaytopreviewfeatures,theyshippedtheminproduction-somethingconsideredharmfulbytheCSSWorkingGroup.

Mostlybecauseonceyouaddaflaganddevelopersstartusingitinproduction,browsersareinabadpositioniftheyrealisesomethingmustchange.Withflags,youcan'tshipafeatureunlessyoucanpushallyourvisitorstoenablethatflagintheirbrowser(justjoking,don'ttry).

Thatsaid,let'sseewhatvendorprefixesare.

IspecificallyrememberthemforworkingwithCSSTransitionsinthepast.Insteadofjustusingthe transitionproperty,youhadtodothis:

.myClass{

-webkit-transition:all1slinear;

-moz-transition:all1slinear;

-ms-transition:all1slinear;

-o-transition:all1slinear;

transition:all1slinear;

Nowyoujustuse

.myClass{

transition:all1slinear;

sincethepropertyisnowwellsupportedbyallmodernbrowsers.

Theprefixesusedare:

-webkit-(Chrome,Safari,iOSSafari/iOSWebView,Android)-moz-(Safari)-ms-(Edge,InternetExplorer)-o-(Opera,OperaMini)

Vendorprefixes

SinceOperaisChromium-basedandEdgewillsoonbetoo, -o-and -ms-willprobablygosoonoutoffashion.Butaswesaid,vendorprefixesasawholearegoingoutoffashion,too.

Writingprefixesishard,mostlybecauseofuncertainty.Doyouactuallyneedaprefixforoneproperty?Severalonlineresourcesareoutdated,too,whichmakesitevenhardertodoright.ProjectslikeAutoprefixercanautomatetheprocessinitsentiretywithoutusneedingtofindoutifaprefixisneededanymore,orthefeatureisnowstableandtheprefixshouldbedropped.Itusesdatafromcaniuse.com,averygoodreferencesiteforallthingsrelatedtobrowsersupport.

IfyouuseReactorVue,projectslike create-react-appandVueCLI,twocommonwaystostartbuildinganapplication,use autoprefixeroutofthebox,soyoudon'tevenhavetoworryaboutit.

Vendorprefixes

CSSforprintEventhoughweincreasinglystareatourscreens,printingisstillathing.

Evenwithblogposts.Irememberonetimebackin2009ImetapersonthattoldmehemadehispersonalassistantprinteveryblogpostIpublished(yes,Istaredblanklyforalittlebit).Definitelyunexpected.

MymainusecaseforlookingintoprintingusuallyisprintingtoaPDF.Imightcreatesomethinginsidethebrowser,andIwanttomakeitavailableasPDF.

Browsersmakethisveryeasy,withChromedefaultingto"Save"whentryingtoprintadocumentandaprinterisnotavailable,andSafarihasadedicatedbuttoninthemenubar:

PrintCSSSomecommonthingsyoumightwanttodowhenprintingistohidesomepartsofthedocument,maybethefooter,somethingintheheader,thesidebar.

Maybeyouwanttouseadifferentfontforprinting,whichistotallylegit.

IfyouhavealargeCSSforprint,you'dbetteruseaseparatefileforit.Browserswillonlydownloaditwhenprinting:

<linkrel="stylesheet"

CSSforprint

src="print.css"

type="text/css"

media="print"/>

CSS@mediaprintAnalternativetothepreviousapproachismediaqueries.Anythingyouaddinsidethisblock:

@mediaprint{

/*...*/

isgoingtobeappliedonlytoprinteddocuments.

LinksHTMLisgreatbecauseoflinks.It'scalledHyperTextforagoodreason.Whenprintingwemightlosealotofinformation,dependingonthecontent.

CSSoffersagreatwaytosolvethisproblembyeditingthecontent,appendingthelinkafterthe <a>tagtext,using:

@mediaprint{

a[href*='//']:after{

content:"("attr(href)")";

color:$primary;

Itarget a[href*='//']toonlydothisforexternallinks.Imighthaveinternallinksfornavigationandinternalindexingpurposes,whichwouldbeuselessinmostofmyusecases.Ifyoualsowantinternallinkstobeprinted,justdo:

@mediaprint{

a:after{

content:"("attr(href)")";

color:$primary;

Pagemargins

CSSforprint

Youcanaddmarginstoeverysinglepage. cmor inisagoodunitforpaperprinting.

@page{

margin-top:2cm;

margin-bottom:2cm;

margin-left:2cm;

margin-right:2cm;

@pagecanalsobeusedtoonlytargetthefirstpage,using @page:first,oronlytheleftandrightpagesusing @page:leftand @page:right.

PagebreaksYoumightwanttoaddapagebreakaftersomeelements,orbeforethem.Use page-break-afterand page-break-before:

.book-date{

page-break-after:always;

.post-content{

page-break-before:always;

Thosepropertiesacceptawidevarietyofvalues.

AvoidbreakingimagesinthemiddleIexperiencedthiswithFirefox:imagesbydefaultarecutinthemiddle,andcontinueonthenextpage.Itmightalsohappentotext.

page-break-inside:avoid;

andwrapyourimagesina ptag.Targeting imgdirectlydidn'tworkinmytests.

Thisappliestoothercontentaswell,notjustimages.Ifyounoticesomethingiscutwhenyoudon'twant,usethisproperty.

CSSforprint

DebugtheprintingpresentationTheChromeDevToolsofferwaystoemulatetheprintlayout:

Oncethepanelopens,changetherenderingemulationto print:

CSSforprint

table of contents · table of contents preface introduction to css a brief history of css adding...

Documents

css selectors: element, class, id

theme custom css - questback · 4 css reference below are...

css: selectors and the box model

css selectors

css - gitlab · css clever use of selectors sometimes,...

simple techniques for customizing a digital …...– css is...

developing web applications with html and css “selectors...

introduction to css. what is css? cascading style sheets ...

cascading style sheets robin burke ect 270. outline midterm...

css: cascading style sheets - elite.polito.it · summary...

你必須知道的css選擇器 must-know css selectors

html review css review css selectors css positioning ›...

cmpt 165 - simon fraser university€¦ · css highlights...

css foundations in-depth - miracosta college ·...

using cascading style sheets css structure. goals understand...

css selectors cheat sheet

css level 4 selectors - environments for...

13. more css - wordpress.com · 2016-10-30 · adding css...

css fundamentals: selectors and properties

pseudo css selectors