Clean up your markup for safe CSS

Start with an HTML4 DOCTYPE
```
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.0 Transitional//EN">
```
- switch to Strict HTML4/XHTML1.0 when you can

Close your tags

<p>...<table>... <p>...</p><table>...</table>

No inappropriate nesting
```
<a><h1>...</h1></a> <h1><a>...</a></h1>
```
Validate with:
- validator.w3.org
- Editor-validators: e.g. BBEdit
- The Multivalidator favelet

Leaving the <B>ed & <BR>eakfast

CSS simplification

Presentational headings...

<b><font size=6 face=Georgia>
   Top Level Heading
</b></font>

...are easily made semantic
```
<h1>Top Level Heading</h1>
```

...and restyled with CSS

h1 { font: bold xx-large Georgia,serif; }

Top Level Heading

Leaving the <B>ed & <BR>eakfast

CSS restyling
- Make your <h1>s green with one line of CSS
```
h1 { color:green }
```
  instead of "color=green" on all those font tags
  
  Top Level Heading
- and center align them
```
h1 { text-align:center }
```
  without <center> tags
  
  Top Level Heading

Beyond the <B>ed & <BR>eakfast

CSS styling beyond HTML presentation
- features like text-transform:uppercase
```
h1 { text-transform:uppercase }
```
  Top Level Heading
- and letter-spacing
```
h1 { letter-spacing:.25em }
```
  Top Level Heading

Leaving the <B>ed & <BR>eakfast II

<BR>oken paragraphs

<br>
<br>
Lorem ipsum decorum non-sequitorum ... 
<br>
<br>
Noctrun caffeinitium leadum toum narcolepsum...

...are easily made whole

<p>
Lorem ipsum decorum non-sequitorum ...
</p>
<p>
Noctrun caffeinitium leadum toum narcolepsum...
</p>

Vertical space control

Double vertical paragraph spacing
```
p { margin:2em 0 2em 0 } 
/* clockwise setting: top right bottom left */
```
Lorem ipsum decorum non-sequitorum leadum toum unexpectum ohno makem wrappinum even morem tomak emwrap nnow alastbitum...

Noctrun caffeinitium leadum toum narcolepsum. Neenum nacken wappin ginin even andum moremto makenwrap nnow alastbitum...

Tightening and indenting

Eliminate vertical paragraph spacing
```
p { margin:0 } 
/* one value shorthand sets all four sides */
```
Lorem ipsum decorum non-sequitorum leadum toum unexpectum ohno makem wrappinum...

Noctrun caffeinitium leadum toum narcolepsum. Neenum nacken wappin ginin...
and add traditional paragraph indentation
```
p { text-indent:2em }
```
Lorem ipsum decorum non-sequitorum leadum toum unexpectum ohno makem wrappinum...

Noctrun caffeinitium leadum toum narcolepsum. Neenum nacken wappin ginin...

CSS & the Semantic Spectrum

HTML tags range across a semantic spectrum
Purely presentational to highly meaningful

CSS helps you advance to simpler but richer markup

by leaving presentational markup behind

 - presentational.............structural.................semantic +
    <font>.....<b>,.....<br>.....<div>,....<p>.....<ul>.....<dfn>,
   bgcolor.....<i>...............<span>....<em>....<h1>.....<code>

But beware of tag abuse!
Do not use tags inappopriate for the content
- e.g. <h1> just to get "large text"
- or <blockquote> for a block of text that's not a quote

For more...

Check out CSS Examples
Install Favelets
Use "View Style Sheets" to learn from others' CSS
- just as you learned others' HTML with "View Source"
Read Inclusive Design for the Future
- presented yesterday by Steven Champeon and Nick Finck
Articles:
- alistapart.com
- digital-web.com
Blogs:
This presentation is available:
- http://tantek.com/presentations/2003SXSW/stylesheets.html

SXSW 2003

CSS: Between the Style Sheets

CSS: Between the Style Sheets

Tantek Çelik

Microsoft Tasman development and W3C diplomat

tantek.com and favelets.com

Clean up your markup for safe CSS

Leaving the <B>ed & <BR>eakfast

Top Level Heading

Leaving the <B>ed & <BR>eakfast

Top Level Heading

Top Level Heading

Beyond the <B>ed & <BR>eakfast

Top Level Heading

Top Level Heading

Leaving the <B>ed & <BR>eakfast II

Vertical space control

Tightening and indenting

CSS & the Semantic Spectrum

For more...