Problem 1 (10 points) Create a single HTML document that presents 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 pla.css and p1b.css. If the HTML file links to pla.css then it should appear like this ("Version A"), assuming you are running Chrome 86.0 on a Windows 10 machine: Constituency Polling Div. Polling Stn Location Candidatet Candidate Rejected Total Constituency Polling Div. Polling Stn Location Candidate1 Candidate Rejected Total Constituency Polling Div. Polling Stn Location Candidate1 Candidate2 Rejected Total Constituency Polling Div. Polling Stn Location Candidate1 Candidate Rejected Total Constituency Polling Div. Polling Stn Location Candidate1 Candidate2 Rejected Total St. Andrew Eastern 61 61A Papine High School 11 68 1 80 St. Andrew Eastern 61 61B Papine High School 25 53 1 79 St. Andrew Eastern 74 74 United Theological College 32 31 1 64 St. Andrew Eastern 76 76 United Theological College 130 33 4 167 St. Andrew Eastern 77 77 Students' Union 16 19 2 37 If the HTML file links to p1b.css then it should appear like this in Chrome 86.0 on Windows 10 ("Version B"): Constituency Polling Div. Polling Stn Location St. Andrew Eastern 61 61A Papine High School St. Andrew Eastern 61 61B Papine High School St. Andrew Eastern 74 74 United Theological College St. Andrew Eastern 76 76 United Theological College St. Andrew Eastern 77 77 Students' Union Total Candidatel Candidate2 Rejected Total 11 68 1 80 25 53 1 79 32 31 1 64 130 33 4 167 16 19 2 37 214 204 9 427 Here are some additional details and requirements for this problem: The content should be described in a single HTML file, using a

element to display the main table. 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 or JavaScript 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. Your CSS files must appear in a directory called styles/. Try to duplicate the appearance in the images above exactly ("pixel perfect"). For example: Some of the columns should be right-justified whereas others are left-justified. o The "Total" line appears only in Version B (hint: you may find the display attribute useful in producing this effect). o The title in the browser title bar should read "COMP 6550 Project 1, Problem 1". O Both versions use the Gill Sans font in a 13-pixel size. o The background colors for the body rows in Version A are #eeeff2 and #dfe1e7. The lines between the rows in Version A are 2 pixels wide with a color of #dodoff. The color for the frame around Version B is #687291. o The frame in Version B is 10 pixels wide; there are 20 pixels of empty space on either side of the frame. O The frame in version B has a border radius of 15 pixels at each corner. o The horizontal rule above the "Total" line in Version B is 2 pixels wide. o Match the paddings and spacings as closely as possible. Your HTML file must be a valid XHTML document that passes validation at http://validator.w3.org, and your CSS files must pass validation at http://jigsaw.w3.org/css-validator/ Hints It is OK (and encouraged) to specify cellspacing="0" in each element. This eliminates spacing between cells that the browser provides by default and which is usually a nuisance. You have to specify this attribute on the element because there are no CSS style attributes that correspond exactly to this feature (border-spacing and border- collapse come close, but they have unpleasant side effects and are not portable). You may find some of the following CSS style attributes useful for this project (check w3schools for details): o width: 100%; white-space: nowrap; text-decoration: none; The margin style attribute is ignored for td elements (a strange exception to the uniformity of CSS). If you need a margin around the contents of a table cell, place a div inside the td and specify margin for the div