cssfonts-context-source.mustache revision 7b8680288e79cc11a4c20b66ce5c167619f1431f
cc0958b13956fc40842dbd4c68e36b41125ba7abvboxsync<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
cc0958b13956fc40842dbd4c68e36b41125ba7abvboxsync<html>
ecd27a5c936b5767a6c08e21e204f2d4340ec926vboxsync<head>
cc0958b13956fc40842dbd4c68e36b41125ba7abvboxsync <meta http-equiv="content-type" content="text/html; charset=utf-8">
cc0958b13956fc40842dbd4c68e36b41125ba7abvboxsync <title>YUI 3.x: CSS Fonts Contextual Example</title>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <link rel="stylesheet" href="/build/cssreset/reset.css" type="text/css">
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <link rel="stylesheet" href="/build/cssfonts/fonts-context.css" type="text/css">
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync</head>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync<body>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <div class="yui3-cssfonts">
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h1>In Context</h1>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h1>This is a H1 element.</h1>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h2>This is a H2 element.</h2>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h3>This is a H3 element.</h3>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h4>This is a H4 element.</h4>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h5>This is a H5 element.</h5>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <h6>This is a H6 element.</h6>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <ul>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync <li>This is a LI in a UL</li>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync </ul>
f0e020e8f064ff15cd29f5a0cda9159a5da469acvboxsync
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <ol>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <li>This is a LI in a UL</li>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync </ol>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <dl>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <dt>This is a DT in a DL</dt>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <dd>This is a DD in a DL</dd>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync </dl>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <form>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <input type="text" value="This is an INPUT type TEXT in a FORM"/>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <select>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <option>This is an OPTION in a SELECT</option>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <option>This is an OPTION in a SELECT</option>
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <optgroup>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <option>This is an OPTION in a OPTGROUP in a SELECT</option>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <option>This is an OPTION in a OPTGROUP in a SELECT</option>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync </optgroup>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <option>This is an OPTION in a SELECT</option>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync </select>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <fieldset>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync </fieldset>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <button>This is a BUTTON</button>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync </form>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync <p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>
85fc7dbf8f928aea2a6fddde85a77950f69284ddvboxsync
8799966982916b60a0ce2384cc4be50c4ab8da37vboxsync <blockquote>This is a BLOCKQUOTE element.</blockquote>
cc0958b13956fc40842dbd4c68e36b41125ba7abvboxsync
<table>
<caption>This is a CAPTION in a TABLE</caption>
<thead>
<tr>
<th>This is a TH in a TR in a THEAD in a TABLE</th>
<td>This is a TD in a TR in a THEAD in a TABLE</td>
</tr>
</thead>
<tfoot>
<tr>
<th>This is a TH in a TR in a TFOOT in a TABLE</th>
<td>This is a TD in a TR in a TFOOT in a TABLE</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>This is a TH in a TR in a TBODY in a TABLE</th>
<td>This is a TD in a TR in a TBODY in a TABLE</td>
</tr>
</tbody>
</table>
</div>
<div>
<h1>Out of Context</h1>
<h1>This is a H1 element.</h1>
<h2>This is a H2 element.</h2>
<h3>This is a H3 element.</h3>
<h4>This is a H4 element.</h4>
<h5>This is a H5 element.</h5>
<h6>This is a H6 element.</h6>
<ul>
<li>This is a LI in a UL</li>
</ul>
<ol>
<li>This is a LI in a UL</li>
</ol>
<dl>
<dt>This is a DT in a DL</dt>
<dd>This is a DD in a DL</dd>
</dl>
<form>
<input type="text" value="This is an INPUT type TEXT in a FORM"/>
<select>
<option>This is an OPTION in a SELECT</option>
<option>This is an OPTION in a SELECT</option>
<optgroup>
<option>This is an OPTION in a OPTGROUP in a SELECT</option>
<option>This is an OPTION in a OPTGROUP in a SELECT</option>
</optgroup>
<option>This is an OPTION in a SELECT</option>
</select>
<textarea name="ta1">This is text in a TEXTAREA in a FORM</textarea>
<fieldset>
<textarea name="ta2">This is text in a TEXTAREA in a FIELDSET in a FORM</textarea>
</fieldset>
<button>This is a BUTTON</button>
</form>
<p>This paragraph contains a bunch of phrase elements. Up first in an <a href="test">[A]nchor</a>, followed by an <abbr title="test">ABBR with a title value</abbr>, followed by an <acronym title="test">ACRONYM with a title value</acronym>, followed by an <address>ADDRESS</address>, followed by a <cite>CITE</cite> element, followed by a <code>CODE</code> element, followed by a <del>DEL</del> element, followed by a <em>EM</em> element, followed by a <ins>INS</ins> element, followed by a <kbd>KBD</kbd> element, followed by a <q>Q</q> element, followed by a <samp>SAMP</samp> element, followed by a <span>SPAN</span> element, followed by a <strong>STRONG</strong> element, followed by a <tt>TT</tt> element, followed by a <var>VAR</var> element, all within a containing P.</p>
<blockquote>This is a BLOCKQUOTE element.</blockquote>
<table>
<caption>This is a CAPTION in a TABLE</caption>
<thead>
<tr>
<th>This is a TH in a TR in a THEAD in a TABLE</th>
<td>This is a TD in a TR in a THEAD in a TABLE</td>
</tr>
</thead>
<tfoot>
<tr>
<th>This is a TH in a TR in a TFOOT in a TABLE</th>
<td>This is a TD in a TR in a TFOOT in a TABLE</td>
</tr>
</tfoot>
<tbody>
<tr>
<th>This is a TH in a TR in a TBODY in a TABLE</th>
<td>This is a TD in a TR in a TBODY in a TABLE</td>
</tr>
</tbody>
</table>
</div>
</body>