HTML Test Page for CSS Style Guide

Submitted by:Andery Smith

Date added:21 December, 2013

Category:HTML

Great page for testing the style guide for a website.

Tags: test page , css style guide

Code Snippet:

    <!-- Sample Content to Plugin to Template -->
<h1>CSS Basic Elements</h1>

<p>The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>

<hr />

<h1 id="headings">Headings</h1>

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<small><a href="#wrapper">[top]</a></small>
<hr />


<h1 id="paragraph">Paragraph</h1>

<img style="width:250px;height:125px;float:right" src="images/css_gods_language.png" alt="CSS | God's Language" />
<p>text <a href="#" title="test link">test link</a> text</p>

<p>text, <em>emphasis</em> text</p>

<small><a href="#wrapper">[top]</a></small>
<hr />

<h1 id="list_types">List Types</h1>

<h3>Definition List</h3>
<dl>
<dt>Definition List Title</dt>
<dd>This is a definition list division.</dd>
</dl>

<h3>Ordered List</h3>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ol>

<h3>Unordered List</h3>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
</ul>

<small><a href="#wrapper">[top]</a></small>
<hr />

<h1 id="form_elements">Fieldsets, Legends, and Form Elements</h1>

<fieldset>
<legend>Legend</legend>

<p>text</p>

<form>
<h2>Form Element</h2>

<p>text</p>

<p><label for="text_field">Text Field:</label><br />
<input type="text" id="text_field" /></p>

<p><label for="text_area">Text Area:</label><br />
<textarea id="text_area"></textarea></p>

<p><label for="select_element">Select Element:</label><br />
<select name="select_element">
<optgroup label="Option Group 1">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
<optgroup label="Option Group 2">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</optgroup>
</select></p>

<p><label for="radio_buttons">Radio Buttons:</label><br />
<input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
<input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
<input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
</p>

<p><label for="checkboxes">Checkboxes:</label><br />
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
</p>

<p><label for="password">Password:</label><br />
<input type="password" class="password" name="password" />
</p>

<p><label for="file">File Input:</label><br />
<input type="file" class="file" name="file" />
</p>


<p><input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
</p>



</form>

</fieldset>

<small><a href="#wrapper">[top]</a></small>
<hr />

<h1 id="tables">Tables</h1>

<table cellspacing="0" cellpadding="0">
<tr>
<th>Table Header 1</th><th>Table Header 2</th><th>Table Header 3</th>
</tr>
<tr>
<td>Division 1</td><td>Division 2</td><td>Division 3</td>
</tr>
<tr class="even">
<td>Division 1</td><td>Division 2</td><td>Division 3</td>
</tr>
<tr>
<td>Division 1</td><td>Division 2</td><td>Division 3</td>
</tr>

</table>

<small><a href="#wrapper">[top]</a></small>
<hr />

<h1 id="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>

<p>text <sup>superscript</sup> dolor <sub>subscript</sub> text <cite>cite</cite>. text <acronym title="National Basketball Association">NBA</acronym> text <abbr title="Avenue">AVE</abbr></p>

<pre><p>text. <acronym title="National Basketball Association">NBA</acronym> text. <abbr title="Avenue">AVE</abbr></p></pre>

<blockquote>
"This stylesheet is going to help so freaking much." <br />-Blockquote
</blockquote>

<small><a href="#wrapper">[top]</a></small>
<!-- End of Sample Content -->
 
 

Comments