Lab 3 - CSS Design and Layout

Goal

To learn to control the appearance and layout of your homepage via Cascading Style Sheets. Let's continue to do what we did with Lab 2 and create a new folder called lab3 that contains duplicates of your HTML and CSS files.

make sure to at the same level as your other labs and refrain from modifying code in those other paths.

Task 0: Ensure you have a lab 3 folder

Make sure you copy your existing HTML and CSS files from the lab2 folder into lab3.

Task 1: Arrange Your Homepage into Sections

The first task is to organize your index.html by adding ids, classes, spans and divs. Then, add boxes around these sections of the website by updating your CSS stylesheet. Hint: Remember the way to define a border in CSS:

border: thickness color style;

For example, the following gives a green, dashed, 1px-thick border:

Task 2: Spacing with Padding and Margins, Backgrounds

• Add padding, margins, and backgrounds to the sections by only changing your index-style.css
• After you finish, the overall page content area should become centered on the page and should have left and right margins of 10% and a background image of your choice.

Task 3: Float, Alignment and Clear

Practice float, clear, and alignment on your web page. You may have to edit your index.html code as well as your .css stylesheet to get the floats working properly. Floats and alignment will be covered in the css layout lab class

Lab Submission

• Make sure that you upload your new lab3 folder to your repo and that it is viewable on the internet.

• Submit a document that describes what changes you have made to the lab in a step-by-step fashion.

Acknowledgments

(This lab has been revised from the lab by Victoria Kirst, Brian Le and Marty Stepp: http://www.webstepbook.com/supplements/labsection/lab2-journal (opens in a new tab)