HTML and CSS

HTML should specify the document's content and structure, but not how it looks. We want to use good semantic HTML and control its appearance with CSS (Cascading Style Sheets).

Presentational Markup

Most presentational features from previous versions of HTML are no longer allowed. Presentational markup in general has a number of problems:

  • Poor accessibility - much better to use semantic markup
  • Difficult to maintain - saves time to seperate design elements in to an external style sheet
  • Wastes Bandwidth - Presentational markup is more redundant and will result in larger document sizes. Plus, browsers cache style sheets so they only make one trip across the wire.

For these reasons, presentational markup has been removed from HTML5. HTML4 deprecated presentational markup many years ago and provided a mode (HTML4 Transitional) to help authors move away from presentational markup. Later, XHTML 1.1 went further and obsoleted those features altogether.

CSS (Cascading Style Sheets) allow us to create a design that can easily be applied to other web pages to provide a consistent look and feel across the entire web site. Using CSS, if we make a design change, we can change it in one place - and avoid having to change every page that uses that design.

For a demonstration of what can be accomplished visually through CSS-based design, check out CSS Zen Garden. Be sure to check out different designs by clicking on each link on the right. Keep in mind that all the different designs use the exact same HTML code. Only the style sheet changed.

Check out CSS Tricks's videos available at http://css-tricks.com/video-screencasts/.