ASSIGN CSS STYLES TO LAYOUT ELEMENTS

The examples throughout this chapter have used borders to give you a rough idea as to how the semantic layout elements are being placed by your web browser. These borders, although ugly, have served their purpose, as the content in the example is now relatively populated and in the right place. It is now time to assign proper CSS styles to your semantic layout elements.

Work through one bordered block at a time, applying the style for the final page layout. In other words, do not strip everything; otherwise, you may forget where and how different layout elements interacted with each other. This can be especially true if you are using any modifying float, clear, or width properties.

When laying out your page, ...

Get HTML5: Your visual blueprint™ for designing rich web pages and applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.