1 / 10

Creating a Webpage with External CSS

Creating a Webpage with External CSS. MMP 100 – 141 Class 5 BMCC. Preparation. Initial work: http:// dl.dropbox.com/u/7783459/mmp100-class5-exercise/initial.html Final work : http:// dl.dropbox.com/u/7783459/mmp100-class5-exercise/final.html

clove
Download Presentation

Creating a Webpage with External CSS

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Creating a Webpage with External CSS MMP 100 – 141 Class 5 BMCC

  2. Preparation • Initial work: http://dl.dropbox.com/u/7783459/mmp100-class5-exercise/initial.html • Final work: http://dl.dropbox.com/u/7783459/mmp100-class5-exercise/final.html • Download starter kit: http://dl.dropbox.com/u/7783459/mmp100-class5-exercise/starter.zip • Css reference: http://www.w3schools.com/Css/default.asp

  3. Initial Work

  4. Final Work

  5. Plain HTML Divs

  6. Page Structure w/ CSS

  7. Positioning and Sizing Elements Absolute position means this element is positioned relative to the <html> container

  8. Background Images horizontal align color image repeat #header { background: #8C9777 url(images/page_header_bg.jpg) center top no-repeat; height: 300px; } vertical align #main { background: #FBFBE5 url(images/container_bg.gif) left top; padding-top: 5px; padding-bottom: 10px; } #main { background: #FBFBE5 url(images/container_bg.gif) left top repeat-y; padding-top: 5px; padding-bottom: 10px; } #footer { background: #FBFBE5 url(images/footer_bg.jpg) center top no-repeat; height: 166px; }

  9. Top & Left Nav Create mouse-over effects (change background color and font color Use image as list point discs

  10. Finalizing • Define general styles for fonts, colors, etc. • Finetune element positioning, padding, spacing, etc. • See final CSS: http://dl.dropbox.com/u/7783459/mmp100-class5-exercise/class-5.css

More Related