Accessibility
Stephanie Sullivan

Stephanie Sullivan

W3Conversions

Table of Contents

  1. Introduction
  2. Start with clean code
  3. Instant layout, just add styling
  4. Background colors: A beautiful thing
  5. Beyond colors: Images and shapes
  6. Bordering on insanity
  7. Imageless headings? Surely you jest!
  8. Links, the spider's web
  9. A nice big decorative letter, in plain text
Created:
2 February 2009
User Level:
Beginner
Products:
Dreamweaver

Simple styling with CSS

Tableless layout, around for years and years, has become more of a hot topic lately. Designers and developers who resisted the changes in the industry have finally realized that web standards, and the design principles that accompany them, are here to stay.

With each new technology that emerges, your visitors' attention spans shorten and people expect more speed from their web experiences. If your web pages don't load quickly, the visiting surfer will take the next wave out and move on. Many designers do understand this fact. However, what confuses people is the belief that designing quick-loading pages necessarily leaves them no choice but to design ugly, plain-vanilla sites. Not true. The magic of cascading style sheets (CSS) lets you have your cake and eat it too. Pages that download quickly, yet look appealing, are no problem using HTML, CSS, and (sometimes) a dash of JavaScript.

The purpose of this article is not to convince you of the virtues of CSS over tables for positioning, to explain all the advantages of CSS, or even to teach you about best practices with CSS. Tableless layout is not a prerequisite to styling with CSS. For many people, learning CSS styling techniques allows them to subsequently move on to experimenting with CSS placement techniques.

Note: To learn more about CSS, refer to the Learn to work with CSS page in the Dreamweaver Developer Center.

The purpose of this article is to take you on the initial journey—one that gives you an idea of how easy it is to separate your content from its presentation. I'll show you techniques that reduce your page-load time and file size tremendously by using CSS to create background colors, borders, and font styling These techniques enable you to cut the images used in your web pages down to a minimum. The page you'll create isn't beautiful. It's silly and fun. But it will teach you techniques and give you ideas to create your own, much more attractive pages.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

Sample files:

Prerequisite knowledge

A basic understanding of HTML and CSS concepts is required.

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License

Page 1 of 9
Next Page

About the author

In demand by top U.S. firms, Stephanie Sullivan is a world-class web standards, Dreamweaver, and accessibility expert whose razor-sharp CSS and (X)HTML skills make her company, W3Conversions, a peerless authority for training corporate web teams and transforming in-house designs into efficient, standards-based websites. Sullivan created the CSS layouts for Dreamweaver CS3 and is coauthor of the respected project-based book Mastering CSS with Dreamweaver CS3 and Mastering CSS with Dreamweaver CS4. She's co-leader of the influential Web Standards Project Adobe Task Force, a partner at Community MX, and a speaker who engages audiences around the world with her dynamic presentations. When she's not coding or talking to the little people inside her computer, she escapes to play squash or beach volleyball. Yes, she loves 80s Wave music.