Build Your Own
Web Site The Right Way
Using HTML And CSS

Chapter 4 - Shaping Up with CSS

• Example pages
  1. Setting the width of an element
  2. Setting the height of an element
  3. Border examples
     • Simple black border
     • Inset border
     • Colored ridge border
     • Bold dotted border
     • Bold dashed border
     • 1 pixel gray border
     • 2 pixel silver border
     • Dotted red border
     • Dashed gray border
     • Double border
     • Multi border
     • Shorthand border styles
  4. Padding example
  5. Margins example
  6. Absolute positioning examples
     • Absolute Positioning - example 1
     • Absolute Positioning - example 2
  7. Relative positioning example
  8. Floated positioning examples
     • Relative positioning - example 1
     • Relative positioning - example 2
• Project Web Site (bubbleunder.com) files
  • Developing the home page
    1. About page - block elements outlined
    2. About page - border applied to body
    3. About page - border applied to navigation
    4. About page - background color applied to navigation
    5. About page - border applied to tag line
    6. About page - h2 heading restyled
    7. About page - padding applied to headings
    8. About page - div elements outlined
    9. About page - margins and padding removed from body
    10. About page - margins removed from headings
    11. About page - layout messed up (everything positioned in top left)
    12. About page - navigation and body content moved below tag line
    13. About page - body content positioned to right of navigation
    14. About page - borders removed and heading width expanded
    15. About page - final tweaks
    16. About page - navigation and body content positioned with em units
    17. Home page - feature image floated to the right
    18. About page - bullets in navigation list removed
  • Final version
    • Home page
    • About Us
    • Contact Us