css awesomeness: css for beginners

1 | P a g e

StopEverything!IHaveaPresentForYou!OMG!OMG!OMG!!Aren'tyouexcited?!Ilovepresents!ThisbookwillhelpyoulearnCSS,butpersonallyIprefervideosoverbooks(sinceit’seasierifsomeonedoesalltheworkofreadingforyou,don’tyouthink?)Youcanwatchabunchofvideosandinnotimeyouwillbeanexpert.So,Itookthisbook,andblendeditallintoabite‐sizedvideocourse.Ifyouwillwatchit,youwillknoweverybasicbuildingblockofCSSinnotime!Neat,huh?Andbecauseyouhavepurchasedthisbook,Iwillgiveyou50%offthisvideocourse.Awesome,right?So,whatareyouwaitingfor?Grabthevideoshere:http://basiccss.gilad.me/discount50/IntroductionHeyGuys!WelcometotheCSSAwesomenessCourse,whereyouwilllearntowritethebasicsofCSS,theawesomeway.MynameisGilad,andIwillleadyouthroughthisamazingcourse!EvenbeforeIwasacartooncharacter,Ibeganmycareerasawebdeveloper.Soonafterward,Itransitionedtoentrepreneurshipandfoundedmyveryownstartupcompany.Currently,IworkatthecompanyI’vefoundedfromscratch,andalsoIdowhatIlovethemost:teachingyouguys!IdesignedthiscourseforanyoneseekingtolearnbasicCSSandbeginacareerasarockstarwebdeveloper(aswellasanybodywhojustlovestoexpandtheirknowledge.)Bytheendofthecourse,youwillhavearock‐solidknowledgeofallCSSbuildingblockssuchas:

● Selectors● Width&height● Theboxmodel● CSSbackgrounds● Andmany,manymore...

Oh!Wewillevenlearnhowtousethealmightydevelopertools!IwillteachyouthelatestversionofCSS3bythestandardsoftheW3CAssociation.Thesestandardsareusedbyallthemajorcompaniesintheworld.NotonlywillIcoverallofthesetopics,butIwillalsogiveyouanopportunitytopracticethembygivingyouapopquizeverynowandthen.TheidealstudentforthiscourseisanybodywhowantstoexpandtheirknowledgeofCSSorgetalegupinthewebdeveloperworld.

2 | P a g e

TheonlyprerequisitesnecessarytoenrollisabasicknowledgeofHTMLandanopen‐mindtomysillyjokes!Youarefreetotakealookatthecoursedescription,andIlookforwardtomeetingyouinside.WhylearnCSSanyway?WhenIfirstlearnedaboutwebdevelopment,Iwantedtobuildthenextbigthingintheinternetworld,whichisclearly:GreenStripesRacoonWebsite.IarmedmyselfwithabitofHTMLknowledgeandstartedoutimmediately!Iaddedasnippetofcodehere,alittlebitofHTMLthere,andvoila!!..Mywebsitelookedhideous!(yay!)Isteppedbackabit,andthenlookedatotherbigwebsitesoutthere.Inoticedthattheywereusingawesomecolors,fontsandborders..andlotsofothertricksIdidn’tknowabout.Iinvestigatedforawhole….2secondsanddiscoveredtheywereusingamagicalcodelanguage:“CSS.”Ohwow..Inthissecond,Iknewmylifepurposeforthenextweek:learningCSS(theawesomeway...)TherearemorereasonstolearnCSS,forsure...likeaddingcoolanimations,beingmobile‐friendly,andevencustomizingyourcontentmoreeasily.WewillcoverALLofthoseinthiscourse...andIwillmakesureyouwillgetyourdoseofbadjokes!WhatisCSS?CSSisshorthandforCascadingStyleSheets(leaveittothemarketingdudes...)andquiteboldlyinchargeofallthedesignofyourdocument.IfHTMListhebigguywhoisinchargeofthestructure,thenCSSisthehipsterdesignerwholovestomakeeverythingpretty.Itwillmakeyourfonts,colors,margins,borders,heightandwidth,backgroundimagesandalltheprettystuffyoucanthinkof..DoIneedtoknowanythingbeforeIwriteCSS?Althoughit’saCSScourse,wewilluseHTMLinthiscourse,aswell.So,beforedivingintothisbook,youwillneedtoarmyourselfwithalittlebitofHTMLknowledge.WewillwritedownthestructureofourexamplesthroughHTMLandthendesignitwithourawesomelynewCSSskills!ForallmyexamplesinthiscourseIwilluseNotepad++,whichisacompletelyfreetexteditor.

3 | P a g e

(bytheway,youcangrabithere:http://notepad‐plus‐plus.org/download)However,ifyouarehappentobeallergictomysuggestions,youcanalwaystryothersoftware.Iwon’tjudgeyou,ipromise!*whispering*Iwill!...*whispering*SetupyourCSSInCSSwehaveseveralwaystoplaceourstylinginsideofourproject.Themostunhealthyway,istheinlinemethod:

<p style=”CSS CODE”> My Zebra has no legs.. </p> Asyoucansee,wehaveastyleattribute,theninthevalueoftheattribute,wehaveourCSScode.Thismethodisnotideal.Letmesetanexample,soyouwillseewhy:

<p style=”SAME CSS CODE”> My Zebra has no legs.. </p> <p style=”SAME CSS CODE”> But it has </p> <p style=”SAME CSS CODE”>.. </p>

Youcanseethatyouclearlyhaveaproblemhere,sinceyouwrotethesameCSScode3times.Ifyouarealazypersonlikemyself,let’sseehowyoucansolvethisproblemusingtheothermethodwe’vegot:<!DOCTYPE html> <html> <head> <title> Zebra Website </title> <style> ..CSS CODE TO CLASS.. </style> </head> <body> <p class=”CSS CONNECTED”> My Zebra has no legs.. </p>

<p class=”CSS CONNECTED”> But it has </p> <p class=”CSS CONNECTED”> .. </p>

</body>

4 | P a g e

</html> Inthisexample,wecanseethatweclearedalltheunhealthyinlineCSSmethodfromtheptagandreplaceditwithaclass,thenconnectedjustoneCSScodeinthestyletag,upintheheadtag.Soeventuallywesavedabitofenergybyonlymakingourstatementonce.Uh‐oh!!...We’vegotanotherlazy‐problem…Let’ssaywesetourhomepagewiththekindofCSSwejustwrote,andthenwewanttowriteanotherpage,say..our“contactus”withthesameCSScode?WewouldneedtowritedownallofourCSScodeagain?!Geez!Toomuchworkforme,sir!Inthiscase,we’vegotanothertrickupoursleeve:CSSexternallink.Wewillmakeanewfilewitha“.css”extension,thenlinkittoeverywebpageinwhichwewantourCSStotakeplace:<head> <link rel=”stylesheet” type=”text/css” href=”style.css” /> </head>Onthe“href”attribute,writeyourfilepath,andthat’showyousetupyourpage(theawesomeway…)CSSSelectors

♫..Wearegoingtolearnsome..CSS..Selectors...Woo...Hoo…♫So..whatdoyousayaboutmyCSSSelectorsong,huh?Pretty‐pretty..amazing,eh?IwasthinkingaboutsubmittingittoMTV’sTop10oneofthesedaysandbeatingJustinBieber!Thatwouldbeagreatday...tohumanity,even.Anyway,CSSSelector!Yes!Thisisthedayyouaregoingtolearnoneofthegreatest(andmostvaluable)lessonsyoucanlearninCSSbuildingblocks:CSSSelectors.WhatisCSSSelector?Selectoris(quiteself‐explanatory)aCSSwaytoselectyourHTMLElementandsaytoyourbrowser,“Alrightbrowser,wouldyoubeasport,andgrabthiselementforme?Oh,thenmakeitblue!”ThestructureoftheSelectorisveryeasy:first(optional,)wehaveourtypeofselector(mostofthetime,beginningwithIDorCLASSselectors;)thenwehavethenameoftheselector;next,weopenourcurlybrackets;inside,wehaveourCSSdeclarations!Thedeclarationsaremadeofpropertyandvalue.Wetakeeachdeclarationapartwithacolonsign,andendeachwithasemicolon.

5 | P a g e

That’sit!That’sallyouneedtoknowaboutCSSSelectors.AndmyCSSselectorsong,ofcourse..♫..CSS..Selectors...Woo..Hoo…♫IDSelector&ClassSelectorInthisexampleweintroducetheselectortypeID,butwealsohaveaClassSelector.Whatisthedifferencebetweenthem,youask?Imaginethatwearehaving3pelementsinourdocument.Eachandeveryoneofthemrepresentsamemberofmyleastfavoritefamilyinthewholeworld:TheKardashianFamily!Let’swriteitdowninourtexteditor:<p >Kim </p> <p >Rob </p> <p >Kourtney </p> Now,wecancallthembytheirnames:Kim,Rob,Kourtney(withaK,ofkourse..)Bydoingso,weareaccessingaparticularmemberoftheKardashianfamily,andwecanattachanidattribute:<p id=”kim”>Kim </p> <p id=”rob”>Rob </p> <p id=”kourtney”>Kourtney </p> Soifwewantto,let’ssay,lockKiminaborder,wecanselectKim’sID,andcreateaborderaroundhername.#kim{ border: 1px solid red; } But,ifwewouldliketomakebordersofalltheKardashian’sfamilymember?Willweselectallofthembyname?!Nahh..wearetoolazyforthattask,aren’twe?!Instead,wewouldaddaclassattributeforthem!

6 | P a g e

Likethat:<p id=”kim” class=”kardashian”>Kim </p> <p id=”rob” class=”kardashian”>Rob </p> <p id=”kourtney” class=”kardashian”>Kourtney </p> NowwewilleditourCSSfile:.kardashian{ border: 1px solid green; } NotethedifferencebetweenclassandID‐ifwewanttoaccessaclass,wehavethatlittledot,andifwewanttoaccessanid,wehavethatpoundsign..Easy,huh?NowwecanlockalltheKardashiansinourshinyredborder..Andthishardtaskisachievedonlywithonesnippetofcode!!OurveryownfirstprojectDoyourememberafewlessonsago,ItoldyouaboutmyfirstattempttobuildthenextbigthingontheinternetwhichistheGreenStripesRacoonWebsite?Doyou??Well,todaywewilltryagaintoachievethiskindofworldwiderecognitionandbuildourfirstGreenStripesRacoonWebsite!Sobeforewedo,wewillsetupourprojectrealnice,createacssfolderinthemainfolder,andcreatea.cssfilecalled“style.”Then,inyourmainfolder,createan.htmlfilecalled“index.”Insideofit,type:<!DOCTYPE html> <html> <head> <title> </title>

<link rel=”stylesheet” type=”text/css” href=”style.css” /> </head> <body> </body> </html>

7 | P a g e

Nowweareallset!Let’sgetstarted!Bytheway,justbecauseI’mmakingtheGreenStripesRacoonWebsite,doesn’tmeanyoucan’tmakewhateverwebsiteyouwant!Whatkindofwebsiteareyoumaking?TypeyouranswerintheQandAsectioninUdemy,andshareitwithme!.CSSwidthandheightFirstthinginourGreenRacoonwebsite,is...tohaveaGreennavigationtop.So,let’screateaDivElement.ADivElementisactinglikeasectionwithinourHTML,andwecanmanipulateitquitesmoothlywithourCSSskills.I’llcreateadiv:

<div> </div> Then,Iwanttodefineitswidthandheight,soIwillcreateaclassattribute,andcallit“top‐nav”:

<div class=”top-nav”> </div> Andinsidemycssfile,Iwantmytopnavigationbartobeverywide(sidetoside,)andtheheighttobe90pixels.soIwillwritethisdown::.top-nav {

width: 100%; height: 90px;

} Saveit,refreshit,andvoila…nothingshows..Whatgives?!Maybebecausewedon’thaveanycolorforourtopnavigationbar?BackgroundsTomakeourgreendivpop,wewillneedtocolorit(withthecolorgreen,Iguess..)Inyourcssfile,addtoyourtop‐navclassthisline: background-color: green; Ifyouwanttobemoreparticular,youcan,instead,gowithahexadecimalcolorlikethis:

background-color: #F296D7;

8 | P a g e

Bytheway,Iusethecolorpicker.comwebsite,ifyouwanttobemorepickywithyourcolors.Wecanalsogetabackgroundimage,likethis:

background-image: url(‘../img/bg.jpg’); Andthat’showyoudobackgrounds!Cool,huh?!CSSboxmodel(andabonus!Al…right!)Ifyouwillsaveyourdocumentandrefreshyourpage,youcanclearlyseethatwehaveamarginrightonour“top‐nav”class.Andthat'sduetoourcssbox‐model.Now,bearwithme,becausemostofthepeoplewholearnthisthingtendtokillthemselvesinthislesson.Mystudents,inparticular,trytodosoaftertheyhearoneofmyjokes,comingjustbeforetheyareintroducedtotheboxmodel.Therefore,Ineverlearnhowtheywouldreacttotheboxmodel.Nevertheless,I’lltrytodomybest:

Forthisdemonstration,Iwillgetthehandofthemandatoryptag.Let’swriteinsideofit:“I’vegotafeelingwearenotinKansasAnymore”witha“toto”id.

<p id=”toto”> I’ve got a feeling we are not in Kansas Anymore </p> AlmosteveryelementinHTMLhasasecret4layersinsideofit.Wehaveourcontent,whichisourtext(thefirstlayer.)Let’shaveitcoloredyellow….justtomakeitpopoutofthescreen.#toto{background-color: yellow; } Tothistextwecanaddagreenborder(thesecondlayer),3pixelswidesolidline.

9 | P a g e

#toto{background-color: yellow; border: 3px solid green;} Nowwehave2moreofbothsidesoftheborder,wehavethepaddinglayer,whichliesontheinnersideoftheborder,#toto{

background-color: yellow; border: 3px solid green; padding: 20px;

} Andalsothemargin,whichliesontheoutersideoftheborder.#toto{

background-color: yellow; border: 3px solid green; margin: 20px; padding: 20px;

} That’sit!Thatwasn'tsobad,wasit?Nowtoaddressourproblemearlier,allweneedtodoisplacea margin:0;toourbodyelement(becauseourbrowserhasapresetofmarginandpaddingforsomereason..,)andwearegoodtogo!

body{ margin: 0; } Here’sausefultip!IfyouareonPC,usingChrome,FirefoxorevenIE,youcanpressF12,thenhoverthecursoroveryourowncodelinesthroughyourbrowser.Theywillshowyoureallygreatinput!Also,youcanplayaroundwithyourCSSandHTMLcodeinyourbrowser!Impressive,huh?CSSfloat(andotherstuff..)NowthatwehaveourTopNavigationsetandready,weshouldpopulateitwithalittlebitofflair.Let’ssaywewanttohavebannerandalogo...andnavigationbuttons...andasquirrel(youknow,justincase!)Solet’sjustsaywewantthreedivstorepresenteverysectionweneed:logo,banner,navigation.Then,orderthemhorizontally.

10 | P a g e

Let’strythisone:<div class=”logo” ></div> <div class=”banner”></div> <div class=”nav-wrapper”></div> Nowwewillsetwidthandheightforeachandeveryoneofthem.Also,forthesakeofbeingsane,let’scolorthemindifferentcolors,sowecanseethemonthescreen.Wewillchangethecolorafterwards. .logo{width: 250px; height: 90px;background-color: green; } .banner{width: 350px; height: 90px;background-color: yellow; } .nav-wrapper{width: 370px; height: 90px;background-color: orange; } WHAT??Oh,man…whatgives?!Howcomemydivsdecidedtostackoneachotherlikeabunchofbananas?Well..that’sbecausedivsbehavior,bydefault,istotakeallofthewidththey’vegot,sothenextdivinlineisunderthelastoneandsoon..Howcanweresolvethat?Enters..float!*trumpets*Withfloatyoucanpushyourelementtooneside...andmakeroomfortheother.Addfloat: left;toyourlogoandbanner,andfloat: right;tothenav‐wrapper.And…yeah,baby!We’vegotit!Andnowwecanerasetheuglybackgroundcolorthatwe’vegotfordraft..Now,let’strytotakecareofournavigationbuttons.Wewanttocreatethreebuttonsandorderthemhorizontally,thendesignthemabit.Solet’screatethreeunorderedlistitems,withalinkinsideofournav‐wrapperdiv.<div class=”nav-wrapper”> <ul>

11 | P a g e

<li> <a href=”index.html” class=”nav-btn”>Homepage</a> </li> <li> <a href=”gallery.html” class=”nav-btn”>Racoon’s

Gallery</a> </li> <li> <a href=”contact.html” class=”nav-btn”>

Contact a random Racoon</a> </li>

</ul>

</div> Nowwecanstylethemabit:Firstthingfirst!Ihavetheweirdlybulletsthatcomeasbundlewiththelistitems,soIwillhavethemerased.Iwillselecttheultagdirectly,andthenwritelist‐style‐typeasnone,andbam!Gone!I’mawesome,Itellyou!Then,wewillsetournav‐btnwithalittlebitofpaddingtohaveourbuttonswithalil’bitoffluff.Wewillcoloritwithabitofgreenishcolor.I’llsetallofthebuttonswithfloatleft,sotheywillorderhorizontally,andmaybeaddtoallofthemalil’bitofmarginleftsotheywillhavespacesbetweenthem.Andmaybe…havethetextcolorwhitewithalil’bitofborderonthebottomofthebuttons,toaddabitofflair...nav-btn{

padding:5px; background-color: #e698a5; float: left; text-decoration: none; margin-left: 10px; color: white; border-bottom: 2px solid #c74E80;

}

12 | P a g e

ul{ list-style-type: none;} Whatdoyousayaboutthat,huh?OurGreenStripesRacoonwebsitenavigationisallset!CSSfontsI’mgettingthefeelingthatwe’renotreallyhappywiththefontwearehavinghere..Sotofixthat,weneedtounderstandwhatwewant.Wewantourwebsitetobeconsistentwithitsfont,sowewillselectthebodyelement,andtypefont‐family:arial;body{ font-family: arial;} Let’sprogramtogether!Thatwassomuchfun!Ihadablast!!NowthatyouknowthebuildingblocksofCSS,youcancontinueyourselfandtrytouseallthestuffwejustlearned.Bytheway,therearemanypropertiesinCSS,morethanwecanthinkof,soI’mleavingyouafreecheatsheetwithahugeamountofCSSpropertiesandwhattheycandoforyou.Nowwhat?Congratulations!Youaccomplishedthiscourse,youheardlotsofbadjokesinthisbook,andyetyou’vemadeit!I’mveryproudofyou!Youmightaskyourself:NowthatI’veaccomplishedmyfirstCSScourse,whatshouldIdo?HowcanIimprovemywebdevelopingskills?Well,myyoungpadawan,it’snowtimetocombineyourHTMLandCSSskillswithsomeJavascript!

13 | P a g e

IdohaveaJavascriptcoursejustforyou,andbecauseyoupurchasedthisbook(orincompensationformybadjokes,)Iwillgiveyou50%offallofmycoursesinUdemy.Justemailmeat:http://basiccss.gilad.me/discount50/andaskforthediscount!

CSSPROPERTIES

ColorProperties:

Property Description Browsers

color Setsthecoloroftext all

opacity Setstheopacitylevelforanelement Neweronly

Backgroundproperties:

Property Description Browsers

background Ashorthandpropertyforsettingallthebackgroundpropertiesinonedeclaration

all

background‐color Specifiesthebackgroundcolorofanelement all

background‐image Specifiesoneormorebackgroundimagesforanelement

all

background‐position Specifiesthepositionofabackgroundimage all

background‐repeat Setshowabackgroundimagewillberepeated all

14 | P a g e

Bordersproperties:

Property Description Browsers

border Setsalltheborderpropertiesinonedeclaration all

border‐bottom Setsaborderinthebottomoftheelement all

border‐top Setsaborderinthetopoftheelement all

border‐right Setsaborderontherightoftheelement all

border‐left Setsaborderontheleftoftheelement all

border‐radius Makesyourborder’selementcurvy Neweronly

Boxproperties:

Property Description Browsers

width Setsthewidthofanelement all

height Setstheheightofanelement all

bottom Specifiesthebottompositionofapositionedelement

all

top Specifiesthetoppositionofapositionedelement

all

left Specifiestheleftpositionofapositionedelement

all

right Specifiestherightpositionofapositioned all

15 | P a g e

element

display SpecifiesifacertainHTMLelementwillbedisplayed

all

float Specifieswhetherornotaboxshouldfloat all

margin Setsallthemarginpropertiesinonedeclaration all

margin‐bottom Setsthebottommarginofanelement all

margin‐top Setsthebottommarginofanelement all

margin‐left Setstheleftmarginofanelement all

margin‐right Setstherightmarginofanelement all

padding Setsallthepaddingpropertiesinonedeclaration

all

padding‐bottom Setsthebottompaddingofanelement all

padding‐top Setsthetoppaddingofanelement all

padding‐left Setstheleftpaddingofanelement all

padding‐right Setstherightpaddingofanelement all

TextandFontproperties:

Property Description Browsers

text‐align Specifiesthehorizontalalignmentoftext all

text‐decoration Specifiesthedecorationaddedtotext all

word‐spacing Increasesordecreasesthespacebetweenwordsinatext

all

font‐family Specifiesthefontfamilyfortext all

font‐size Specifiesthefontsizefortext all

font‐weight Specifiestheweightofafont all