Originally, web designers were forced to use tables for anything beyond the most basic layout.
CSS has changed that: as browser support for CSS became ubiquitous, pages could be laid out with standard CSS to look the same across browsers. With more features and finer control, CSS now allows us to craft complex page layouts, even to the point of styling differently for different devices.
So the challenge is more deciding what you want to do rather than what you can do. Let's take a look at some of the decision points and some common page layouts.
A CSS shorthand property is a property that can take multiple values, with each value relating to a different regular CSS property. CSS shorthand properties can make CSS pages quicker to develop and to load and easier to maintain.
Navigation bars or menus present a list of choices to the visitor. For example,
Often these choices will have nested options. For example, under About, you might find:
In this lesson, you'll learn how to properly mark up these menus using HTML lists and to use CSS to style them.
Background images can be used to create effects not available in standard CSS (or yet supported by browsers). They can also be used to combine images into a single file to save on download time.
Some of the graphics used in this lesson were contributed by RamblingSoul.com.
HTML Forms are often laid out with two-column tables with the label in the left column and the form field in the right. One could argue that there is nothing semantically wrong with this as the labels are really like headers for the values in the form controls. However, that argument falls apart when table cells are joined (with colspan) to fit wider form controls such as textareas.
Even if you were to carefully layout the form so that the label were in the left column and the form field in the right, the table is not needed. The label tag serves the purpose of providing a "heading" for the form field.
In this lesson, we'll learn how to layout forms without tables using CSS.
In this lesson, we layout practices that we recommend that you consider. We feel more strongly about some than others. At the end of the lesson, we provide a summary table, in which we indicate how strongly we recommend the practice.
Although browsers have much better support for the CSS standard than they did back in the version 4 days, there are still some bugs of which web designers need to be aware. For the most part, these are Internet Explorer bugs, especially in older (9 or earlier) versions. In this lesson, we'll cover some of the most common ones and discuss how to deal with them.