<!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>
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;
}