Tutorial: Why Layout?

By default web browsers display content in your web pages so they fill up the entire browser window. Try re-sizing the browser window on your web pages from last week to see how the content always goes all the way across the window. As the window gets very wide, the page starts to look very stretched out:

 

What if we wanted our content area to be centered within the browser window no matter how wide the window gets? Here is the same page above, but with the content inside a fixed-width rectangle of 800 pixels that is always centered in the browser window:

But we can go further. What if we wanted the main content area to have a different background color? The header at the top to be centered on the page? A separate section for the footer at the bottom? Borders, rounded corners? All of this is possible using basic HTML and CSS:

 

The way your HTML elements are displayed on the page is generally referred to as layout. Fortunately HTML and CSS (styles) together provide many ways to specify how elements should be arranged on the page. Read on to learn about a new set of HTML tags that can help define content areas on the page, and how to use styles to make your pages look just the way you want.