MoreCSSCS115ComputingfortheSocio-TechnoWeb

Instructor:BrianBrubach

Announcements

• Checkgooglegroupsmail• Assignment2posted,duedatepushedtoFriday• Assignment0feedbackout

Classicwebpage

Classicwebpage

Classicwebpage

Classicwebpage

CSSColors

• Canusepredefinedcolors(e.g.,yellow,white,red,purple,blue).• Canspecifyacolorbythered,greenandbluecomponents• Thefollowingareequivalent:• red• rgb(255,0,0)• #ff0000

• CRGBAaddsalphachanneltospecifytheopacityforacolor• RGBAcolorspecification– rgba(RED,GREEN,BLUE,ALPHA)• Alphavalueof0(transparent)to1.0(opaque)• E.g.,rgba(125,125,125,0.5);

• References:http://www.w3schools.com/css/css3_colors.asp

Numberbases

• Decimalà Base10(e.g.2375)• Whatpeopleuse,why?

• Binaryà Base2(e.g.100110)• Whatcomputersuse

• Hexadecimalà Base16(a4f90)• HTMLcolorsamongotherthings

• Octalà Base8• Let’sseesomeexamplesonthedoccam

Hexadecimal

• Eachdigitisthecoefficientforapowerof16• Needsingledigitslargerthan9• a=10,b=11,c=12,d=13,e=14,f=15

• Eachdigitisthecoefficientforapowerof16• Example:4-digithexnumber• Hexadecimalcolors• Three2-digithexnumbers• #12fe9b• Sameasrgb(18,254,155)

b4fd

16# 16$ 16% 16&

𝑏×16# + 4×16$ + 𝑓×16% + 𝑑×16&11×4096 + 4×256 + 15×16 + 13×1

= 46333

SettingSize

• Lengthunits- centimeters(cm),millimeters(mm),etc.• Whitespacecannotappearbetweennumberandtheunit,• Twotypesoflengthunits:• Relative(e.g.,em,rem)• Absolute(e.g.,cm,pt,pc)

• Relative• emà Relativetothesizeofthecurrentfont• 3emà 3timessizeofcurrentfont• http://www.sitepoint.com/power-em-units-css/

• Preferredà relativeandpercentages• http://www.w3schools.com/cssref/css_units.asp

CSSComments

• Commentsà Surroundedby/**/• Youcanusethemtodisablestyles

Moreonkindsofselectors

• ClassSelectorsà Allowustoapplythesamerulestomanyelements• Usewhenyouneedtoapplyastylemanytimesinyourdocument• Createdwithaperiod(alsoknownasfullstop)

• IDSelectorsà Similartoclassselectorsbutappearonlyonceinthedocument• Usedwhenyouneedtoapplyastyleonlyonceinyourdocument• Createdusing#

Moreonkindsofselectors

• TypeSelectorsà ThosebasedonthenameofanHTMLtag(e.g.,p,table,etc.)• p{color:red;}

• Pseudo-classesà attachedtoselectorstospecifyastate• Fourpopularpseudo-classesare:• a:linkà initialcolorofalink• a:visitedà colorforavisitedlink• a:hoverà colorwhenmousehoveroverlink• a:activeà colorduringtheclickingofthelink• Orderisimportant(LoVeHAte)

MoreonKindsofSelectors

• Descendantselector• Overridethetype,class,andidselectorstyles• Typicallywithtwoelementswherethesecondisadescendant• Exampleà lia{font-size:2em}

• Universalselector• Appliestoallelements• Example:*{font-family:arial,Helvetica;}

• Pseudo-elements• Allowsyoutostyleanitemthatisnotmarkedbyelements• Twopseudo-elementexamplesà :first-letterand:first-line

Someselectorexamples

• a[title]{}à Alinkwithatitleattribute• .myPrefStyle{}à AnyelementswiththeclassmyPrefStyle (sameclassnamecanappearinmanyelements)• #mySchedule {}à AnelementwithidmySchedule (onlyoneelementonthepage)• div.myPrefStyle{}à AdivwiththeclassmyPrefStyle• div#mySchedule{}à AdivwiththeidmySchedule• divtable{}à Atablewithadivancestor• input[type=“submit”]{}à Aninputwithatypeattributethathasthevaluesubmit

Boxmodel

Border

Padding

Content

Margin

Marginedge

Borderedge

Paddingedge

Contentedge

Boxmodel

• CSSboxmodelà boxaroundanHTMLelementwiththefollowingcomponents:margin,border,padding,content• Boxmodelallowustodefinespacebetweendifferentelements• Foursectionscanbeidentified:• Contentà whatliesinthemiddleofthebox(text,image,etc.)• Paddingà surroundsthecontent• Borderà surroundsthepaddingandrepresentstheboxborder• Marginà surroundstheborder

• Noteà Needtospecifyaborder-styleforbordertoappear

Boxmodel

Border

Padding

Content

Margin

Marginedge

Borderedge

Paddingedge

Contentedge

Boxmodelpaddingandmargin

• Youcanadjustindividualpadding/marginpropertiesbyusing:• padding-bottom,padding-left,padding-top,padding-right• margin-bottom,margin-left,margin-top,margin-right

• Themargins,borders,padding,andbackgroundpropertiesofblockelements(e.g.,body,p,etc.)arenotpassedtotheirchildblock-levelelements

Shorthandproperty

• ShorthandPropertyà allowsyoutospecifyseveralpropertiesbyusingonlyone• Ifyoudon’tspecifyoneofthepropertiesadefaultvaluewillbeused• Commonlyusedshorthandproperties• background• font• list-style• margin• border• padding

• Exampleà border:2emsolidgreen;

Backgroundproperties

• background-color• background-imageà locationofimage• background-repeatà howimagerepeats.Possiblevaluesforrepetition:• no-repeatà oneinstanceoftheimage• repeatà tile• repeat–yà repeatsonthey-axis(repeat–xà repeatsonthex-axis)

• background-attachmentà indicatesattachmentoftheimagetothecontainingelement.Possiblevaluesare:• scrollà defaultvalue• fixedà imagewillstaystationaryasthescrollingtakesplace

• background-positionà top,bottom,center,left,right(combinationsvalid)

Genericfontfamilies

• sans-serifà (e.g.,Verdana,Helvetica,Arial)• serifà (e.g.,TimesNewRoman,Georgia,Times)• monospaceà (e.g.,Courier,MSCourierNew)• cursiveà (e.g.,LucidaHandwriting)• fantasyà (e.g.,Whimsey,ComicSans)• Browsercanchooseanavailablefontfromthatfamily