HTML and CSS

Using CSS

Cascading Style Sheets have been around since the end of 1996. Despite the relative longevity of the technology, its use in real-world web design has been limited to managing fonts and color, at least until recently. This limitation was imposed by the lack of consistent browser support. Because not all browsers managed CSS equally (if at all), it has been very difficult for designers to tap into the true power of style sheets. Instead, there's been a reliance on HTML for presentation.

Now we have far better support for CSS, so to tap into its many valuable features, web designers are moving away from HTML as a means of adding style and laying out pages, and into pure CSS design. Why is this so important? The reasons are many:

  • Keeping presentation separate from the document means you can style that document for numerous media, including the screen, print, projection, and even handheld devices.
  • Separating presentation from the document means a lighter document, which, in turn, means the page loads and renders faster, making for happier visitors.
  • CSS offers ways to control one document or millions of documents. Any time you'd like to make a change, you change that style in one location and automatically update to all the documents with which that CSS is connected. In HTML, this couldn't be done.
  • CSS documents are cached. This means they are loaded into your browser's memory one time. As you move within a site, the browser never has to reinterpret the styles. The results are more fluid movement from page to page and faster-loading pages, which, of course, is always desirable.
  • By separating presentation from structure and content, accessibility is easily achieved. Documents that don't have heavy tables and lots of presentational HTML are inherently more accessible than documents that do.

Clearly, CSS offers a lot. In this tutorial, you'll learn how to set up CSS to be most efficient and flexible for your designs.