External stylesheets are often associated with HTML documents using the link element, but it is important to use the element's attributes properly. This is because there are three kinds of stylesheets, and the title attribute is key to the establishment of two of them. The presence of the title attribute in a link element that references an external stylesheet can cause the stylesheet to become a preferred stylesheet. This will in most cases cause the external stylesheet to be ignored, which is typically not what an author intends to do.

One of the most common style changes made to lists is a change in the indentation distance-- that is, how far the list items are pushed over to the right. This often leads to frustration, because what works in one browser often doesn't have the same effect in another. For example, if you declare that lists have no left margin, they move over in Explorer, but sit stubbornly in place in Gecko-based browsers.

In order to understand why this is the case, and more importantly how to avoid the problem altogether, it will be necessary to examine the details of list construction.

Almost no matter when you started creating Web pages, odds are pretty high you have one or more designs based on the classic "convoluted tables and lots of images" paradigm. Whether you've sliced up a logo so it fits in well with the design, or used tons of single-pixel spacer GIFs, the principles (and perils) remain largely the same. Back in the early days, this approach worked, because browsers would usually make a table cell exactly as wide and tall as an image it contained.

Fast forward to 2001, and the rise of standards-based browsers that lay out pages using HTML and CSS instead of their own private layout algorithms. Thanks to an obscure corner of the CSS specification, every design based on a precise layout of small images in table cells have become visual disasters just waiting to happen. All it takes is a modern browser and the right DOCTYPE, and kaboom!