W02 - Threre is, There Are, Some, Any, Preposition of Place 2
More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element...
Transcript of More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element...
![Page 1: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/1.jpg)
MoreCSSCS115ComputingfortheSocio-TechnoWeb
Instructor:BrianBrubach
![Page 2: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/2.jpg)
Announcements
• Checkgooglegroupsmail• Assignment2posted,duedatepushedtoFriday• Assignment0feedbackout
![Page 3: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/3.jpg)
Classicwebpage
![Page 4: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/4.jpg)
Classicwebpage
![Page 5: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/5.jpg)
Classicwebpage
![Page 6: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/6.jpg)
Classicwebpage
![Page 7: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/7.jpg)
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
![Page 8: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/8.jpg)
Numberbases
• Decimalà Base10(e.g.2375)• Whatpeopleuse,why?
• Binaryà Base2(e.g.100110)• Whatcomputersuse
• Hexadecimalà Base16(a4f90)• HTMLcolorsamongotherthings
• Octalà Base8• Let’sseesomeexamplesonthedoccam
![Page 9: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/9.jpg)
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
![Page 10: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/10.jpg)
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
![Page 11: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/11.jpg)
CSSComments
• Commentsà Surroundedby/**/• Youcanusethemtodisablestyles
![Page 12: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/12.jpg)
Moreonkindsofselectors
• ClassSelectorsà Allowustoapplythesamerulestomanyelements• Usewhenyouneedtoapplyastylemanytimesinyourdocument• Createdwithaperiod(alsoknownasfullstop)
• IDSelectorsà Similartoclassselectorsbutappearonlyonceinthedocument• Usedwhenyouneedtoapplyastyleonlyonceinyourdocument• Createdusing#
![Page 13: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/13.jpg)
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)
![Page 14: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/14.jpg)
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
![Page 15: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/15.jpg)
Someselectorexamples
• a[title]{}à Alinkwithatitleattribute• .myPrefStyle{}à AnyelementswiththeclassmyPrefStyle (sameclassnamecanappearinmanyelements)• #mySchedule {}à AnelementwithidmySchedule (onlyoneelementonthepage)• div.myPrefStyle{}à AdivwiththeclassmyPrefStyle• div#mySchedule{}à AdivwiththeidmySchedule• divtable{}à Atablewithadivancestor• input[type=“submit”]{}à Aninputwithatypeattributethathasthevaluesubmit
![Page 16: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/16.jpg)
Boxmodel
Border
Padding
Content
Margin
Marginedge
Borderedge
Paddingedge
Contentedge
![Page 17: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/17.jpg)
Boxmodel
• CSSboxmodelà boxaroundanHTMLelementwiththefollowingcomponents:margin,border,padding,content• Boxmodelallowustodefinespacebetweendifferentelements• Foursectionscanbeidentified:• Contentà whatliesinthemiddleofthebox(text,image,etc.)• Paddingà surroundsthecontent• Borderà surroundsthepaddingandrepresentstheboxborder• Marginà surroundstheborder
• Noteà Needtospecifyaborder-styleforbordertoappear
![Page 18: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/18.jpg)
Boxmodel
Border
Padding
Content
Margin
Marginedge
Borderedge
Paddingedge
Contentedge
![Page 19: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/19.jpg)
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
![Page 20: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/20.jpg)
Shorthandproperty
• ShorthandPropertyà allowsyoutospecifyseveralpropertiesbyusingonlyone• Ifyoudon’tspecifyoneofthepropertiesadefaultvaluewillbeused• Commonlyusedshorthandproperties• background• font• list-style• margin• border• padding
• Exampleà border:2emsolidgreen;
![Page 21: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/21.jpg)
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)
![Page 22: More CSScs115/slides/W02-02-MoreCSS.pdfBox model • CSS box model à box around an HTML element with the following components: margin, border, padding, content • Box model allow](https://reader036.fdocuments.in/reader036/viewer/2022062607/6025af8943d12c18fd7a7413/html5/thumbnails/22.jpg)
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