This is a header one.

<h1>This is a header one.</h1>

This is a header two.

<h2>This is a header two.</h2>

This is a header three.

<h3>This is a header three.</h3>

This is a header four.

<h4>This is a header four.</h4>

This is a header five.

<h5>This is a header five.</h5>

This is a header six.

<h6>This is a header six.</h6>

This is a sentence wrapped in paragraph tags.

<p>This is a sentence wrapped in paragraph tags.</p>

This is a link.

<a href="#">This is a link</a>

This is bold text.

<strong>This is bold text</strong>

This is italic text.

<em>This is italic text</em>

This is code that we want to display: .blue{color:blue}

<pre><code>.blue{color:blue}</code></pre>

This is the horizontal rule:

<hr />

This is a sentence wrapped in blockquote tags.

<blockquote>This is a sentence wrapped in blockquote tags.</blockquote>

• This
• is
• an
• unordered
• list.

<ul>
<li>This</li>
<li>is</li>
<li>an</li>
<li>unordered</li>
<li>list.</li>
</ul>

1. This
2. is
3. an
4. ordered
5. list.

<ol>
<li>This</li>
<li>is</li>
<li>an</li>
<li>ordered</li>
<li>list.</li>
</ol>

<input type="text" value="This is a text input." size="25" />

This is a textarea.

<textarea rows="5" cols="50">This is a textarea.</textarea>

<input type="submit" value="This is a submit input." />

<img src="img.jpg" alt="This is an image." />

<i class="icon icon-apple" title="This is an icon."></i>

☮

<span class="symbol" title="This is a symbol.">☮</span>

This is the default button.

<a href="#" class="button">This is the default button.</a>

This is a round button.

<a href="#" class="button round">This is a round button.</a>

This is a circle button.

<a href="#" class="button circle">This is a circle button.</a>

This is a button set to white.

<a href="#" class="button white">This is a button set to white.</a>

This is a button set to blue.

<a href="#" class="button blue">This is a button set to blue.</a>

This is a button set to dark blue.

<a href="#" class="button blue-dark">This is a button set to dark blue.</a>

This is a button set to green.

<a href="#" class="button green">This is a button set to green.</a>

This is a button set to dark green.

<a href="#" class="button green-dark">This is a button set to dark green.</a>

This is a button set to orange.

<a href="#" class="button orange">This is a button set to orange.</a>

This is a button set to purple.

<a href="#" class="button purple">This is a button set to purple.</a>

This is a button set to red.

<a href="#" class="button red">This is a button set to red.</a>

This is a button set to yellow.

<a href="#" class="button yellow">This is a button set to yellow.</a>

This is a button set to black.

<a href="#" class="button black">This is a button set to black.</a>

<span class="note yellow">This is a caution note.</span>

<span class="note red">This is a warning note.</span>

<div class="boxes">
<div class="box">This is a single-column box.</div>
</div>

<div class="boxes">
<div class="box-2">This is a two-column box.</div>
<div class="box-2">This is a two-column box.</div>
</div>

<div class="boxes">
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
<div class="box-3">This is a three-column box.</div>
</div>

<div class="boxes">
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
<div class="box-4">This is a four-column box.</div>
</div>

<div class="boxes">
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
<div class="box-5">This is a five-column box.</div>
</div>

<div class="boxes">
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
<div class="box-6">This is a six-column box.</div>
</div>

<div class="boxes">
<div class="box-1-3">This is a one-third box.</div>
<div class="box-2-3">This is a two-thirds box.</div>
</div>

If your system/browser is set to prefer dark mode, this page should be black. Otherwise, it'll be white.

@media(prefers-color-scheme:light){body{background:#fff}}
@media(prefers-color-scheme:dark){body{background:#000}}

Additional Helper Classes

.left{text-align:left}
.center{text-align:center}
.right{text-align:right}
.float-left{float:left}
.float-right{float:right}
.clear{clear:both}
.clear-left{clear:left}
.clear-right{clear:right}
.clear-float:after, .boxes:after{display:table;content:'';clear:both}
.offset{padding-top:100px;margin-top:-100px}
.spacer{display:inline-block;width:25px}
.lighter{background-color:rgba(255,255,255,0.05)}
.darker{background-color:rgba(0,0,0,0.05)}
.overlay:before{position:fixed;top:0;left:0;width:100%;height:100%;content:'';background:rgba(0,0,0,0.5);z-index:0}