CSS Layouts

Exercise 1

Using the CSS position property, program a CSS selector that positions the page's header element in the top left corner of the page. If the user scrolls the page, the header will scroll/move with the rest of the content.

Note: program your selectors in alphabetical order.

Exercise 2

Using the CSS position property, program a CSS selector that positions the page's footer element in the bottom left corner of the page. If the user scrolls the page, the footer will not scroll/move with the rest of the content.

Note: program your selectors in alphabetical order.

Exercise 3

Using the CSS position property, program a CSS selector that moves an element with an id equal to hero down 32px from it's current position.

Note: program your selectors in alphabetical order, and all measurements should be expressed in rem units. You can assume the follow CSS.

html { 
  font-size: 100%; 
}

Exercise 4

I have the following HTML structure:

<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Program a CSS selector that will position each of the .col elements next to each other, so that all four fit together in a single line.

Note: program your selectors in alphabetical order.

Exercise 5

I have the following HTML structure:

<div class="wrapper">
  <main></main>
  <aside></aside>
</div>

Program a CSS selector that will position the main and aside elements next to each other. Also - add 32px of padding on all four sides of both elements.

Note: program your selectors in alphabetical order, and all measurements should be expressed in rem units. You can assume the follow CSS.

html { 
  font-size: 100%; 
}