Layout with HTML & CSS

Use the Display Property Exercise Page with these instructions.

Complete this during class, recording your observations. For homework, mark up in HTML and post on your Week 3 page.

1. Look over the HTML and CSS of the Display Property page. Describe what you see.
2. Use the web inspector to change the display property of the first paragraph to inline. Describe what you see.
3. Change the second paragraph to inline. Describe what you see.
4. Now change the third. Describe what you see.
5. Describe why the paragraphs changed.

Reload the page to get rid of the changes.

1. Using the web inspector, add a rule using p as the selector. Set it to display: inline-block. Any change?

Reload the page to get rid of the changes.

1. Look at the second section, Go bear, go!. Why is this section displaying in a line?

2. Look at the following rule. How do you expect it will change the document

   p, i {
     width: 300px;
     height: 300px;
   }

3. Add the rule using the web inspector. What did you actually see? Explain any differences from what you expected and why.

4. Use the web inspector to change the display property of the first i to block. What happened?
5. Remove the width and height rules. Add a margin of 3em instead. What do you see? Why?

   p, i {
     margin: 3em;
   }