CSS for Beginners

All too often, the CSS for major (and minor) websites is a textbook case of code bloat and redundancy. We can all institute several basic, solid CSS writing practices to vastly improve the maintainability of any organization’s stylesheets making our approach two-fold. First, writing clean and efficient CSS. Second, CSS architectures. This article will explore both of these topics as well as several tips and tricks.

Articles and presentation on aspects of CSS, accessiblity and web standards. Topics include CSS page layout tutorials, CSS layout samples, liquid layouts, styling lists, definition lists, centering with CSS, source order, skip links, web standards checklists and web standards workshops.

Using css as diagnostic tool.

Despite all the point-and-click editors out there, many of us still write code by hand, and many more find themselves with the need to sort out what another author (or the point-and-click editor) has generated. Finding the weak points and structure of a page is often one of the most time-consuming jobs a webmaster has to face. And let’s be honest; it’s not much fun either.

What would you say if I told you that you can create your own diagnostic tools using nothing more than commonly available software you can download over the Internet and some simple CSS? You’d probably say I was crazy. You might be right, but so am I. You really can save yourself a lot of time and headaches with a combination of a browser and some fairly simple CSS.

How? As we’ll see, simple user stylesheets can be used to:

• See exactly how tables are structured
• Figure out how table cells are aligned
• Quickly see which images on a page still need ALT text
• Point out where you still have FONT tags lurking in your markup
• Expose the overall page structure

The inspiration for this particular approach came after reading the excellent article by Andrew Wooldridge of Netscape. Once Andrew showed me the way, the rest began to fall into place.