As you continue your work on the website for Eating Well In Season, a provider of locally-sourced, healthy meals, you mark existing information using lists and you incorporate new information in a table.
a. In your editor, open HTM_H-17.html from the IC3 folder where you store your Data Files for this unit, save it as menus.html, then repeat to save HTM_H-18.html as pricing.html, and HTM_H-19.css as styles.css. In the comment at the top of each file, enter your name and today's date where indicated, then save the files.
b. In menus.html, mark the list of meals and menu items under the Sample Menus h2 heading as a description list. (Hint: More than one dd element can follow each dt element.) Save your changes, then in styles.css, below the last rule in the main content section, create a comment containing the text main content description list. Add a style rule for the description that set the font family to the font stack Verdana, Geneva, sans-serif and sets margins to 0 1em 1em, then create a rule for description list term items that formats text in bold and sets a top margin of 1em. In the reset styles section, add the dd, dl, and dt selectors to the list of selectors in the style rule that sets border, padding, and margin to 0. Save your changes, open menus.html in a browser, then verify that the display of the description list matches the one in FIGURE H-41.
Figure H-41: see image.
c. In menus.html, mark the content of the sidebar below the h2 element as an unordered list. Save your changes, then in styles.css, below the last rule in the sidebar section, create a comment containing the text sidebar unordered lists. Create a style rule for unordered lists within aside elements that sets the left margin to 2em and uses the image bullet.png from the images folder as the item marker (Hint: Use the list-style-image property with the syntax url ("path/filename"). In the reset styles section, add the ul and li selectors to the list of selectors in the style rule that sets border, padding, and margin to 0. At the end of the reset styles section, create a style rule using the ul selector that sets list-style-type to none. Save your changes, refresh or reload menus.html in your browser, then verify it matches FIGURE -H41.
d. Return to menus.html in your editor, then convert the markup for the main nav bar to use an unordered list. Save your changes, then in styles.css, in the site navigation section, change the selector for the nav.sitenavigation p rule to nav.sitenavigation li. Save your changes, refresh or reload menus.html in your browser, then verify that the appearance of the nav bar remains unchanged.
e. Return to menus.html in your editor, copy the unordered list from the sidebar, switch to pricing.html in your editor, then paste the unordered list in the code for the sidebar, replacing the existing content below the h2 element. Repeat to copy the ordered list in the nav bar for menus.html and paste it in pricing.html.
f. In the article element in pricing.html, create the table shown in TABLE H-5. Specify the class value specific-headers for the second row of the header section. Save your changes.
Table H-5: see image.
g. Return to styles.css in your editor, above the main content description list section, create a comment containing the text main content table. Create a style rule for the table element that sets a width of 90% and margins to 1em auto. Create a rule for table header cells and table data cells that sets width to 33.3%, creates a 1px solid black border, sets padding to 0.3em 1em and sets the font family to Verdana, Geneva, sans-serif. Create a rule for table header cells that sets the background color to #98c13d. Create a rule for table header cells nested in the element with the class value. specific-headers that sets the background color to rgb (246,224,65). Save your changes, then verify that it matches FIGURE H-42.
Figure H-42: see image.
h. Validate all of your HTML and CSS documents and make any edits necessary to address any issues.