Skip to content

Instantly share code, notes, and snippets.

@daveWid

daveWid/css_test.html

Created February 16, 2012 16:20
Show Gist options
  • Save daveWid/1846181 to your computer and use it in GitHub Desktop.
Save daveWid/1846181 to your computer and use it in GitHub Desktop.
Download ZIP
A page with a wide gamut of HTML tags on it so you can test your CSS.
Raw
css_test.html
<!doctype html>
<html>
<head>
<title>CSS Testing Page</title>
</head>
<body>
<h1>Heading 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec
tincidunt neque. Aenean augue elit, blandit congue vehicula sit amet,
condimentum id lorem. Aliquam malesuada aliquam eros ut pulvinar.
Suspendisse potenti. Maecenas consectetur libero ut justo dictum non =
tristique mi blandit.</p>
<h2>Heading 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec
tincidunt neque. Aenean augue elit, blandit congue vehicula sit amet,
condimentum id lorem. Aliquam malesuada aliquam eros ut pulvinar.
Suspendisse potenti. Maecenas consectetur libero ut justo dictum non =
tristique mi blandit.</p>
<h3>Heading 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec
tincidunt neque. Aenean augue elit, blandit congue vehicula sit amet,
condimentum id lorem. Aliquam malesuada aliquam eros ut pulvinar.
Suspendisse potenti. Maecenas consectetur libero ut justo dictum non =
tristique mi blandit.</p>
<h4>Heading 4</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec
tincidunt neque. Aenean augue elit, blandit congue vehicula sit amet,
condimentum id lorem. Aliquam malesuada aliquam eros ut pulvinar.
Suspendisse potenti. Maecenas consectetur libero ut justo dictum non =
tristique mi blandit.</p>
<h5>Heading 5</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec
tincidunt neque. Aenean augue elit, blandit congue vehicula sit amet,
condimentum id lorem. Aliquam malesuada aliquam eros ut pulvinar.
Suspendisse potenti. Maecenas consectetur libero ut justo dictum non =
tristique mi blandit.</p>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec
tincidunt neque. Aenean augue elit, blandit congue vehicula sit amet,
condimentum id lorem. Aliquam malesuada aliquam eros ut pulvinar.
Suspendisse potenti. Maecenas consectetur libero ut justo dictum non =
tristique mi blandit.</p>
<h2>Forms</h2>
<form action="#" method="get">
<fieldset>
<legend>Text Inputs</legend>
<div>
<label for="itext">Text</label>
<input type="text" id="itext" name="itext" value="" placeholder="Placeholder text" />
</div>
<div>
<label for="ipassword">Password</label>
<input type="password" id="ipassword" name="ipassword" value="" />
</div>
<div>
<label for="ita">Textarea</label>
<textarea id="ita"></textarea>
</div>
<div>
<label for="ifile">File</label>
<input type="file" name="ifile" id="ifile" />
</div>
</fieldset>
<fieldset>
<legend>Form Controls</legend>
<div>
<label for="iselect">Select Box</label>
<select id="iselect">
<optgroup label="Ohio">
<option value="Bobcats">Bobcats</option>
<option value="Falcons">Falcons</option>
<option value="Golden Flashes">Golden Flashes</option>
<option value="RedHawks">RedHawks</option>
<option value="Rockets">Rockets</option>
<option value="Zips">Zips</option>
</optgroup>
<optgroup label="Michigan">
<option value="Broncos">Broncos</option>
<option value="Chippewas">Chippewas</option>
<option value="Eagles">Eagles</option>
</optgroup>
</select>
</div>
<div>
<input type="checkbox" id="icheckbox1" name="boxes[]" value="1" />
<label for="icheckbox1">Box 1</label><br />
<input type="checkbox" id="icheckbox2" name="boxes[]" value="2" />
<label for="icheckbox2">Box 2</label><br />
<input type="checkbox" id="icheckbox3" name="boxes[]" value="3" />
<label for="icheckbox3">Box 3</label>
</div>
<div>
<input type="radio" id="iradio1" name="having_fun" value="Yes" />
<label for="iradio1">Yes</label>
<input type="radio" id="iradio2" name="having_fun" value="No" />
<label for="iradio2">No</label>
</div>
</fieldset>
<fieldset>
<legend>Buttons</legend>
<button>Button</button>
<input type="submit" value="Submit" />
<input type="reset" value="Reset" />
</fieldset>
</form>
<h2>Lists</h2>
<ul>
<li>
Apple
<ul>
<li>Granny Smith</li>
<li>Gala</li>
</ul>
</li>
<li>Bananna</li>
<li>Cherry</li>
</ul>
<ol>
<li>
Apple
<ol>
<li>Granny Smith</li>
<li>Gala</li>
</ol>
</li>
<li>Bananna</li>
<li>Cherry</li>
</ol>
<h2>Table With Inline Styles</h2>
<table>
<thead>
<tr>
<th>Tag</th>
<th>Display</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>a</td>
<td><a href="#">Link</a></td>
<td>Hyperlink</td>
</tr>
<tr>
<td>abbr</td>
<td><abbr title="Library Information Technology Services">LITS</abbr></td>
<td>Abbreviation</td>
</tr>
<tr>
<td>b</td>
<td><b>Bold</b></td>
<td>Offset text conventionally styled in bold</td>
</tr>
<tr>
<td>cite</td>
<td><cite>A Game of Thrones</cite></td>
<td>Cited title of a work</td>
</tr>
<tr>
<td>code</td>
<td>Type this in <code>cd /var/www/html</code></td>
<td>Code fragment</td>
</tr>
<tr>
<td>del</td>
<td><del>Ooops made a mistake</del></td>
<td>Deleted text</td>
</tr>
<tr>
<td>em</td>
<td><em>Emphasized text</em></td>
<td>Emphatic stress</td>
</tr>
<tr>
<td>i</td>
<td><i>Italicized text</i></td>
<td>Offset text conventionally styled in italic</td>
</tr>
<tr>
<td>img</td>
<td><img src="http://www.bgsu.edu/colleges/library/homelink.gif" /></td>
<td>Image</td>
</tr>
<tr>
<td>ins</td>
<td><ins>Add me</ins></td>
<td>Inserted text</td>
</tr>
<tr>
<td>kbd</td>
<td><kbd>I am a robot</kbd></td>
<td>User input</td>
</tr>
<tr>
<td>mark</td>
<td><mark>Mark me</mark></td>
<td>Marked (highlighted) text</td>
</tr>
<tr>
<td>q</td>
<td><q>To be or not to be?</q></td>
<td>Quoted text</td>
</tr>
<tr>
<td>s</td>
<td><s>I was taken out</s></td>
<td>Struck text</td>
</tr>
<tr>
<td>samp</td>
<td><samp>Hello World</samp></td>
<td>Sample output</td>
</tr>
<tr>
<td>small</td>
<td><small>Tiny</small></td>
<td>Small print</td>
</tr>
<tr>
<td>strong</td>
<td><strong>Strong text</strong></td>
<td>Strong importance</td>
</tr>
<tr>
<td>sub</td>
<td>H<sub>2</sub>0</td>
<td>Subscript</td>
</tr>
<tr>
<td>sup</td>
<td>1<sup>st</sup></td>
<td>Superscript</td>
</tr>
<tr>
<td>time</td>
<td><time datetime="12:00">Noon</time></td>
<td>Date and/or time</td>
</tr>
<tr>
<td>u</td>
<td><u>You should look at this</u></td>
<td>Offset text conventionally styled with an underline</td>
</tr>
<tr>
<td>var</td>
<td><var>Your Name</var></td>
<td>Variable or placeholder text</td>
</tr>
</tbody>
</table>
<h2>Miscellaneous</h2>
<h3>Address</h3>
<address>
Jerome Library<br />
Bowling Green State University<br />
Bowling Green, OH 43403-0001
</address>
<h3>Blockquote</h3>
<blockquote>
<p>You must be the change you wish to see in the world.</p>
<p><em>- Gandhi</em></p>
</blockquote>
<h3>Definition List</h3>
<dl>
<dt><dfn>Testing</dfn></dt>
<dd>What you are doing right now!</dd>
</dl>
<h3>Preformatted text</h3>
<pre>Here is some text
with some tabs
and more tabs!
</pre>
<hr />
<p>The list of elements was taken directly from the
<a href="http://dev.w3.org/html5/markup/">W3C markup</a> spec.</p>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment