The goal of this assignment is to demonstrate how a single HTML document can be presented in two different appearances, determined by the document's CSS stylesheet. Your HTML file should be called p1.html and the two stylesheets should be called p1a.css and p1b.css. If the HTML file links to p1a.css then it should appear like this ("Version A"), assuming you are running Firefox on a Windows machine:

If the HTML file links to p1b.css then it should appear like this in Firefox on Windows ("Version B"):

If you are using a Macintosh the appearance will be slightly different.

Here are some additional details and requirements for this problem:

•The content should be described in a single HTML file, using a

•There may not be any formatting information in the HTML file other than class and id attributes.

•The appearance must be generated entirely with CSS style information; you may not use images for this problem.

•The only change that should be required to switch from Version A to Version B is to change the element in the header to refer to a different CSS file.

•Try to duplicate the appearance in the images above ("pixel perfect"). For example: ?Some of the columns should be centered whereas others are left-justified.

?The "Total" line appears only in Version B (hint: you may find the display attribute useful in producing this effect).

?Both versions use the Tahoma font in a 13-pixel size.

?The background color for the header row in Version A is #687291.

?The background colors for the body rows in Version A are #eeeff2 and #dfe1e7.

?The white lines between rows in Version A are 1 pixel wide.

?The color for the frame around Version B is #d0d0ff.

?The frame in Version B is 10 pixels wide; there are 20 pixels of empty space on either side of the frame.

?The horizontal rule above the "Total" line in Version B is 2 pixels wide.

?Match the padding and spacing as closely as possible.

•Your HTML file must be a valid HTML document