XHTML & CSS: A Web Standards Approach

The magical key

What Does XHTML Look Like?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>
	<title></title>
</head>

<body>
</body>

</html>

What Does CSS Look Like?

h2 { /* for all <h2></h2> */
	color: #C7CDD4;
}

#content {  /* for <div id="content"></div> */
	position: relative;
}

th, .alternative { /* for all <th></th> and <td class="alternative"><td> */
	background: #eee;
}

#content h2 { /* for all <h2></h2> within <div id="content"></div> */
	color: red;
}

The Three Style Sheets

Applying CSS to XHTML

Text - The Common Tags

Text - The Not So Common Tags

<p>A snippet of <abbr title="Cascading Style Sheets">CSS</abbr> from <cite>HTML Dog</cite>:</p>
<pre>
	<code>body {
		font: 80%/1.5 arial, helvetica, sans-serif;
	}
	</code>
</pre>

Links

<a href="somewhere.html" accesskey="s" tabindex="6" title="Contact Us">Contact us<a>

a:link { color: #45a }
a:visited { color: #a5a }
a:hover { text-decoration: none }
a:active { color: #a54 }

Customise underlines

Some basic CSS

body {
	font: 80%/1.6 arial, helvetica, sans-serif;
	color: #C7CDD4;
	margin: 0;
}

h1 {
	font-size: 1.5em;
}

#navigation a {
	font-weight: bold;
	font-size: italic;
}

Images

The Three Lists

<ul>
	<li><code>ul</code></li>
	<li><code>ol</code></li>
	<li><code>dl</code></li>
</ul>

Lists as navigation

Layout

The Box Model

The box model

The Box Model (cont'd)

#content {
	padding: 1em;
	border: 1px solid #4F2C8A;
	margin: 1em 30px 2em 300px;
	width: 20em;
}

Positioning and Floating

#navigation {
	position: absolute;
	width: 200px;
	right: 0;
}

Scripts

Objects

<object type="application/x-shockwave-flash" data="whatever.swf">
	<param name="movie" value="whatever.swf" />
	<p>You don't have the Flash plugin.</p>
</object>

Forms

<form action="someplace.php" method="post">

<fieldset>
	<legend>Personal details</legend>
	<label for="yourname">Your name:</label><input name="yourname" id="yourname" />
	<label for="address">Address:</label><textarea name="address" id="address" rows="5" cols="20"></textarea>
	<label for="bug">Can we bug you with incessant, irritating and irrelevant emails?</label><input type="checkbox" checked="checked" name="bug" id="bug" />
	<input type="submit" />
</fieldset>


</form>

Forms (cont'd)

<select name="book" multiple="multiple">
	<optgroup label="Camus">
		<option>The Outsider</option>
		<option>The Rebel</option>
		<option>The Plague</option>
	</optgroup>
	<optgroup label="Orwell">
		<option>Animal Farm</option>
		<option value="1984">Nineteen Eighty-Four</option>
		<option value="Down and out">Down and Out in Paris and London</option>
	</optgroup>
</select>

Styling forms?

Tables aren't evil!

<table summary="A brief overview of animals belonging to certain taxonomic groups">
	<caption>Animal groups</caption>

	<tr>
		<th scope="col">Cats</th>
		<th scope="col">Dogs</th>
		<th scope="col">Lemurs</th>
	</tr>

	<tr>
		<td>Tiger</td>
		<td>Grey Wolf</td>
		<td>Indri</td>
	</tr>

	<!-- etc. -->
</table>

Collapsing borders

By default borders are separated

table {
	border-collapse: collapse;
}

th, td {
	border: 1px solid #999;
}

Same Content, Different Styles

Styling for Print

body { font: 12pt "Times New Roman", Times, serif }

#nav, form { display: none; }

Web Standards Unlocked