MAT 125: Web Design 1: Fundamentals : EXERCISES

Exercise 7: Using CSS

1. Understanding The Box Model
2. Simple Rollover Navigation

Use an external style sheet, link it to all your pages to solidify the design for your entire website.

1. The Box Model

Understanding borders, padding and margin use.

2. CSS Rollover Navigation

Use CSS styles to create rollover effects in a simple horizontal navigation bar. Use additionall CSS design elements to make it more dynamic looking.

Exercise Requirements

  • This is a 6 page exercise! All pages must link together.
  • Read about the Box Model in the book or online
  • CONTENT: Write several paragraphs about the Box Model and the use of padding, margin and borders. Use this content on pages 2 - 6. Format your pages using the steps listed below. Link all pages together.
  • Index page: Create a simple box model example page first. Choose one element (an image works well for the first example). Add the individual parts that make up the box model, border, padding and margin one at a time. Try one with varying sizes on each side.
  • Page 2: Use the content you have written about the Box Model and create a page with several sizes of Header tags and paragraphs of text. Use other basic HTML tags as well. Include the anchor tag to link your pages together. Add an image or two. Do not use the br tag to create space between elements.
  • Page 3: Resave the page as a new name and use CSS to add a background color to each block level tag. This will help you see where the default padding ends and the margin begins. OR use the developer tools in FireFox and choose OUTLINE BLOCK ELEMENTS.
  • Page 4: Resave the page again as a new name and zero out the padding and the margin for all the HTML tags you used. Check out the demo to see how this is done. Right click the page, choose View Page Source, to see the coding. Add this CSS to the top of your Document styles: * {margin:0; padding: 0; border: 0;}
  • Page 5: Resave the page again (with the zeroed out padding and margin) and use the CSS techniques we covered to add some style. What margin and padding amounts make the page look best? Experiment with various amounts of padding, margin and border sizes to see how you can change the page layout.
  • Page 6: Resave the page again. Your final page should include the simple rollover navigation and be a well designed page. Take a look at real websites to get ideas.

Design Process

  • Create a project folder named "Ex7"
  • Name your first page named index.html.
  • Save all HTML docs and images in your project folder.
  • Review your work in a browser before uploading to the server, view source in FireFox to see HTML errors and correct
  • Upload your Ex7 folder with your HTML documents and image folder to the server and view them in a browser.


This exercise is worth 30 points.

  • Coding (6)
  • Functionality (6)
  • Meeting project requirements (6)
  • Your effort (6)
  • Creativity (6)
Exercise Seven Grading Rubric
Item/Points 1 - 2 3 - 4 5 - 6
Coding Some Most All correct
Function Some Most All
Requirements Some Most All
Effort Minimal Basic Requirements Above & Beyond
Creativity Minimal Some Above & Beyond

Due Date

Text Reference

  • Chapter 14: pg 261 - 282
  • Review Lecture in Course Content on Blackboard

Online Demos

<< .. Go to .. MAT Info .. Class Demos .. Previous Exercise < .. > Next Exercise .. >>