Create style rules for your context areas of your html

Reference no: EM131859237

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:

<ul id='menu'> : I have one and only one menu and it is contained in a <ul>, so I use id
<tr class='product'> : I have multiple table rows, one for each product, so I use class
<div id='header'> : My header has various content elements, so I wrap it all in a <div> 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 <style> tag in it. Just CSS.

Suggestion: When I am doing layout, I always do two things:

1. I set box-sizing:border-box; for all of my elements unless there is a good reason not to use border-box.
2. I set a tiny border around each section, which I remove when I am done. This is one line of CSS like:

border:1px solid red;

That creates a thin red border around the element and it is easy to delete when you like your layout.

Edit your HTML file to link to the style.css file:
<link rel='stylesheet' type='text/css' href='style.css'>
Remember, that goes in the <head>.

See the note on absolute positioning at the end of the lab. It won't be on the test and won't affect most students. If you try to absolutely position an element that is inside another element, it may affect your design.

A note about layout:

Use your imagination. Come up with something that is effective for the company. The info.txt file gives you at least three websites that you can use for inspiration. If you are left wondering what to do, the following shows common layouts that use a header, menu, content, and footer section. Pick one and work out what sizes work best for your content.

These don't tell you if you should use fixed or absolute layout. That is up to you. Do you want your element to be fixed to the viewport or scroll up/down?

Requirements:

• Remove layout and style from your HTML. Yes, that means that all your centered text will be left- aligned, but just for this week.
• Give all elements that need to be styled some context using id or class
• Create a separate style.css file
• Include the style.css file in each HTML file
• You must:

- Set at least one element to use absolute or fixed position
- Set the position of at least one element
- Set the height and/or width of at least one element

• Your layout should work for any computer I use as well as your computer

- You may need to use calc to get the size you need instead of just guessing at pixels

Fixed vs. Absolute Positioning:

Before you begin, a note on absolute positioning: For the test, it is important to remember that fixed position will place an element in a fixed position on the viewport. Alternatively, absolute position fixes your element on the page, which may or may not be visible in the viewport because it is common for a web page to be larger than the viewport. But, that isn't complete. In case you end up with something unexpected, this is the complete rule about absolute position.

While fixed position is easy - you position it in the viewport. Using absolute will position the element on the page inside it's container. Example:

If my HTML is:

And my CSS is:

#div1 { position:absolute;right:0px;bottom:0px;width:10em;height:10em; }
#div2 { position:absolute;top:0px;left:0px;width:5em;height:5em; }

Then, I will see:

But, if my HTML is:

Then, I will see:

Box2 is aligned to the left and top of it's container, Box1.

Attachment:- Lab-Assignment.rar

Reference no: EM131859237

Questions Cloud

What new and innovative way will you develop to success : Mark Hurd, the former CEO of HP, made the organization money, but lacked in innovation and creativity.

Explanation of ethical behavior in the workplace : Explain what it means to demonstrate positive ethical behavior in the workplace. Include examples to support your explanation.

Research a country on the african continent : Your assignment is to research a country on the African continent that you think would be the most advantageous to your company in cultural

Which one do you believe is the most important : Consider an industry (such as education, health care, restaurant and hotel, manufacturing, technology, automotive, etc.) .

Create style rules for your context areas of your html : 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.

How could an understanding of market positioning : How could an understanding of market positioning be of assistance to Qantas for targeting its target segments?

Common causes of wrongful convictions : Consider how criminals may become victims. What are the common causes of wrongful convictions?

Different types of paints with various painting services : If you have a painting business that sells different types of paints with various painting services and the paints

Automate individual functions : IT can be described as having three waves: automate individual functions, integrate value chains, incorporate IT into product and service offerings.

User Account

All Pages