Download presentation
Presentation is loading. Please wait.
1
Creating a Webpage with External CSS
MMP 100 – 141 Class 5 BMCC Creating a Webpage with External CSS
2
Preparation Initial work: Final work: Download starter kit: Css reference:
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 vertical align
#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:
Similar presentations
