Seminars for Technical Writers

CSS Best Practices

Learn how to write clear, elegant HTML to build even the most complex web pages and web-based documentation easily. See how CSS can help you create web pages that are easy to write, quick to download, and easy to update.

Syllabus

Introduction to CSS

  • It is now possible to comfortably hand-write web pages again.
  • CSS advantages: Save authoring and editing time, save file size, and save money.
  • The old FONT tag is deprecated. CSS replaces that HTML element completely.
  • Web sites used to require tables to create multi-column layouts. CSS does away with this requirement, resulting in an enormous simplification of the HTML code.
  • The basic elements of any web page are H1, H2, P, UL, OL, DIV, and so on.

Structural Markup

  • “Structural markup” is using the HTML elements to describe what the parts of a web site actually do, not how they look.
  • Structural markup makes writing HTML easier.
  • Structural markup is important for devices other than web browsers, such as handheld computers and screen readers for the blind. It also improves search engine results.

Style Sheet

  • Style sheets can define how the basic HTML elements should be displayed in a browser. A style sheet will typically define the appearance of P, H1, H2, LI, and so on.
  • Style sheets make it possible to completely transform a page without editing the HTML.

Embedded versus External

  • The power of the style sheet is that one document controls the layout for the entire project.
  • External style sheets are invoked using the LINK element and/or the @IMPORT declaration.

Browser support

  • Not all web browsers are created equal. Some support CSS better than others. The difficulty comes in with CSS layout — it can break on older browsers.
  • Mozilla provides the most robust support for CSS. Internet Explorer is the weakest.

Presentation Files

  • Download the CSS Best Practices Presentation (zip file, 1.1 MB). The presentation was created using HTML and CSS, and requires a fairly large browser window to be displayed properly. It also requires a fairly recent web browser. Sorry, IE 5.x Mac users—use Safari or Mozilla.
  • Update: At the time this presentation was written, both Internet Explorer and Netscape were no longer being updated. The Netscape division of AOL had folded, while Microsoft had decided that updating their browser was no longer in their strategic interest.To my surprise, both browsers are now being updated. Clearly, the increased competition from the open-source browser Firefox has spurred these companies to keep in the race. A beta of Netscape 8 is expected in early 2005, while a beta of Internet Explorer 7 should arrive in mid-2005 (but for Windows XP SP2 only).