CSS Styles

Different background colors have been applied to each navigational heading and each list of links underneath each heading. A background color has been applied to the <h1> heading containing the page’s title, the body of the dinner menu itself, and the <h6> heading containing the page’s footer. I’ve already covered the background-color property fairly extensively in previous chapters, but here’s a review of the most important modifications made to the menu_system.css style sheet. The following shows how these modifications impact the presentation of the web page.

The first modification to the menu_system.css style sheet is made to give each heading a light blue background color.

div#nav > ul > li {
background-color: lightblue;
padding: 0.5em;

The final rule for floated elements is that they’re always treated like block elements. Inline elements like or allow some box model properties such as margin, borders, and padding to be applied. Inline elements, however, do not allow dimensional properties such as width and height to be applied. This is understandable because these properties are expected to be contained in the flow of text. The element is an exception because it allows dimensional properties to be applied. Elements like the element are known as replaced inline elements, and elements like and are known as non-replaced inline elements. Replaced inline elements are replaced by something—for example the element is replaced by the image referenced via the src attribute. After the float property is applied to an element, it doesn’t matter if the original element was an inline element or a replaced inline element because a floated element is a block element.