In this exercise, we’ll add styling to the Black Goose Bistro menu document. All changes should be made using the given markup and CSS styles, not modifying the body of the menu xHTML file in any way. Your final page should look like the image below.
Part 1: Styling Text
- Start by adding a style element with its required type attribute to the head of the document.
- I would like all of the text on the page to appear in Georgia or some other serif font sized small. Create rules for the body element setting the font accordingly. Also set the line height to 175%.
- I want the main heading to be one and a half times larger than the body text size. Create a rule using em. Also make the main heading purple.
- The h2 headings should be in bold, Georgia typeface to stand out from the surrounding text. They should also be 1.1 times larger than the body font. Create a rule using one shorthand font property.
- The h2 headings also need to be purple, have letter spacing of 8px and be in uppercase. Create rules accordingly.
- Each of the menu item names should be in bold text. Since each is tagged as a dt (definition term) element, create a rule to make them all olive and bold.
- Now the bold text on the page is not standing out well. Fix this by creating a rule to make the strong text italic.
Part 2: Using Selectors
- The strong elements in the menu item names need to stand out as well. Do this by creating a contextual selector targeting only the strong elements that appear in dt elements. Makes these elements maroon.
- Because the content has been divided into three unique divs (header, appetizers and entrees) we can use these for styling. Create a rule to make the paragraph inside the header italic and gray in a way that doesn’t affect the other paragraphs on the page.
- Notice that the prices on the menu have been marked up with a span element that has a class of “price”. Use this markup to change the font for all of the prices to italic Georgia.
- Similarly, use the markup for “label” classes to make them stand out in bold small caps.
- There is a warning at the bottom of the page that needs to be small and red. It has been marked with a class “warning”. Use this markup to style the warning.
- Some of the items need to be centered on the page. Write a rule with a grouped selector to center the whole header div, the h2 elements and the paragraphs contained within the “appetizer” and “entrees” divs.
- Finally, style the appetizer and entree paragraphs to be italic.
Exercise adapted from Learning Web Design, Third Edition, Chapter 12