Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Working with CSS

Last updated Oct 17, 2003.

By Molly Holzschlag

CSS is human-readable and therefore not too difficult to jump in and begin to learn. However, using it well does demand a learning curve—especially if you are working to achieve pure CSS layouts. The first thing to know about CSS is that there are a variety of ways that you can integrate it with your pages, including right inline using the style attribute, in the head portion of the document using the style element, or linked to the document using the link element.

Another means is via the @import rule, a rule that is used by many designers to easily deliver a plain-vanilla but still readable document to those browsers without any or little CSS support. Better CSS browsers will understand the @import rule and bring in layout styles. You can read more about all of these techniques in the Web Sites sections of this guide.

Box Model

Another important aspect of CSS is how the technology works with the browser in a visual way. A building block of this visual interpretation, as defined by CSS, is known as the box model (see Figure 4).

Figure 4Figure 4 The box model as defined by the W3C's CSS specification.

In the box model, boxes are drawn for every element. Every box created on a page is broken down into the following sections:

  • Content (text and object) areas. These are areas that have a content edge (refer to Figure 4). This edge surrounds the element's literal contents including text or objects such as graphics, Java applets, and so on.

  • Padding. This is the area that surrounds a content area.

  • Borders. Borders denote the box border.

  • Margins. Margins surround the box.

A major problem in terms of CSS support and layout are discrepancies within Web browsers in terms of how the box model is defined. You can read more about this in the resource section of this guide.

Positioning Elements with CSS

CSS layouts are governed by positioning schemes. These are constructs that CSS defines for Web browsers. Here's an overview of each scheme:

  • Normal Flow. This is the normal and expected behavior of a Web browser. Block level elements such as div, p, table, and so forth will create a carriage return, whereas inline elements such as img, a, and span will not.

  • Absolute Positioning. This model allows you to take any box out of normal flow and position it into its own containing block in a specific location identified in the CSS.

  • Relative Positioning. If you position an element as being relative in CSS, that relativity is in relationship to where it would normally be in relation to the normal flow spot in which it would fall.

Finally, the concept of a float scheme relates to positioning schemes. In float, boxes are first laid out by the normal flow rules. Then, they are removed from the flow and moved to the right or the left.

Positioning elements is one of the truly growing areas of the Web design field. As you delve more deeply into CSS via books and online tutorials, be sure to spend plenty of time experimenting with CSS Layouts.

CSS Media Types

Another interesting aspect of CSS is how many media types it supports. Not only can you style for the Web browser, but you can style for other media types (where supported) as well as simply by including CSS authored specifically for a given type. In one common scenario, I would link my document to several external CSS documents: One that styles the document for the screen, another that styles it for print, and still another that styles it for a handheld device.

The current list includes the following media types for CSS2:

  • all. The use of the all value means that the CSS in question will apply to all available media.

  • aural. This media type is specific to speech synthesizers. CSS2 contains properties specifically created to address speech media, which is not only generally helpful, but specifically helpful to the blind.

  • braille. Using braille will format the document according to your CSS for tactile Braille output devices.

  • embossed. This media type is reserved for Braille printers.

  • handheld. Use this media type when styling your documents for small, typically monochrome screens.

  • print. This is your media type for providing a print style to apply whenever your document is printed using a conventional paged printing device.

  • projection. The projection media type allows you to style your document for projection. One common use of this is to create a projection style sheet for use in OperaShow, a projector component within the Opera 6.0+ browsers. Clever designers can use HTML documents with projection styles in that scenario and create a slide show that mimics PowerPoint, yet is completely portable and accessible because it's HTML!

  • screen. This is the media type for color computer screens. Typically, you'll use this media type if you have multiple media types available for a given document. If you're using only one CSS, you can use all.

  • tty. This media type is used for fixed-width character media such as teletype machines or other devices with very limited display abilities.

  • tv. This media type is used for use with television or television-style devices that are typically low-resolution, support color, have sound, but are limited in terms of scrolling capacity.

Conceivably, then, you can create separate different layouts and designs for each of these media—all from the same content. This is one reason why separating structure in HTML and XHTML from presentation using CSS is so important.