Style Tricks

If you ever work with HTML, you are probably familiar with the stylesheet language known as Cascading Style Sheets (CSS). The purpose of CSS is to let you separate the presentation of a web page from the content. The content is described through a markup language such as HTML or XHTML. The presentation is managed through CSS.

Separating content from presentation makes the HTML cleaner and easier to read, and it also means that you can change the presentation across a whole site much more easily. Do you want to change all your h1 headers from centered blue 20-pt to left-aligned red 24-pt? With CSS, you can do that by changing a single file. CSS also improves accessibility; users with special needs can easily create custom style rules for easier access.

CSS Rules

Although it is possible to put CSS rules in an HTML file, it is better to create a separate CSS file, because it gives you a central point for managing the style. In a typical CSS scenario, the HTML header will look like that shown in Listing 1, and the CSS file will look like Listing 2.

Note that you can apply styles to all instances of a particular HTML tag (as with <h1>) or only to certain instances by labeling them with a class type.

Artful Expression

CSS does far more than allow you to change the color, size, or background. Artful use of CSS lets you add interesting new elements to your site, and CSS can even help you replace difficult-to-use tables and Javascript. This article goes beyond the headings and fonts to show how you can easily add new features to your website with CSS. Read on for a look at how you can employ the expressive power of CSS in your own environment. This article assumes you have some basic familiarity with CSS.

For additional information, try the W3C Cascading Stylesheets homepage [1]. You'll also find several CSS tutorials on the web [2].

A very common page layout is one that has multiple columns on a page. Previously, you might have handled multiple columns with the use of a table, but the table option is frowned upon from an accessibility point of view, and a table can be difficult to maintain. It's easy to get confused about what part of the page is where, and to forget to close off your tables, cells, and rows properly, which might confuse some browsers.

Float

CSS to the rescue: You can use the float property to make your layout multi-columned but clear and easy to use.

Listing 3 shows the HTML for a two-column layout with a full-page-width header and footer; Listing 4 shows the CSS. Listing 3 uses id to identify the containers rather than name or class, although these options work in similar ways.

The class is best used when you have more than one example of the type on a page. With this column layout, you should have only one columnone per page. The id is better for identifying a particular type of an element, whereas name is good for identifying a particular instance of an element – for example, a specific menu item on a page. In this case, I want to identify a generic type of element (e.g., a columnone sort of div), so I use id.

The width of column 1, plus the width of column 2, plus twice the padding of column 1 (once for the left side, once for the right side), plus twice the padding of column 2 need to add up to 100% or less for the float to work correctly.

The footer uses the clear property to make sure it stays below both the previous floats. This means that the container element will extend around all of the other elements.

To explain that last statement a bit further: Floating elements don't "count" in the page layout. When the browser is laying out the page, floated elements are put "on top" of other elements, rather than placed in the regular flow of the page. If you don't have an element after your floats that uses clear, then they won't be within any container element – they look like they're floated on top of the container element, instead. This almost certainly isn't what you need, so here I use a footer. (It doesn't have to have any content!)

If you want to add a third column, you can add another float: left <div>, or you can float one column left and another one right, if you prefer, with a static central column. Again, make sure the width of all three columns plus their padding on each side adds up to less than 100% of the page width; otherwise, one of the columns will be forced below the others.

The use of percentages means that as people shrink or enlarge their browser windows, the columns and other elements will shrink and grow accordingly. This approach is more flexible than hard-coding the width of the elements. However, you can use min-width or max-width if you don't want them to be shrunk below a particular size. If you put min-width on the container element, scrollbars will appear if the user tries to shrink the browser window below this size. This technique can be useful if you want a fairly narrow column on one side and you don't want it to shrink beyond the width of, say, a menu item title.

The other attributes – background and font-style, for example – set other properties of the containers.

See Figure 1 for a look at this basic layout.