Exercise 3 - Editing the appearance of a document

In the following you will edit the appearance of an existing document. For help see the lecture notes or the CSS1 handbook by W3C. You'll find the handbook at: <URL: http://www.htmlhelp.com/reference/css/properties.html>.

1. Finish the previous exercises before doing these. You don't have to finish the additional exercises, however.
2. Start HTML-Kit and open a new HTML document.
3. Copy the source of a document on macroviruses and use it as a base for your document.
4. Save it to folder U:\networks\demo3\ as macroviruses.html . Now you will edit the appearance of the document by using a CSS file.
5. Open a new doucment for the CSS file and save it as macroviruses.css .
6. Edit macroviruses.html to use the styles in macroviruses.css
7. See how macroviruses.html looks without any styles and after every step that follows, see how the style definitions you've made affect the document. Try to undestand every property you define and how it works!
8. Make a body style to the CSS file. The style should have the following properties:
   • The font color is black and the background color is white.
   • The font is Verdana, Arial, Helvetica and the font family is sans-serif.
   See how the document looks now!
9. Add a h1 style with the following properties:
   • The font color is #0066CC and the background color #FFCC66.
   • The font is Verdana, Arial, Helvetica and the font family sans-serif.
   • The font size is 2 times the size of the default font (em).
   • The text is shown with capital letters (text-transform).
   • The letter spacing is 0.1 times the size of the default font.
10. Add a h2 style with the following properties:
    • The font color is #0066CC and the background color is #FFCC66.
    • The font is Verdana, Arial, Helvetica and the font family sans-serif.
    • The font size is 1.5 times the size of the default font (em).
11. Then add a h3 style with the following properties:
    • The font color is #0066CC and the background color is transparent.
    • The font is Verdana, Arial, Helvetica and the font family sans-serif.
    • The font size is 1.2 times the size of the default font (em).
12. And then a p style like this:
    • The font color is inherited (inherit) and the background color is transparent.
    • The font is Verdana, Arial, Helvetica and the font family sans-serif.
    • The font size is the same as the size of the default font (em).
    • The top- right- and bottom margins are as wide as the default font.
    • The left margin is 2 times the size of the default font.
    • The paragraph is justified.
13. Now add a .navbar style that is used for highlighting the navigation bar:
    • The font color is black and the background color is #EEEECC.
    • The font size is 0.8 times the size of the default font (em)
    • All margins are 0.5 times as wide as the default font.
    • The padding of the paragraph is 0.5 times the default font size.
    • The paragraph is centered
    • and has a thin, black, continuous border.
14. And then, Ladies and Gentlemen, please add a strong style with the following properties:
    • The font color is #0066CC and the background color in turn is #EEEECC.
    • The font is bold (font-weight).
15. And now we kindly ask you to add a .url style that is used for WWW addresses:
    • The font is of the style Courier and the font family is monospace.
16. Now, if you don't mind, add an .author style that is used for mentioning the authors of the document at the bottom of the page :
    • The text is aligned to the right.
    • The text size is 0.8 times the default font size.
    • There is a thin, continuous, black border on the top of the block.
    • The top- and bottom margins are 2 times as wide as the default font.
    • The padding is as wide as the default font.
17. Next job. Add a style that sets the following properties to the outer list elements:
    • The list elements are separated with a circle.
18. And for the inner list elements you need a style like this:
    • All margins are as wide as the default font.
    • The list elements are separated with a square.
    • The second line in the list element starts under the square.
    See a lecture example for help with this style.
19. Then add a style that removes the underlining of the links (text-decoration) from the navigation bar. The style must not remove the link underlinig in any other place in the document!
20. Define the colors of the links as follows:
    • Make a style for the unvisited links with blue text color and transparent background color.
    • Add a style that sets the text color of a visited link to red. Background color is transparent.
    • Add a style for an active link: Text color is red and background color is transparent.
    • Add a style that gives the hovering effect: The text color is black and the background color is #EEEECC .
21. Make a style called .vasen for testing the float property. .vasen shoul float its contents to left (vasen = left). Also add a respective style .oikea for floating things to the right side (oikea = right). Put reasonable margins to both of the styles and see how the places of the images in the document change.
22. Validate your CSS file and correct what there is to correct.

Accessibility

1. Familiarize yourself with the Bobby validator. See what Bobby tells about the following WWW pages:
   • The city of Jyväskylä
   • VR (the railway company)
   • the University of Jyväskylä
   You should try to understand why Bobby complains about certain things. If needed, read the explanations Bobby gives. Compare the comments of Bobby to the chapter in the lecture notes (from page 159).
2. You can also try the Wave for the pages mentioned above. What does Wave tell about the accessibility of these pages?

Additional exercises

1. Edit the CSS file you made so that it validates without warnings at WDG CSSCheckUp. Check you have selected Include Warnings on the validator page. Warnings reveal different compatibility problems. HTML-Kit has an icon to this validator but it doesn't show the warnings. Links to the validator pages:
   • CSS CheckUp that can check the documents on a hard disc is at http://www.htmlhelp.com/tools/csscheck/upload.html
   • CSS Check that can validate a document on the WWW is at http://www.htmlhelp.com/tools/csscheck/
2. See the Core Style Sampler pages by W3C.