css awesomeness: css for beginners
TRANSCRIPT
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