Applying Styles to DIVs

Combining style sheets with divs gives us a very powerful way of controlling how our pages look!

A Simple Example

Earlier is this thread we saw a very bsic HTML page with no structure and no style. Remind yourself how it looked here.

You will notice that the layout of the plain page is very simple. It would be an usual case where such an unstructured page was what you wanted. More usually CSS styles and div elements are used to provide layout containers for the content and structure the appearance of the page.

The next example adds a single div to create a container for the content and then applies some basic styles to the visual appearance of that container. Click here to see the updated page layout. Look at the style rules in the page head and the class and id attributes of the elements.

Study these example pages and make sure that you understand how they work and the differences between them. Again, loading the source for the page into Notepad++, editing it and reviewing the results in a browser is a good way to understand what is going on.

More Complex Examples

The following three example pages work with the basic structure described earlier of a main "container" div, with "header", "content" and "footer" divs. It is important to realize, as you look at the following examples, that the HTML is the same for every page, only the style definitions have been changed.

In the first example, there is no style applied, so the div elements only serve to add structure to the page. Plain DIV Example
In the second example some styles have been applied to add colour and position to the elements. Styled DIV 1
In the third example different styles have been applied to get a very different appearance. Styled DIV 2

In particular, notice that the navigation menu is simply a bulleted list when there are no styles, but it can be made to appear as a horizontal or a vertical menu simply by changing the style definitions. Study the basic HMTL source code for the page - remember, it is the same for all three examples. Then read through the two style sheets to see how the different styles are defined and compare the definitions with the visual appearance of the pages. Don't expect to understand all the details at this stage.

The real power of this technique is not apparent when looking at a single page, but consider an entire site built using divs, ids, classes and style sheets. Now, by changing the styles, you can change the look of the entire site at once!

Dreamweaver makes extensive use of this approach in its page templates for this very reason. Every page on this site is built using the same style sheet, so a change there will affect every page.