iLab HTML-CSS Level 3 Slides.pdf
iLab HTML-CSS Level 3 Slides.pdf
iLab HTML-CSS Level 3 Slides.pdf
You also want an ePaper? Increase the reach of your titles
YUMPU automatically turns print PDFs into web optimized ePapers that Google loves.
<strong>HTML</strong>/<strong>CSS</strong> <strong>Level</strong> 3:<strong>CSS</strong> Layouts
OVERVIEW
To complete this workshop...You should have completed the level 1and level 2 html/css workshops
This workshop will coverLinking to an external style sheetAn overview of the design processFixed vs. liquid layoutsAnnotated mock-upsPresentation layer vs. content layerAdding a banner graphicCreating a simple two-column layoutCreating a simple three-column layoutTwo methods for clearing floats:Turing a list into a horizontal navigation bar
OBJECTIVE
Using html and css, you will be able tocreate a web page that when viewed in a webbrowser has a header image and site title,horizontal navigation with hover effect andtwo-column content and sidebar area withstyled widgets and a three-columnfunctional footer.
ReviewCascading Style SheetsandPrecedence
Three Types of Style SheetsInlineEmbeddedExternal
Link to externalstyle sheet
<strong>CSS</strong> Shorthand ReviewOrder:marginTopRightBottomLeft
Centering a Fixed Layout Page#id { margin: 0 auto }
<strong>CSS</strong> Propertiesbackground-imageAllows you to use an image as the background of and id, element orclassbackground-image: url(path_to/image.jpg)
<strong>CSS</strong> Shorthandbackground#id {background: url (path_to/image.jpg) no-repeat}background-imagepropertybackground-repeatproperty
#wrapperTwo-Column Box Model#banner#sidebarwidth: 250pxpadding: 10pxfloat: left#contentwidth: 655pxfloat: right#footer
Three-Column Box Model#footer width: 960px; padding: 10px#two_col_wrapper width: 623px; float: left#ftr_left#ftr_middle#ftr_rightwidth: 306pxwidth: 306pxwidth: 306pxfloat: leftfloat: rightfloat: right
Other <strong>CSS</strong> Selectorspseudo class selectorsOne use of a pseudo-class is to display anchors (links) in differentstatesa:link (link that hasn’t been visited)a:visited (link that has been visited)a:hover (state when you mouse over a link)a:active (link that is selected)
<strong>CSS</strong> Shorthandborder#id { border: width style color }
<strong>CSS</strong> Propertiesdisplaynone (no box generated and content is hidden)block (generates a block box with line break before and after)inline (generates box with no line break before or after)
Please let us know how youliked the workshophttp://annenberg.usc.edu/workshopfeedback
Change language