4.4 CSS tips

In some cases, it is not immediately obvious how to perform some basic formatting tasks with CSS. This section provides pointers for a few of the most common of these situations.

Indenting:

 
In HTML, whitespace and line breaks in the HTML source are generally ignored, so adding spaces or tabs at the start of the line in HTML code has no effect on the output.

Indenting text away from the left hand edge of the page can be achieved with CSS using either margin or padding properties.

Centering:

 
An element may be centered on the page (more precisely, within its containing element) by setting both the margin-left and margin-right properties to auto.

Floating text:

 
It is easy to start having text flow around another element, such as an image, by specifying something like float: right for the image element. However, it is not as obvious how to stop elements from floating next to each other.

This is what the clear property is useful for. In particular, clear: both is useful to turn off all floating for subsequent elements.

Another way to get nice results is to make use of other people's CSS code. For example, the Yahoo! User Interface Library (YUI)^4.1provides a variety of page layouts via CSS, though there is still the learning curve of how to use YUI itself.

Paul Murrell

This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 New Zealand License.