Lecture 5   Class Activities for CSS

Challenge yourself

For all the activities below, we also show the answers. However, in order for you to assess yourselves, we always recommend that you try to solve the exercises on your own, and then check the solution. Looking at the solutions without engaging in the activities will give you a false sense of confidence that you understand the material.

If you have seen these examples in the reading, challenge yourself by trying to solve them without looking at your or our notes.

Quiz Question Nr. 1

Float means

  1. Other block elements flow around me

  2. Other inline elements flow around me

  3. I flow around other block elements

  4. I flow around other inline elements

Quiz Question Nr. 2

Clear means

  1. stop floating

  2. Move other stuff below me

  3. Move me below non-floating elements

  4. Move me below floating elements

Fixed-width and floating images

You are given this simple page. Resize the browser window. Notice what happens to the text and the images. Then, using the Inspector window do the following:

  1. Apply styling to the body element to center the page, give it a width of 960px and change the background to lightgray. Resize the window again. What happens to the text and the images.
  2. Apply styling to the img elements to float them on the right side.
  3. Can you guess without looking at the source code why this page looks different from this page. Write your answer down, and then look at the code of each page to check if you're correct.
  4. Apply styling to the figure element of this page to make it look like this one.
  5. This is the solution for items 1 and 2 of the list. Do you think that it looks different from this page? If so, in what ways and why?

Layout with columns

  1. Starting with this page, add styling to the appropriate elements in order to create the two-column layout shown in this page.
  2. Starting with this page, add styling to the appropriate elements in order to create the three-column layout shown in this page.

Float problems

  1. Explain what is wrong with this page and why? Hint: Use the Inspect Element window as an investigating tool (highlight the different elements to look at their size).
  2. What can you do to fix this problem, so that the page looks like this one.
  3. Try to predict if setting the margin-top property for the footer element would push that element down. Is your prediction correct?
  4. Finally, what can you do so that you turn this page into this one?

Advanced Challenge

All previous activites were explained in the reading and the solutions are given. If you completed them quickly, here is a challenge that you haven't encountered before. By adding only one new container element to the last version of Hunger Games file and applying some styling to the different elements of the page, make it look like this image. Don't worry about matching the colors, go for the layout. We'll post the solution after class.

Positioning

  1. Can you explain what is the difference between the styles: position: absolute and position: fixed?
  2. Given this page version, how can you change the CSS code to make it look like this page? Scroll the page to see what happens to the image.
  3. By making one very small change in the CSS file, how can you turn the last example into looking like this example. Scroll the page down to see the difference.

Cool CSS3 Effects

  1. Open this example and try to guess (without looking at the source code), how this page is generated.
  2. Open the Inspect Element window and play with the CSS rules for header. Try disabling/enabling all properties one by one to see what happens to the page. Also, play with changing the different values to see their effect.
  3. Open this example and try to guess how each div was styled. Then check your guesses.