• View
• Edit
• History
• Print

Layout Design with CSS

Overview: This tutorial gives you a hands-on experience in using CSS to make web page layout. You will learn how to use CSS to create a simple two column layout.

Activity 1:

• Go to this web page: Simple 2 column CSS layout.

• Use about 20 minutes to go through the tutorial.

Activity 2:

• Download the HTML (with embedded CSS) of the simple two column layout you studied in Activity 1.
• Remove the embedded CSS in the HTML. Then create a new file to inclue the CSS for the layout. In the HTML file, put a link to the exteranl CSS.

Activity 3:

• Modify the CSS in Activity 2 so that the page layout would look like the following.

• Submit your CSS file to Steven.

Acknowledgment

• Special thanks to 456 Berea Street's tutorial: Simple 2 column CSS layout