We are going to use a CSS-free review of E.R. Eddison’s Mistress of Mistresses as an example. Open the file “mistress.html” in your browser. As it stands, it is a perfectly readable page, but it does not draw the reader’s attention as it should. The headlines do not stand out from the body, and the recommendations lie lifeless on the left of the page along with everything else.
Over the course of this tutorial we’re going to provide a layout to this page. We’ll make it more readable on the screen, and when we’re done we’ll also make it more readable on paper.
- Getting started
- If you open mistresses.html in a text editor (such as Fraise on Mac OS X), you’ll see that it references a file called “reviews.css”:
- Writing your HTML
- When you create the HTML for your web page, you’ll want to create it structurally, without regard for layout. There are many different kinds of browsers reading your page; the HTML is not read just by browsers that render the HTML to the screen. Put the elements of your page in the order that they should be read, not in the order that they should be rendered to the screen.
