Web Depot.

All-CSS Templates

The all-CSS templates are modeled on the original table-based templates. Each template page links to one CSS file. The screen.css file specifies styles for both text and layout.

Developers should read the comment tags in the CSS files to understand how each style is used. Visual editors, such as Dreamweaver and Frontpage, should render the code correctly for design view, allowing you to see the page as it would appear online, but this will vary based on the version of your software, your computer platform, and the content you add.

All-CSS advantages

Web pages coded with CSS rather than tables for positioning offer numerous advantages to both developers and users.

  • • Improved accessibility—Using all-CSS templates will allow you to reach the highest possible number of browsers and devices. Content can be easily read in any browser, phone, PDA, or by those using assistive software such as the JAWS screen reader.
  • • Separation of content and presentation—By using CSS to control a site's design, updates and redesigns become easier. Site-wide changes can be made instantly through the update of a single style sheet. For examples of how powerful CSS design can be, visit the CSS Zen Garden.
  • • Reduced markup—Less code means faster and physically smaller pages.

Not sure you're ready for all-CSS?

Here are a few articles that may help you make your decision (or plead your case):

Why Tables for Layout is Stupid a fun look at tables vs all-CSS from Seybold

The CSS Tutorial

Practical CSS Layout Tips, Tricks & Techniques from A List Apart

Check out the Resources page for more.

Click here to download a template.

Template elements and coding

•To find out more about how and why the templates are structured the way they are, read through the Template Elements section.

To understand the coding behind template elements, read through the coding comments.