text.html

<style type="text/css">
.dropcap:first-letter {
	float: left;
	font-size: 4em;
	line-height: .8em;
	margin-right: 3px;
	padding: 2px;
}

h1 + p:first-letter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 width : 1em;
 color : #c00;
 }
 
p.intro.firstletter {
 font-size : 300%;
 font-weight : bold;
 float : left;
 color : #c00;
 }
 
	#colored {
		color: #0f0;
	}
	.blue {
		color: #00f;
	}
	.large {
		font-size: 32px;
		color: #f0f;
	}
	.shadow {
		text-shadow: 1px 2px 2px #333;
	}
	.green, .rounded {
		color: #fff;
		padding: 2px 3px;
		margin: 3px 0;
		font-weight: bold;
	}
	.green {
		background-color: #0ea10e;
	}
	h1 {
		font-size: 48px;
		font-weight: bold;
	}
</style>

<p class="dropcap"> This paragraph has the class "introduction". If your browser supports the pseudo-class "first-letter", the first letter will be a drop-cap. </p>

<h1>Styled Labels</h1>
		
This module gives you access to HTML and CSS without the full weight of a browser.

<h2>Simple Formatting Options</h2>
<ul>
	<li><b>Bold</b></li>
	<li><i>Italic</i></li>
	<li><u>Underlined</u></li>
	<li><strike>Strike-Through</strike></li>
</ul>
<h2>CSS Styling</h2>
<ul>
	<li><span id="colored" class="blue">Colored</span></li>
	<li><span class="large">Sized</span></li>
	<li><span class="shadow">Shadows</span></li>
	<li><span class="green">Background Colors</span></li>
	<li style="color: red; color: green;">Inline Styles</li>
</ul>
<h2>Hyperlinks</h2>
<a href="http://www.google.com">Hyperlinks</a> you can touch
<h2>Images</h2>
<ul>
	<li>Local Images:<br /><img src="platform.png"/></li>
	<li>Remote Images:<br /><img src="http://appc.me/content/kitten.jpg" /></li>
</ul>