Web Science/Part1: Foundations of the web/Web content/Cascading Style Sheets/quiz

These challenges are here to help you flex your CSS skills, and see where you need to practise more!

If you're new to CSS, have a read through the first page of Wise Women's Getting Started with Cascading Style Sheets, which introduces CSS along with some everyday examples.

CSS Challenge 1 &#8211; Fonts and Colours
This first challenge only involves changing your fonts and colours - no layout or other more advanced CSS here! Copy-n-paste the HTML to get started, and click on the image to see what your page should look like!

Hints:
 * You'll need to link your HTML to a new stylesheet.
 * You can use the following fonts list for help: http://www.w3.org/Style/Examples/007/fonts
 * Don't worry if your text doesn't wrap at the same word -- it will depend on the size of your browser window.

CSS Challenge 2 &#8211; Shakespeare's Sonnet
This second challenge will help you to re-cap your CSS text formatting skills, as well as start using margins and padding. Copy-n-paste the HTML to get started, and click on the image to see what your page should look like! You can also try to get your page to look like the page from the image on the right (challenge 2-A), which uses a few more advanced (though not too hard) CSS techniques.

If you can improve on the design (shouldn't be too hard!) without increasing the difficulty of this challenge, great! I'll happily replace the image!

Hints:
 * The thumbnails are not very representative, but this challenge requires you to create a fixed-width layout that is centred in the browser window. Click on an image for a closer view.
 * Hint 2: to get the wrap division to stay centred, you'll need to set the left and right margins to a_t_ (you've got to fill in the blanks).

CSS Challenge 3 &#8211; 2-column layout
This one will get you fiddling with margins and padding! Hints:
 * You'll need to set a fixed width for your wrap, and then float the navigation.
 * You may also want to fiddle with widths/margins of the navigation and content divisions!
 * For this and the next few challenges, you may want to first look through MaxDesign's Two columns with colour tutorial.

CSS Challenge 4 &#8211; 2 Columns with a header and footer
This time you've got an extra header and horizontal navigation to worry about!

Hints:
 * For some ideas for styling the horizontal nav bar, see listamatic.
 * You'll need to fiddle with paddings/margins to get the divs bumped up against each other.
 * If you get stuck, try following 456BereaStreet's 2-column layout tutorial