Create a css file named stylecss in it you will create

Question

Lab Assignment: CSS Layout

Objectives:

• Remove all size, position, alignment, and color attributes from your HTML
• Use id and class attributes to give context to your HTML elements
• Use CSS to position and size your elements
• Color and alignment comes next week

Background:

As mentioned in class many times, HTML is used to deliver content. CSS is used for layout and style. Because layout and style are such large topics, it is being broken into two separate labs. In this lab, you will do layout: position and size.

Step 1:

Remove all size, position, alignment, and color attributes from your HTML. This will all be replaced with CSS over this and next week's lab. I've tried to reinforce that HTML is for content and only content. I didn't want anyone doing a lot of work trying to remove work they have done.

Step 2:

Give the sections or divisions of your page context. There are multiple ways you can do this:

If an element is already a stand-alone element, such as a table or a list, you can give it a class or an id. How do you choose? If there will one and only one of something, give it an id. If there will be more than one, give it a class. Examples:

: I have one and only one menu and it is contained in a
, so I use id
: I have multiple table rows, one for each product, so I use class

: My header has various content elements, so I wrap it all in a

tag with an id

Everything on your page should be contained in some form of context. Professional web pages tend to have: a header, a menu, a content area, and a footer. While you will be doing this to every file, you should start with just one of your HTML files, such as the index.html file. Then, when you are done with the lab, repeat it for the other HTML files.

Step 3:

Create a css file named style.css. In it, you will create style rules for your context areas of your HTML. Remember: You do not put HTML in your CSS file. You don't even put the