Assn7 - body{background#bbb margin 0 padding 0 text-align...

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
Assignment #7: Using CSS for layouts Learning Objective: Understand how to use CSS to control layouts Create a new page with layout controlled by a CSS file. 1. Create a new link in your index file to Assignment_7. (Please not that you should not use “#” in the file name). 2. Open a blank html page and save it as Assignmnet_7. 3. Use the CSS file “main_layout.css “ posted on Moodle and copy it into your CSS folder. 4. Attach the file main_layout.css as we practiced in the last assignment (last video lesson 6). 5. Follow the video instructions to create a layout Video 1-4. 6. For video 5 add an inner content tag as shown below and a clear tag shown below also. Insert a picture into this content as shown in the video. Insert the clear tag to assure the picture falls within the inner content div tag. 7. Save all and upload to server. The original file just contains the following code for the wrapper and body:
Background image of page 1
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: body {background: #bbb; margin: 0; padding: 0; text-align: center;} Everything on the webpage that is within this body tag will have the background color specified by #bbb, zero margin, no padding, and centered text. #wrapper {width: 770px; background: #fff; margin: 0 auto; text-align: left;} The wrapper is a container which sets the width of your content on the webpage to 770px so that most old monitors can view it without scrolling. If you widen this then some old monitors which are smaller may not see the whole page without scrolling. There are two items that you need to add to your CSS file at some point. Place them in the css file at the places shown in the video. You can create them by inserting a div tag or simply by catting and pasting. #innerContent { background: #D58D38; } .clear {clear: both;}...
View Full Document

{[ snackBarMessage ]}

Ask a homework question - tutors are online