Lab 7: CSS: Boxes, Borders & Floating

Goals

Learn about...

  • About the CSS box model
  • Adding box properties: height, width, padding, margin, and border
  • About display concepts: block, in-line, and float

Key Concept

All HTML elements have a surrounding box, which can be manipulated to create decorations, visual metaphors, and layouts.

Pre-lab

Pre-lab Reading

  • Textbook pp 305-314

Pre-lab Activity

Use reading to answer the Pre-lab Questions. Be sure to complete the activity and answer the pre-lab questions in Blackboard by the due date.

In-lab

Info

Note that these instructions are not always detailed. You must figure out some of the detail by reading the textbook and investigating online sources. You can always ask your instructor for help. If your instructor is busy helping others, raise your hand to make sure the instructor sees that you need help, but then put your hand down and go back to work. As you wait for help, try your best to solve the problem on your own by reading the textbook.

Working with others

You can work together with a partner during lab. But after the lab session is over, you must complete this activity independently. Be sure to email your partner relevant files before the end of the lab session.

You should not collaborate with anyone outside of the designated two-hour lab session.

Preparation

  • Always make sure you save your lab file in the appropriate folder, i.e., lab7.
  • For file names, only use lowercase letter and never use spaces.

Activity

You can work together with a partner during lab. But you must complete this part of the lab on your own. You should not collaborate with your partner outside of the designated two-hour lab session.

Boxes & Borders

  • Download jenware.html and save it to your lab7 folder.
  • Inside your lab7 folder, create a sub-folder called images
  • Download the pictures: shirts.jpg, jenware_logo.png, glasses.jpg, ex-circle-corner.gif, and awesomesite.gif. Save them to your images folder.
  • Use the jenware.htmlfile and complete exercise 14-1 through 14-3 using Notepad++. Refer to pages 315-333 for help.
  • It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
  • Make sure jenware.html validates at http://validator.w3.org/#validate_by_upload
  • Show your instructor that jenware.html is finished and validates.

Questions about Boxes & Borders

  • In a text editor, create a webpage called lab7.html
  • Answer the following questions and use HTML and CSS to appropriately markup and style your answers according to the instructions in the questions below.

  • Boxes & Borders

    1. What is the name of the CSS property for adding a box around an element. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have a box around it similar to the one shown above.
    2. What is the name of the CSS property to add space between the inner text and the inside of the box. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have 5px between the text and inside of the box.
    3. What is the name of the CSS property to add space outside of the box. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have 15px of space outside the box to the left and right.
    4. What is the name of the CSS property to add rounded corners to the box. Use the HTML span tag with class="answer" to markup your answer below. Then use embedded CSS so that .answer will have rounded edges.
    5. What does it mean when we say that margins collapse?
  • Save your lab7.html file. We will answer more questions at the end of the lab.

Floating & Positioning

  • Download jenware_ch15.html and save it to your lab7 folder.
  • Use the jenware_ch15.htmlfile and complete exercise 15-1 through 15-3 using Notepad++. Refer to pages 341-356 for help.
  • It is OK to peek at the solution if you get lost, but do not look at it until you try to do all parts of the activity.
  • Make sure jenware_ch15.html validates at http://validator.w3.org/#validate_by_upload
  • Show your instructor that jenware_ch15.html is finished and validates.

Questions about Floating & Positioning

  • Continue to answer the following questions in yourlab7.htmlfile. These questions do not require you to add CSS to your document. Just answer the questions.

  • Floating & Positioning

    1. What is the name of the CSS property for making images move to the right or left so text can flow around it?
    2. Why is it often necessary to specify the width of elements if you wish to float them right or left? See pages 344-346.
    3. What happens when there is not enough horizontal room for two floating elements to sit side-by-side on the same line? See page 349.
    4. Describe the difference between px, em, and %.
  • Save your lab7.html file.

Deliverables

Upload lab7.html to Blackboard.