CSS Flow Survey Project

Essential Question: What are the five properties that help adjust HTML elements in the browser?

Mastery Objective:

• SWBAT modify z-index in CSS.

• SWBAT adjust position in CSS.

• SWBAT adjust display in CSS.

• SWBAT adjust float in CSS.

• SWBAT use clear in CSS.

What does Normal Flow Mean in CSS? 

• The position property allows you to specify the position of an element.

• When set to relative, an element’s position is relative to its default position on the page.

• When set to absolute, an element’s position is relative to its closest positioned parent element. It can be pinned to any part of the web page, but the element will still move with the rest of the document when the page is scrolled.

• When set to fixed, an element’s position can be pinned to any part of the web page. The element will remain in view no matter what.

• When set to sticky, an element can stick to a defined offset position when the user scrolls its parent container.

• The z-index of an element specifies how far back or how far forward an element appears on the page when it overlaps other elements.

• The display property allows you to control how an element flows vertically and horizontally in a document.

• inline elements take up as little space as possible, and they cannot have manually adjusted width
  or height.

• block elements take up the width of their container and can have manually adjusted heights.

• inline-block elements can have set width and height, but they can also appear next to each other and do not take up their entire container width.

• The float property can move elements as far left or as far right as possible on a web page.

• You can clear an element’s left or right side (or both) using the clear property.

Directions:

1. In style.css, add a declaration to the .question ruleset that sets the position to static.

Notice that setting position to static does nothing. That’s because static simply refers to the default behavior. CSS Layout - The position Property 

2. Inside the .question ruleset, change the position property to relative.  CSS Layout - The position Property 

3. Offset .question 40 pixels from the top. 

4. Set the position inside of the header ruleset to absolute. CSS Layout - The position Property 

Notice how it’s now removed from the normal flow of the document, and covering the welcome section.

5. When you changed the position to absolute, you may have noticed that the header shrunk horizontally. We’ll learn why in a later exercise. For now, set the width property of the header to 100%. 

6. Change the position property inside of the header rule to fixed. Scroll up and down the web page. What do you notice?  CSS Layout - The position Property 

7. Notice that part of the “Welcome” section is now covered up by the header. That’s because when we changed the position of the header to fixed, we removed it from the flow of the html document. Let’s fix that. Set the position of the .welcome element to relative.  CSS Layout - The position Property 

8. Offset the “Welcome” section by 200 pixels from the top. Everything might not be displaying correctly just yet; we’ll fix it in a later exercise. 

9. Change the position of the elements with the class question to sticky.  CSS Layout - The position Property 

10. Set the z-index of the header to 10. Notice how the header is no longer covered by other elements when you scroll! CSS Layout - The z-index Property  

11. In index.html, add opening and closing <strong></strong> tags around the word “Welcome”. Notice that the element does not move. That’s because <strong> elements are inline, so they can share lines with other elements. 

12. In index.html, add a <footer> element at the bottom of the document, right above the closing </body> tag. 

13. Nothing changed! That’s because the <footer> element is empty. Add an <h3> element inside of the footer that says “Thanks for taking our survey!” 

14. To improve the appearance of the web page, set the height of the footer to 100 pixels in style.css. 

15. Let’s fix the display of the list elements in the menu at the top of the page.

Set the display property of <li> elements to inline-block. CSS Layout - inline-block 

16. Set the width of the li elements to 80 pixels. 

17. Now, we can reduce the top offset of the “Welcome” section. Set it to 50 pixels. 

18. Set the display property of .answer elements to inline-block. CSS Layout - inline-block 

19. Add a declaration to the .answer ruleset that sets the float property to left. CSS Layout - float and clear 

20. Take a look at the .answer divs on the web page. They have been floated to the left, but the .question divs are touching the .answer divs on the right, let’s fix this.

In the .question selector, set the clear property to left. Notice how the questions moved. CSS Layout - clear and clearfix 

21. On second thought, this layout is not looking so good. Remove the float property from .answer selector ruleset. CSS Layout - float and clear