Back to CSS Tips
Preview: what the working site looks like.
The markup
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body> 
    <div id="container">
        <aside>
            <p>I like to write <span class="valid" title="CSS 3 and HTML5">code</span> that validates.</p>
        </aside>
                <aside>
                    <p>I like to write <span class="green" title="CSS 3 and HTML5">code</span> that validates.<br />
                    This one is green with a crosshair for a cursor</p>
                </aside>
                        <aside>
                            <p>
                                I like to write 
								<span class="long" title="CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5 CSS 3 and HTML5">code</span> 
								that validates.<br />
                            	Give the span class a width if you want it to wrap.
                            </p>
                        </aside>
    <!--end container--></div>
</body>
</html>
        
The CSS
html, body {
	margin: 0;
	font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
	color: #000;
	background: #fc6;
}
#container {
	width: 800px;
	margin: 0 auto;
	padding: 20px;
	background: #f63;
}
aside {
	width: 400px;
	margin: 100px auto;
	padding: 10px 25px;
	background: #ccc;
}
	aside.span {text-decoration: underline;}
	.valid {
		cursor: help;
		color: #000;
	}
	.green{
		cursor: crosshair;
		color: #00ff00;
	}
	.long {
		width: 200px;
		cursor: help;
		color: #000;
	}