edit-styles.html

<!DOCTYPE html>
<html>
<head>
<title>Style Editing</title>
<style type="text/css">
head, style[contenteditable] {display: block;}
style[contenteditable] {
  font-family: monospace; white-space: pre; padding: 0.5em;
  border: 1px dotted red; background: white;}
</style>
<style type="text/css" contenteditable>/* Edit the embedded style sheet! Gecko users: use Shift-Return to get "normal" line breaks. */
body {background: #AEA;}
h1, h2, h3 {margin-bottom: 0.25em; border-bottom: 1px dotted grey;}
p {text-indent: 2.5em;}
li {list-style: square;}
</style>
</head>
<body>

<h1>Heading-1</h1>
<p contenteditable>A paragraph.  Do you have a scheme to become B2C2B? Without meticulously-planned dot-com aggregation, e-services are forced to become virally-distributed. The markets factor can be summed up in one word: C2C2B. What does the term "social networks" really mean? Think visionary. If you generate proactively, you may have to e-enable interactively. We apply the proverb "Grass doesn't grow on a racetrack" not only to our re-purposing but our power to matrix.</p>

<h2>Heading-2</h2>
<p>A paragraph.  If all of this comes off as dumbfounding to you, that's because it is! Our feature set is unparalleled in the industry, but our reality-based systems and simple use is usually considered a remarkable achievement. The power to brand robustly leads to the aptitude to embrace seamlessly. What do we streamline? Anything and everything, regardless of reconditeness! We invariably evolve holistic users. That is a remarkable achievement when you consider the current fiscal year's market conditions!</p>

<ul>
<li>An unordered list.</li>
<li>With list items.</li>
<li>Like this one.</li>
</ul>

<h3>Heading-3</h3>
<p>A paragraph.  Do you have a game plan to become strategic? Think mega-mega-intra-affiliate-based. What do we utilize? Anything and everything, regardless of abstruseness! We will incentivize the capability of user-centric technologies to orchestrate. We will evolve the term "next-generation". What does the buzzword "real-time" really mean? We pride ourselves not only on our sticky feature set, but our user-proof administration and newbie-proof configuration. Imagine a combination of PHP and CSS. If all of this seems perplexing to you, that's because it is!</p>

<table id="checkerboard">
<tr>
<td>r1c1</td><td>r1c2</td><td>r1c3</td><td>r1c4</td><td>r1c5</td><td>r1c6</td><td>r1c7</td><td>r1c8</td>
</tr>
<tr>
<td>r2c1</td><td>r2c2</td><td>r2c3</td><td>r2c4</td><td>r2c5</td><td>r2c6</td><td>r2c7</td><td>r2c8</td>
</tr>
<tr>
<td>r3c1</td><td>r3c2</td><td>r3c3</td><td>r3c4</td><td>r3c5</td><td>r3c6</td><td>r3c7</td><td>r3c8</td>
</tr>
<tr>
<td>r4c1</td><td>r4c2</td><td>r4c3</td><td>r4c4</td><td>r4c5</td><td>r4c6</td><td>r4c7</td><td>r4c8</td>
</tr>
<tr>
<td>r5c1</td><td>r5c2</td><td>r5c3</td><td>r5c4</td><td>r5c5</td><td>r5c6</td><td>r5c7</td><td>r5c8</td>
</tr>
<tr>
<td>r6c1</td><td>r6c2</td><td>r6c3</td><td>r6c4</td><td>r6c5</td><td>r6c6</td><td>r6c7</td><td>r6c8</td>
</tr>
<tr>
<td>r7c1</td><td>r7c2</td><td>r7c3</td><td>r7c4</td><td>r7c5</td><td>r7c6</td><td>r7c7</td><td>r7c8</td>
</tr>
<tr>
<td>r8c1</td><td>r8c2</td><td>r8c3</td><td>r8c4</td><td>r8c5</td><td>r8c6</td><td>r8c7</td><td>r8c8</td>
</tr>
</table>


</body>
</html>