Web+Type+Exercise 1



//The goal of this exercise is not to blast through it as quickly as possible, but to take some time to experiment with basic CSS pertaining to type and layout. If you spend 60-90 minutes experimenting with these various tasks in lab and before the next class you'll be in good shape for the first assignment when it is issued on the 27th.//
 * 1) Download the above zip archive and open it up.
 * 2) Open the index.html document in Firefox and style.css in your text editor of choice.
 * 3) Spend 10 minutes or so inspecting index.html – note the divs and classes that are driving the type of the page. Now direct your attention to style css and note the various iterations of CSS rules (h2 is particularly interesting).
 * 4) Now, in style.css scroll up to 'body' towards the top of the document and change 'background: #fff;' to 'background: yellow' – save the document and refresh the index.html in your browser. This is how you make changes in the appearance of index.html, by altering styles.css, resaving it and then refreshing index.html. You'll probably want to change the body background back to white so that you don't strain your eyes.
 * 5) Try changing the order of the font stack in the body declaration at the top of styles.css – some fonts might require you to adjust the font-size and line-height to keep the document readable.
 * 6) Select a font that is different than the body font and style the page header (Misc. Kafka Mockup) and subtitle underneath.
 * 7) Try using the h4 class to set up a sub-subtitle underneath 'Misc. Metamorphosis' and 'Secondary Subtitle' – this will require you to edit the index.html document as well as style.css – pay close attention to the padding between these h-classes and the article div underneath.
 * 8) Experiment with the a: and a: hover CSS rule sets to see what effects are possible (see pg. 41 of //The CSS PocketGuide//)
 * 9) Shift your attention to the body text (it can be controlled by the 'articles' class) – Change it to a serif font and experiment with the font selection, line height and letter spacing to optimize it for readability.

Bonus Round:
 * 1) Experiment with the borders on the various divs, try changing their width/style (see pg. 135 of //The CSS PocketGuide//) and replacing them with background fills.
 * 2) Change the text alignment for the footer
 * 3) Change the list-style for the right sidebar
 * 4) Edit index.html and implement some new divs or classes to further refine the document (e.g. make different portions of the text have different classes—by replacing some of the 'articles' classes with new classes—and try varying the line heights or letter spacing of the same font so you can see the difference on the page in front of you)