💾 Archived View for unbon.cafe › villapirorum › web › css-ipsum captured on 2024-03-21 at 16:26:51. Gemini links have been rewritten to link to archived content

-=-=-=-=-=-=-

CSS Ipsum

THIS PAGE IS WORK IN PROGRESS!

(Pages are generated from DOM.PHP lib. And hosting disk space is very limited here)

This is a fake/test page meant to test CSS frameworks and styles.

Experiment your CSS themes / style-guide here!

Dark and light themes can be switched with the button in the toolbar.

Please note that this is a Work in Progress web page!

By default, what you see here is this current website styleguide.

Each style layer can be disabled so you can apply your own css.

All CSS of this page can be edited here

CSS-Ipsum - Cascade layers order

Vendor CSS - © Normalize

Vendor CSS - © Remedy

Vendor CSS - © Reset (!)

Base CSS - Layout

Base CSS - Color scheme themes Base CSS - Color scheme vars Base CSS - Color scheme dispatch

Base CSS - Toolbar - Layout

Base CSS - Toolbar - Colors

Base CSS - Brands CSS-Ipsum - This web page CSS-Ipsum - Empty CSS for you CSS-Ipsum - Kitchen CSS-Ipsum - Markup CSS-Ipsum - StyleStage CSS-Ipsum - MinimalCSS CSS-Ipsum - Ipsum

Your stylesheet URL

Enter your own stylesheet public URL here. Will be applied on the whole page. It's meant to override anything (thanks to cascade layers)

Kitchen

"Kitchen Sink" sample markup, containing main HTML5 elements, from github.com/dbox/html5-kitchen-sink (with modifications

<a>[1])

Edit Kitchen boilerplate container and content area dimensions

HTML5 Kitchen Sink</h1>

<p>This section serves as the <code>header</code>.</p>

</header>

<main>

<a href="#headings">#</a> Headings </h2>

<p>Elements <code>h1</code>, <code>h2</code>, <code>h3</code>, <code>h4</code>,

<code>h5</code>, <code>h6</code> make up the <em>heading content</em> category.

</p>

h1 I am most important.</h1>

h2 Back in my quaint <a href='#'>garden</a></h2>

h3 Jaunty <a href='#'>zinnias</a> vie with flaunting phlox.</h3>

h4 Five or six big jet planes zoomed quickly by the new tower.</h4>

h5 Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>

h6 Pack my box with five dozen liquor jugs.</h6>

</hgroup>

<p>See the <a target="_blank" target="_blank" href="https://www.w3.org/TR/html5/dom.html#heading-content">Heading Content spec.</a></p>

<p>Note: these two paragraphs are contained in a <code>footer</code> element.

</p>

</footer>

</section>

<a href="#sections">#</a> Sections</h2>

<p>Elements <code>article</code>, <code>aside</code>, <code>nav</code>,

<code>section</code> make up the <em>sectioning content</em> category.

</p>

<nav>

<p>These links are contained in a <code>nav</code> element.</p>

<ul>

<a href="#">About</a></li>

<a href="#">Contact</a></li>

</ul>

</nav>

</header>

<p>This paragraph is nested inside an <code>article</code> element. It contains many different, sometimes useful, <a target="_blank" href="//www.w3schools.com/tags/">HTML5 elements</a>. Of course there are classics like <em>emphasis</em>, <strong>strong</strong>,

and <small>small</small> but there are many others as well. Hover the following text for abbreviation element: <abbr title="abbreviation">abbr</abbr>. You can define <del>deleted text</del> which often gets replaced with <ins>inserted</ins> text.</p>

<p>You can also use <kbd>keyboard text</kbd>, which sometimes is styled similarly to the <code><code></code> or <samp>samp</samp> elements. Even more specifically, there is an element just for <var>variables</var>. Not to be mistaken with block

quotes below, the quote element lets you denote something as <q>quoted text</q>. Lastly don't forget the sub (H<sub>2</sub>O) and sup (E = MC<sup>2</sup>) elements.</p>

<p>This paragraph is contained in a <code>section</code> element of its parent <code>article</code> element.</p>

<p>↓ The following paragraph has the <code>hidden</code> attribute and should not be displayed. ↓</p>

<p hidden>→ You should not see this paragraph. ←</p>

<p>↑ The previous paragraph should not be displayed. ↑</p>

</section>

</article>

<aside>

<p>This is contained in an <code>aside</code> element.</p>

</aside>

<p>See the <a target="_blank" target="_blank" href="https://www.w3.org/TR/html5/dom.html#sectioning-content">Sectioning

Content spec.</a></p>

</footer>

</section>

<a href="#phrasing">#</a> Phrasing</h2>

<p>Elements <code>abbr</code>, <code>b</code>, <code>bdi</code>,

<code>bdo</code>, <code>br</code>, <code>cite</code>, <code>code</code>,

<code>data</code>, <code>del</code>, <code>dfn</code>, <code>em</code>,

<code>i</code>, <code>ins</code>, <code>kbd</code>, <code>mark</code>,

<code>meter</code>, <code>progress</code>, <code>q</code>, <code>s</code>,

<code>samp</code>, <code>small</code>, <code>span</code>, <code>strong</code>,

<code>sub</code>, <code>sup</code>, <code>time</code>, <code>u</code>,

<code>var</code>, <code>wbr</code>, and others make up the <em>phrasing content</em> category.

</p>

</header>

<p><code>abbr</code>: Some vehicles meet the

<abbr title="Super Ultra Low Emission Vehicle">SULEV</abbr> standard.<br>

<code>br</code> was used to make this sentence start on a new line.</p>

<p><code>bdi</code>: Some languages read right to left, <bdi lang="ar">مرحبا</bdi>.

<code>bdo</code>: <bdo dir="rtl">The normal direction has been

overridden.</bdo></p>

<p><code>em</code> is used for <em>emphasis</em> and usually renders as italics, contrast that with <code>i</code> which is used for alternate voice or to offset from the normal (such as a phrase from a different language or taxonomic designation): <i>E. coli</i> can be bad. <code>strong</code> is used for <strong>importance or urgency</strong> and usually renders as bold, contrast that with <code>b</code> which is used to <b>draw attention</b> without the semantic meaning of importance.</p>

<p><code>cite</code>: In the words of <cite>Charles Bukowski</cite> — <q>An intellectual says a simple thing in a hard way. An artist says a hard thing in a simple way.</q></p>

<p><code>data</code> can be used to specify <data value="2018-09-24T05:00-07:00">5 A.M.</data> that is machine-readable, but <code>time</code> is a better choice for specifying <time datetime="2018-09-24T05:00-07:00">5 A.M.</time> in a machine-readable format.

</p>

<p><code>del</code> can be <del datetime="2017-10-11T01:25-07:00">varily</del> used to mark deletions. <code>ins</code> marks <ins datetime="2007-12-19 00:00Z">insertions</ins>. <code>s</code>: similar to <code>del</code>, but used to mark content that is no longer relevant. <s>Windows XP version available.</s> <code>u</code>: a holdover with no real meaning that should be <u>removed</u>. <code>mark</code>: the HTML equivalent of the <mark>yellow highlighter</mark>. <code>span</code>: a

<span>generic element</span> with no meaning by itself.</p>

<p><code>dfn</code>: Foreign phrases add a certain <dfn lang="fr" title="French: indefinable quality">je ne sais quoi</dfn> to one's prose.

</p>

<p><code>q</code>: The W3C page <cite>About W3C</cite> says the W3C’s mission is <q cite="https://www.w3.org/Consortium/">To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web</q>.</p>

<pre><samp>c:\><kbd>format c: /yes</kbd></samp></pre>

<p>Is that bad? Press <kbd><kbd>Ctrl</kbd></kbd>+<kbd><kbd>F5</kbd></kbd> for a hard reload.</p>

<p><code>var</code>: To log in, type <kbd>ssh <var>user</var>@example.com</kbd>, where <var>user</var> is your user ID.</p>

<p><code>meter</code> and <code>progress</code>: Storage space usage:

<meter value=6 max=8>6 blocks used (out of 8 total)</meter> Progress:

<p><code>sub</code> is used for subscripts: H<sub>2</sub>O. <code>sup</code> is used for superscripts: E = MC<sup>2</sup>. <code>small</code> is used for side comments: <q>I wrote this whole document. <small>[Editor's note: no he did not]</small></q> <code>wbr</code>: used to specify where a word may break and it is super<wbr>cali<wbr>fragil<wbr>istic<wbr>expiali<wbr>do<wbr>cious.</p>

<p>See the <a target="_blank" target="_blank" href="https://www.w3.org/TR/html5/dom.html#phrasing-content">Phrasing Content spec.</a></p>

</footer>

</section>

<a href="#palpable">#</a> Palpable Content</h2>

<p>Elements <code>a</code>, <code>address</code>, <code>blockquote</code>,

<code>button</code>, <code>details</code>, <code>dl</code>, <code>fieldset</code>,

<code>figure</code>, <code>form</code>, <code>input</code>, <code>label</code>,

<code>map</code>, <code>ol</code>, <code>output</code>, <code>pre</code>,

<code>select</code>, <code>table</code>, <code>textarea</code>,

<code>ul</code>, and others make up the <em>palpable content</em> category.

</p>

</header>

<p><code>a</code>: <a target="_blank" href="//example.com">Example</a>.</p>

<p><code>address</code>:</p>

<address>1 Infinite Loop<br>

Cupertino, CA 95014<br>

United States

</address>

<p><code>blockquote</code>:</p>

<p>I quickly explained that many big jobs involve few hazards</p>

</blockquote>

<p>This is a mult-line blockquote with a cite reference. People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to

pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things.</p>

<footer>Steve Jobs, <cite>Apple Worldwide Developers’ Conference, 1997</cite></footer>

</blockquote>

<p><code>details</code> and <code>summary</code>:</p>

<summary>Copying... <progress max="375505392" value="97543282"></progress> 25%

</summary>

<dl>

<dt>Transfer rate:</dt>

<dt>Duration:</dt>

<dt>Color profile:</dt>

<dt>Dimensions:</dt>

</dl>

</details>

<dl>

<dt>Definition List Title</dt>

<dd>Definition list division.</dd>

<dt>Kitchen Sink</dt>

<dd>Used in expressions to describe work in which all conceivable (and some inconceivable) sources have been mined. In this case, a bunch of markup.</dd>

<dt>aside</dt>

<dd>Defines content aside from the page content</dd>

<dt>blockquote</dt>

<dd>Defines a section that is quoted from another source</dd>

</dl>

<p><code>figure</code>:</p>

<figcaption>Figure 1: A picture of a kitty from <a target="_blank" href="https://source.unsplash.com/64x64/?kitty&.jpg">unsplash.com</a>

</figcaption>

</figure>

<h3 id="forms"><a href="#forms">#</a> Forms</h3>

<form>

<p>

<label for="example-input-email">Email address</label>

</p>

<p>

<label for="example-input-number">Number</label>

</p>

<p>

<label for="example-input-password">Password</label>

</p>

<p>

<label for="example-input-search">Search</label>

</p>

<p>

<label for="example-input-tel">Telephone number</label>

</p>

<p>

</p>

<p>

</p>

<p>

<label for="example-input-disabled">Disabled</label>

</p>

<p>

</p>

<p>

<label for="example-input-color">Color</label>

</p>

<p>

</p>

<p>

</p>

<p>

<label for="example-input-date-time-local">Date / Time local</label>

</p>

<p>

<label for="example-input-month">Month</label>

</p>

<p>

</p>

<p>

</p>

<p>

<label for="example-input-file">File input</label>

</p>

<p>

<label for="example-input-range">Range input</label>

</p>

<p>

<label for="example-select1">Select</label>

</select>

</p>

<p>

<label for="example-select1a">Select with size</label>

</select>

</p>

<p>

<label for="example-select2">Multiple select</label>

</select>

</p>

<p>

<label for="example-optgroup">Select with optgroup: Favorite Car</label>

<option>Volvo</option>

</optgroup>

<option>Mercedes</option>

</optgroup>

</select>

</p>

<p>

<label for="example-optgroup2">Select with optgroup and size:Favorite Dish</label>

<option>Green Salad</option>

<option>French Fries</option>

</optgroup>

<option>Roast Beef</option>

</optgroup>

</select>

</p>

<p>

<label for="example-optgroup3">Multiple select with optgroup: Public transport</label>

<option>Train</option>

</optgroup>

<option>Submarine</option>

</optgroup>

<option>Plane</option>

<option>Balloon</option>

</optgroup>

</select>

</p>

<p>

<label for="example-textarea">Textarea</label>

</p>

<legend>I am legend</legend>

<div>

<label for="option-radio1">Option one is this and that—be sure to include why it's great</label>

</div>

<div>

<label for="option-radio2">Option two can be something else and selecting it will deselect option one</label>

</div>

<div>

<label for="option-radio3">Option three is disabled</label>

</div>

</fieldset>

<legend>I am also legend</legend>

<label for="checkbox1">Check me out</label>

<label for="checkbox2">and/or check me out</label>

</fieldset>

<p>

<button type="button" name="button">Button</button>

<button type="submit" name="submit2">Submit</button>

<button type="reset" name="reset2">Reset</button>

<button disabled>Cancel</button>

</p>

</form>

<ul>

Unordered List item one

<ul>

Nested list item

<ul>

Level 3, item one</li>

Level 3, item two</li>

Level 3, item three</li>

Level 3, item four</li>

</ul>

</li>

List item two</li>

List item three</li>

List item four</li>

</ul>

</li>

List item two</li>

List item three</li>

List item four</li>

</ul>

<ol>

List item one

<ol>

List item one

<ol>

List item one</li>

List item two</li>

List item three</li>

List item four</li>

</ol>

</li>

List item two</li>

List item three</li>

List item four</li>

</ol>

</li>

List item two</li>

List item three</li>

List item four</li>

</ol>

<p><code>output</code>:</p>

<input aria-label="a" name=a type=number step=any> +

<input aria-label="b" name=a type=number step=any> =

</form>

<pre>

pre {

display: block;

padding: 7px;

background-color: #F5F5F5;

border: 1px solid #E1E1E8;

border-radius: 3px;

white-space: pre-wrap;

word-break: break-all;

font-family: Menlo, Monaco;

line-height: 160%;

}</pre>

<pre><samp>You are in an open field west of a big white house with a boarded

front door.

There is a small mailbox here.

</samp> <kbd>open mailbox</kbd>

<samp>Opening the mailbox reveals:

A leaflet.

</samp></pre>

<h3 id="tables"><a href="#tables">#</a> Tables</h3>

<table>

<caption>Tables can have captions now.</caption>

<tbody>

<tr>

<th>Person</th>

<th>Number</th>

<th>Third Column</th>

</tr>

<tr>

<td>Someone Lastname</td>

<td>Nullam quis risus eget urna mollis ornare vel eu leo.</td>

</tr>

<tr>

<td><a href="#">Person Name</a></td>

<td>Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.</td>

</tr>

<tr>

<td>Another Person</td>

<td>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.</td>

</tr>

<tr>

<td>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</td>

</tr>

</tbody>

</table>

<p id="table-summary">In the following table, characteristics are given in the second column, with the negative side in the left column and the positive side in the right column.</p>

<caption>Characteristics with positive and negative sides</caption>

<thead>

<tr>

<th id="n">Negative</th>

<th>Characteristic</th>

<th id="p">Positive</th>

</tr>

</thead>

<tbody>

<tr>

<td headers="p r1">Happy</td>

</tr>

<tr>

<td headers="n r2">Failing</td>

<th id="r2">Grade</th>

<td headers="p r2">Passing</td>

</tr>

</tbody>

</table>

<table>

<caption>Complex table with a <code>thead</code>, multiple <code>tbody</code> elements, and a <code>tfoot</code>.</caption>

<thead>

<tr>

</tr>

</thead>

<tbody>

<tr>

<th>Net sales</th>

</tr>

<tr>

<th>Cost of sales</th>

</tr>

</tbody>

<tbody>

<tr>

<th>Gross margin</th>

</tr>

</tbody>

<tfoot>

<tr>

<th>Gross margin percentage</th>

</tr>

</tfoot>

</table>

<p>See the <a target="_blank" target="_blank" href="https://www.w3.org/TR/html5/dom.html#palpable-content">Palpable

Content spec.</a></p>

</footer>

</section>

<a href="#embeds">#</a> Embeds</h2>

<p>Elements <code>audio</code>, <code>canvas</code>, <code>embed</code>,

<code>iframe</code>, <code>img</code>, <code>math</code>, <code>object</code>,

<code>picture</code>, <code>svg</code>, <code>video</code> make up the <em>embedded content</em> category.</p>

</header>

<p><code>audio</code>: <audio controls src="https://upload.wikimedia.org/wikipedia/commons/c/c7/What_hath_God_wrought.ogg"><transcript>Beep beep beep beep</transcript></audio> By Cqdx [<a target="_blank" href="https://creativecommons.org/licenses/by-sa/3.0">CC BY-SA 3.0 </a>], <a target="_blank" href="https://commons.wikimedia.org/wiki/File:What_hath_God_wrought.ogg">from Wikimedia Commons</a>.</p>

<p><code>iframe</code>: <iframe sandbox title="iframe test" frameborder="0" srcdoc="<html><style> *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background-color: #222; color: #ddd; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center }</style><body>Sample Document</h1><p>This

is a sample content.</p></body></html>"></iframe></p>

<mtr>

<mtd>

<mtext>Quadratic Equation</mtext>

</mtd>

<mtd>

<mrow>

<mfrac>

<mrow>

<msqrt>

<mrow>

</msubsup>

</mrow>

</msqrt>

</mrow>

<mrow>

</mrow>

</mfrac>

</mrow>

</mtd>

</mtr>

</mtable>

</math>

<p><code>picture</code>:

<source srcset="https://source.unsplash.com/480x600/?kitty&5168.jpg 2x,

https://source.unsplash.com/240x300/?kitty&6775.jpg 1x">

</picture>

</p>

<p><code>svg</code>: <svg role="presentation" width="24" height="24" viewBox="0 0 24 24" xmlns="//www.w3.org/2000/svg"><path d="M19.199 24C19.199 13.467

10.533 4.8 0 4.8V0c13.165 0 24 10.835 24 24h-4.801zM3.291

17.415c1.814 0 3.293 1.479 3.293 3.295 0 1.813-1.485 3.29-3.301

3.29C1.47 24 0 22.526 0 20.71s1.475-3.294 3.291-3.295zM15.909

24h-4.665c0-6.169-5.075-11.245-11.244-11.245V8.09c8.727 0 15.909

7.184 15.909 15.91z" /></svg></p>

<p><code>video</code>: <video controls src="https://upload.wikimedia.org/wikipedia/commons/b/b8/Dwarf_hamsters_running_on_disc_2.ogv"></video></p>

<p>See the <a target="_blank" target="_blank" href="https://www.w3.org/TR/html5/dom.html#embedded-content">Embedded Content spec.</a></p>

</footer>

</section>

</main>

<p>Find this document on <a target="_blank" href="https://github.com/dbox/html5-kitchen-sink">GitHub</a>.</p>

</footer>

MinimalCSS

"MinimalCSS Sink" sample markup, containing main HTML5 elements, from github.com/dohliam/dropin-minimal-css (with modifications

<a>[2])

Edit MinimalCSS boilerplate container and content area dimensions

Drop-in Minimal CSS</h1>

<p>This page provides an overview of barebones drop-in minimal CSS boilerplate frameworks. To switch to a different stylesheet, select one of the frameworks from the dropdown menu below. For more information, and links to all the frameworks seen here, visit the project page on <a href="https://github.com/dohliam/dropin-minimal-css">GitHub</a>.</p>

<p><strong>New:</strong> Click or drag <a href="javascript:(function()%7Bvar%20body%20%3D%20document.getElementsByTagName('body')%5B0%5D%3Bscript%20%3D%20document.createElement('script')%3Bscript.type%3D%20'text%2Fjavascript'%3Bscript.src%3D%20'https%3A%2F%2Fdohliam.github.io%2Fdropin-minimal-css%2Fswitcher.js'%3Bbody.appendChild(script)%7D)()">this bookmarklet</a> to your bookmark bar to add a CSS switcher to any site!</p>

</header>

<ul>

<a href="#text">Text</a>: <a href="#text__headings">Headings</a> · <a href="#text__paragraphs">Paragraphs</a> · <a href="#text__blockquotes">Blockquotes</a> · <a href="#text__lists">Lists</a> · <a href="#text__hr">Horizontal rules</a> · <a href="#text__tables">Tabular data</a> · <a href="#text__code">Code</a> · <a href="#text__inline">Inline elements</a></li>

<a href="#embedded">Embedded content</a>: <a href="#embedded__images">Images</a> · <a href="#embedded__audio">Audio</a> · <a href="#embedded__video">Video</a> · <a href="#embedded__canvas">Canvas</a> · <a href="#embedded__meter">Meter</a> · <a href="#embedded__progress">Progress</a> · <a href="#embedded__svg">Inline SVG</a> · <a href="#embedded__iframe">IFrames</a></li>

<a href="#forms">Form elements</a>: <a href="#forms__input">Input fields</a> · <a href="#forms__select">Select menus</a> · <a href="#forms__checkbox">Checkboxes</a> · <a href="#forms__radio">Radio buttons</a> · <a href="#forms__textareas">Textareas</a> · <a href="#forms__html5">HTML5 inputs</a> · <a href="#forms__action">Action buttons</a></li>

</ul>

</nav>

Text</h1>

Headings</h1>

<div>

Heading 1</h1>

Heading 2</h2>

Heading 3</h3>

Heading 4</h4>

Heading 5</h5>

Heading 6</h6>

</div>

</article>

Paragraphs</h1>

<div>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc viverra viverra nisl, vel maximus turpis ornare a. Ut scelerisque lectus sed odio dictum scelerisque vitae quis nisi. Nulla facilisi. Phasellus vehicula convallis nisl, id suscipit dui semper at. In eu iaculis lorem. In vehicula sed mauris et suscipit. Vivamus pellentesque non massa sit amet ornare. Integer placerat est vitae nisl molestie, eget rhoncus erat vulputate. Proin ornare massa eget bibendum faucibus.</p>

</div>

</article>

Blockquotes</h1>

<div>

<p>Etiam porttitor egestas elit, at venenatis neque accumsan eu. Nulla viverra odio nisi, quis commodo tellus tristique non. Proin ac ante at orci euismod eleifend. Quisque nisi sapien, dapibus in venenatis sit amet, posuere non purus. In sit amet metus erat. Pellentesque nec neque eleifend, luctus ipsum at, ullamcorper nunc. Pellentesque sagittis, dolor eu bibendum lacinia, orci ex bibendum risus, at tincidunt augue lacus eleifend diam. Nulla facilisis velit ut est auctor sollicitudin. Morbi eget lectus a lacus maximus molestie in ut lorem.</p>

<p>Vestibulum ut erat sapien. Duis eros est, tempus a rutrum eu, rhoncus at ante. Vestibulum congue vel nunc et dapibus. Ut tristique facilisis orci ac pretium. Nunc et sodales turpis. Nulla pretium augue vitae faucibus tempor. Aliquam convallis mollis feugiat. Ut non pellentesque sem. Suspendisse interdum, neque at hendrerit varius, enim neque imperdiet enim, pellentesque efficitur leo orci non erat.</p>

</blockquote>

</div>

</article>

Lists</h1>

<div>

Definition list</h3>

<dl>

<dt>Definition List Title</dt>

<dd>This is a definition list division.</dd>

</dl>

Ordered List</h3>

<ol>

List Item 1</li>

List Item 2</li>

List Item 3

<ol>

Nested Ordered List Item 3.1</li>

Nested Ordered List Item 3.2</li>

Nested Ordered List Item 3.3</li>

</ol>

</li>

List Item 4

<ul>

Nested Unordered List Item 4.1</li>

Nested Unordered List Item 4.2</li>

Nested Unordered List Item 4.3</li>

</ul>

</li>

</ol>

Unordered List</h3>

<ul>

List Item 1</li>

List Item 2</li>

List Item 3

<ol>

Nested Ordered List Item 3.1</li>

Nested Ordered List Item 3.2</li>

Nested Ordered List Item 3.3</li>

</ol>

</li>

List Item 4

<ul>

Nested Unordered List Item 4.1</li>

Nested Unordered List Item 4.2</li>

Nested Unordered List Item 4.3</li>

</ul>

</li>

</ul>

</div>

</article>

Horizontal rules</h1>

<div>

<hr>

</div>

</article>

Tabular data</h1>

<table>

<caption>Table Caption</caption>

<thead>

<tr>

<th>Table Heading 1</th>

<th>Table Heading 2</th>

<th>Table Heading 3</th>

<th>Table Heading 4</th>

<th>Table Heading 5</th>

</tr>

</thead>

<tfoot>

<tr>

<th>Table Footer 1</th>

<th>Table Footer 2</th>

<th>Table Footer 3</th>

<th>Table Footer 4</th>

<th>Table Footer 5</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>Table Cell 1</td>

<td>Table Cell 2</td>

<td>Table Cell 3</td>

<td>Table Cell 4</td>

<td>Table Cell 5</td>

</tr>

<tr>

<td>Table Cell 1</td>

<td>Table Cell 2</td>

<td>Table Cell 3</td>

<td>Table Cell 4</td>

<td>Table Cell 5</td>

</tr>

<tr>

<td>Table Cell 1</td>

<td>Table Cell 2</td>

<td>Table Cell 3</td>

<td>Table Cell 4</td>

<td>Table Cell 5</td>

</tr>

<tr>

<td>Table Cell 1</td>

<td>Table Cell 2</td>

<td>Table Cell 3</td>

<td>Table Cell 4</td>

<td>Table Cell 5</td>

</tr>

</tbody>

</table>

</article>

Code</h1>

<div>

<p><strong>Keyboard input:</strong> <kbd>Cmd</kbd></p>

<p><strong>Inline code:</strong> <code><div>code</div></code></p>

<p><strong>Sample output:</strong> <samp>This is sample output from a computer program.</samp></p>

Pre-formatted text</h2>

<pre> P R E F O R M A T T E D T E X T

! " # $ % & ' ( ) * + , - . /

0 1 2 3 4 5 6 7 8 9 : ; < = > ?

@ A B C D E F G H I J K L M N O

P Q R S T U V W X Y Z [ \ ] ^ _

` a b c d e f g h i j k l m n o

p q r s t u v w x y z { | } ~ </pre>

</div>

</article>

Inline elements</h1>

<div>

<strong>Strong is used to indicate strong importance.</strong><br>

<em>This text has added emphasis.</em><br>

The <b>b element</b> is stylistically different text from normal text, without any special importance.<br>

The <i>i element</i> is text that is offset from the normal text.<br>

The <u>u element</u> is text with an unarticulated, though explicitly rendered, non-textual annotation.<br>

<del>This text is deleted</del> and <ins>This text is inserted</ins>.<br>

<s>This text has a strikethrough</s>.<br>

Superscript<sup>®</sup>.<br>

Subscript for things like H<sub>2</sub>O.<br>

<small>This small text is small for for fine print, etc.</small><br>

Abbreviation: <abbr title="HyperText Markup Language">HTML</abbr><br>

<q cite="https://developer.mozilla.org/en-US/docs/HTML/Element/q">This text is a short inline quotation.</q><br>

<cite>This is a citation.</cite><br>

The <dfn>dfn element</dfn> indicates a definition.<br>

The <mark>mark element</mark> indicates a highlight.<br>

The <var>variable element</var>, such as <var>x</var> = <var>y</var>.<br>

The time element: <time datetime="2013-04-06T12:32+00:00">2 weeks ago</time><br>

</div>

</article>

</section>

Embedded content</h1>

Images</h2>

<div>

No <code><figure></code> element</h3>

Wrapped in a <code><figure></code> element, no <code><figcaption></code></h3>

Wrapped in a <code><figure></code> element, with a <code><figcaption></code></h3>

<figcaption>Here is a caption for this image.</figcaption>

</figure>

</div>

</article>

Audio</h2>

<div>

</audio>

</div>

</article>

Video</h2>

<div>

</video>

</div>

</article>

Canvas</h2>

<div><canvas>canvas</canvas></div>

</article>

Meter</h2>

</article>

Progress</h2>

<div><progress>progress</progress></div>

</article>

Inline SVG</h2>

</article>

IFrame</h2>

<div><iframe srcdoc="Sample Document</h1><p>This is a sample content.</p>" height="300"></iframe></div>

</article>

</section>

Form elements</h1>

<form>

<legend>Input fields</legend>

<p>

<label for="input__text">Text Input</label>

</p>

<p>

<label for="input__password">Password</label>

</p>

<p>

<label for="input__webaddress">Web Address</label>

</p>

<p>

<label for="input__emailaddress">Email Address</label>

</p>

<p>

<label for="input__phone">Phone Number</label>

</p>

<p>

<label for="input__search">Search</label>

</p>

<p>

<label for="input__text2">Number Input</label>

</p>

<p>

<label for="input__text3" class="error">Error</label>

</p>

<p>

<label for="input__text4" class="valid">Valid</label>

</p>

</fieldset>

<legend>Select menus</legend>

<p>

<label for="select">Select</label>

<option>Option One</option>

<option>Option Two</option>

<option>Option Three</option>

</optgroup>

</select>

</p>

</fieldset>

<legend>Checkboxes</legend>

<label for="checkbox-minimal-1"><input id="checkbox-minimal-1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>

<label for="checkbox-minimal-2"><input id="checkbox-minimal-2" name="checkbox" type="checkbox"> Choice B</label></li>

<label for="checkbox-minimal-3"><input id="checkbox-minimal-3" name="checkbox" type="checkbox"> Choice C</label></li>

</ul>

</fieldset>

<legend>Radio buttons</legend>

<label for="radio-minimal-1"><input id="radio-minimal-1" name="radio" type="radio" class="radio" checked="checked"> Option 1</label></li>

<label for="radio-minimal-2"><input id="radio-minimal-2" name="radio" type="radio" class="radio"> Option 2</label></li>

<label for="radio-minimal-3"><input id="radio-minimal-3" name="radio" type="radio" class="radio"> Option 3</label></li>

</ul>

</fieldset>

<legend>Textareas</legend>

<p>

<label for="textarea">Textarea</label>

</p>

</fieldset>

<legend>HTML5 inputs</legend>

<p>

<label for="ic">Color input</label>

</p>

<p>

<label for="in">Number input</label>

</p>

<p>

<label for="ir">Range input</label>

</p>

<p>

<label for="idd">Date input</label>

</p>

<p>

<label for="idm">Month input</label>

</p>

<p>

<label for="idw">Week input</label>

</p>

<p>

<label for="idt">Datetime input</label>

</p>

<p>

<label for="idtl">Datetime-local input</label>

</p>

</fieldset>

<legend>Action buttons</legend>

<p>

<input type="submit" value="<input disabled>" disabled>

</p>

<p>

</p>

</fieldset>

</form>

</section>

</main>

<p>View this project on <a href="https://github.com/dohliam/dropin-minimal-css">GitHub</a>.</p>

</footer>

</div>

Markup

HTML boilerplate from github.com/tableau-mkt/html-boilerplate (with modifications

<a>[3]) and the people from Tableau

Tableau

NB. This repository has been since removed by its authors!

Edit Markup boilerplate container and content area dimensions Edit side-nav sticky positionning

<a href="#Content%20Sectioning">Content Sectioning</a></h2>

<ul>

<a href="#Headings%20-%20%3Ch1%3E%2C%20%3Ch2%3E%2C%20%3Ch3%3E%2C%20%3Ch4%3E%2C%20%3Ch5%3E%2C%20%3Ch6%3E">Headings - <h1>... <h6></a></li>

<a href="#Heading%20Group%20-%20%3Chgroup%3E">Heading Group - <hgroup></a></li>

</ul>

<a href="#Text%20Content">Text Content</a></h2>

<ul>

<a href="#Blockquote%20-%20%3Cblockquote%3E">Blockquote - <blockquote></a></li>

<a href="#Definition%20List%20-%20%3Cdl%3E%2C%20%3Cdd%3E%2C%20%3Cdt%3E">Definition List - <dl>, <dd>, <dt></a></li>

<a href="#Figure%20-%20%3Cfigure%3E%2C%20%3Cfigcaption%3E">Figure - <figure>, <figcaption></a></li>

<a href="#Horizontal%20Rule%20-%20%3Chr%3E">Horizontal Rule - <hr></a></li>

<a href="#Paragraph%20-%20%3Cp%3E">Paragraph - <p></a></li>

<a href="#Preformatted%20Text%20-%20%3Cpre%3E">Preformatted Text - <pre></a></li>

<a href="#Unordered%20List%20-%20%3Cul%3E">Unordered List - <ul></a></li>

<a href="#Ordered%20List%20-%20%3Col%3E">Ordered List - <ol></a></li>

</ul>

<a href="#Inline%20text%20semantics">Inline text semantics</a></h2>

<ul>

<a href="#Hyperlink%20-%20%3Ca%3E">Hyperlink - <a></a></li>

<a href="#Bring%20Attention%20To%20-%20%3Cb%3E">Bring Attention To - <b></a></li>

<a href="#Line%20Break%20-%20%3Cbr%3E">Line Break - <br></a></li>

<a href="#Citation%20-%20%3Ccite%3E">Citation - <cite></a></li>

<a href="#Emphasis%20-%20%3Cem%3E">Emphasis - <em></a></li>

<a href="#Keyboard%20Input%20-%20%3Ckbd%3E">Keyboard Input - <kbd></a></li>

<a href="#Inline%20Quotation%20-%20%3Cq%3E">Inline Quotation - <q></a></li>

<a href="#Strikethrough%20-%20%3Cs%3E">Strikethrough - <s></a></li>

<a href="#Small%20Text%20-%20%3Csmall%3E">Small Text - <small></a></li>

<a href="#Strong%20Importance%20-%20%3Cstrong%3E">Strong Importance - <strong></a></li>

<a href="#Subscript%20-%20%3Csub%3E">Subscript - <sub></a></li>

<a href="#Superscript%20-%20%3Csup%3E">Superscript - <sup></a></li>

<a href="#Unarticulated%20Annotation%20-%20%3Cu%3E">Unarticulated Annotation - <u></a></li>

</ul>

<a href="#Image%20and%20multimedia">Image and multimedia</a></h2>

<ul>

<a href="#Audio%20-%20%3Caudio%3E">Audio - <audio></a></li>

<a href="#Image%20-%20%3Cimg%3E">Image - <img></a></li>

<a href="#Video%20-%20%3Cvideo%3E">Video - <video></a></li>

</ul>

<a href="#Table%20content">Table content</a></h2>

<ul>

<a href="#Table%20-%20%3Ctable%3E">Table - <table></a></li>

<a href="#Table%20Head%20-%20%3Cthead%3E">Table Head - <thead></a></li>

<a href="#Table%20Head%20Cell%20-%20%3Cth%3E">Table Head Cell - <th></a></li>

<a href="#Table%20Body%20-%20%3Ctbody%3E">Table Body - <tbody></a></li>

<a href="#Table%20Footer%20-%20%3Ctfoot%3E">Table Footer - <tfoot></a></li>

<a href="#Table%20Caption%20-%20%3Ccaption%3E">Table Caption - <caption></a></li>

<a href="#Column%20Group%20-%20%3Ccolgroup%3E">Column Group - <colgroup></a></li>

<a href="#Table%20Column%20-%20%3Ccol%3E">Table Column - <col></a></li>

</ul>

<a href="#Forms">Forms</a></h2>

<ul>

</ul></nav>

HTML Elements Boilerplate</h1>

<p>

This tool allows you to preview HTML elements with various style guides and CSS frameworks. It can be helpful when developing your own base styles for a style guide or design system by allowing you to spot any gaps or areas that need better styling/coverage.

</p>

Using the tool</h2>

<p>

The selector to the left allows you to toggle between various publicly available style guides as well as previewing browser defaults (no CSS) or reference any other publicly available stylesheet (by URL). You can also use the navigation on the left to jump around between sections and elements. Use <kbd>command/ctrl + f</kbd> to search.

</p>

Sources</h2>

<p>

The examples and descriptions on this page are pulled from <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element" target="_blank">MDN Web Docs</a>. The list excludes elements that don't require any inherent styles such as <code><div></code> and <code><span></code> as well as deprecated and very edge-case elements.

</p>

<p>

The source for this tool can be found <a href="https://github.com/tableau-mkt/html-boilerplate" target="_blank">on Github here</a>.

</p>

Content Sectioning</h2>

<p>Content sectioning elements allow you to organize the document content into logical pieces. Use the sectioning elements to create a broad outline for your page content, including header and footer navigation, and heading elements to identify sections of content.</p>

Headings - <h1>... <h6></h3>

<p>The HTML <h1>–<h6> elements represent six levels of section headings. <h1> is the highest section level and <h6> is the lowest.</p>

Markup:</h4>

<pre><h1>Heading level 1</h1>

<h2>Heading level 2</h2>

<h3>Heading level 3</h3>

<h4>Heading level 4</h4>

<h5>Heading level 5</h5>

<h6>Heading level 6</h6></pre>

Example:</h4>

Heading level 1</h1>

Heading level 2</h2>

Heading level 3</h3>

Heading level 4</h4>

Heading level 5</h5>

Heading level 6</h6>

</div>

Heading Group - <hgroup></h3>

<p>The HTML <hgroup> element represents a multi-level heading for a section of a document. It groups a set of <h1>–<h6> elements.</p>

Markup:</h4>

<h1>Title</h1>

<h4>Subtitle</h4>

</hgroup></pre>

Example:</h4>

Title</h3>

Subtitle</h4>

</hgroup>

</div>

Text Content</h2>

<p>Use HTML text content elements to organize blocks or sections of content placed between the opening <body> and closing </body> tags. Important for accessibility and SEO, these elements identify the purpose or structure of that content.</p>

Blockquote - <blockquote></h3>

<p>The HTML <blockquote> Element (or HTML Block Quotation Element) indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the <cite> element.</p>

Markup:</h4>

<p>

Avian carriers can provide high delay, low throughput, and low altitude service. The connection topology is limited to a single point-to-point path for each carrier, used with standard carriers, but many carriers can be used without significant interference with each other, outside of early spring. This is because of the 3D ether space available to the carriers, in contrast to the 1D ether used by IEEE802.3. The carriers have an intrinsic collision avoidance system, which increases availability.

</p>

</blockquote></pre>

Example:</h4>

<p>

</p>

</blockquote>

</div>

Definition List - <dl>, <dd>, <dt></h3>

<p>The HTML <dl> element represents a description list. The element encloses a list of groups of terms (specified using the <dt> element) and descriptions (provided by <dd> elements). Common uses for this element are to implement a glossary or to display metadata (a list of key-value pairs).</p>

Markup:</h4>

<dd>Godzilla</dd>

<dt>Birthplace</dt>

<dd>Japan</dd>

<dt>Color</dt>

<dd>Green</dd>

</dl></pre>

Example:</h4>

<dl>

<dd>Godzilla</dd>

<dt>Birthplace</dt>

<dd>Japan</dd>

<dt>Color</dt>

<dd>Green</dd>

</dl>

</div>

Figure - <figure>, <figcaption></h3>

<p>The HTML <figure> element represents self-contained content, frequently with a caption (<figcaption>), and is typically referenced as a single unit.</p>

Markup:</h4>

<img

src="https://source.unsplash.com/320x96/?kitty&.jpg"

alt="An awesome picture">

<figcaption>Kitty picture</figcaption>

</figure></pre>

Example:</h4>

<img

src="https://source.unsplash.com/320x96/?kitty&4469.jpg" width="320" height="96" style="--width:320; --height:96;"

alt="An awesome picture">

<figcaption>Kitty picture</figcaption>

</figure>

</div>

Horizontal Rule - <hr></h3>

<p>The HTML <hr> element represents a thematic break between paragraph-level elements (for example, a change of scene in a story, or a shift of topic with a section); historically, this has been presented as a horizontal rule or line.</p>

Markup:</h4>

Example:</h4>

<hr>

</div>

Paragraph - <p></h3>

<p>The HTML <p> element represents a paragraph of text.</p>

Markup:</h4>

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

</p>

<p>

This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.

</p></pre>

Example:</h4>

<p>

This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text. This is the first paragraph of text.

</p>

<p>

This is the second paragraph. This is the second paragraph. This is the second paragraph. This is the second paragraph.

</p>

</div>

Preformatted Text - <pre></h3>

<p>The HTML <pre> element represents preformatted text which is to be presented exactly as written in the HTML file.</p>

Markup:</h4>

body {

color:red;

}

</pre></pre>

Example:</h4>

<pre>

body {

color:red;

}

</pre>

</div>

Unordered List - <ul></h3>

<p>The HTML <ul> element represents an unordered list of items, typically rendered as a bulleted list.</p>

<h4 style="margin-top:1em;">Basic List</h4>

Markup:</h4>

<li>first item</li>

<li>second item</li>

<li>third item</li>

</ul></pre>

Example:</h4>

<ul>

first item</li>

second item</li>

third item</li>

</ul>

</div>

<h4 style="margin-top:1em;">Nested List</h4>

Markup:</h4>

<li>first item</li>

<li>second item

<ul>

<li>second item first subitem</li>

<li>second item second subitem

<ul>

<li>second item second subitem first sub-subitem</li>

<li>second item second subitem second sub-subitem</li>

<li>second item second subitem third sub-subitem</li>

</ul>

</li> <!-- Closing </li> tag for the li that

contains the third unordered list -->

<li>second item third subitem</li>

</ul>

</li>

<li>third item</li>

</ul></pre>

Example:</h4>

<ul>

first item</li>

second item

<ul>

second item first subitem</li>

second item second subitem

<ul>

second item second subitem first sub-subitem</li>

second item second subitem second sub-subitem</li>

second item second subitem third sub-subitem</li>

</ul>

</li> <!-- Closing </li> tag for the li that

contains the third unordered list -->

second item third subitem</li>

</ul>

</li>

third item</li>

</ul>

</div>

Ordered List - <ol></h3>

<p>The HTML <ol> element represents an ordered list of items, typically rendered as a numbered list.</p>

<h4 style="margin-top:1em;">Basic list</h4>

Markup:</h4>

<li>first item</li>

<li>second item</li>

<li>third item</li>

</ol></pre>

Example:</h4>

<ol>

first item</li>

second item</li>

third item</li>

</ol>

</div>

<h4 style="margin-top:1em;">Nested List</h4>

Markup:</h4>

<li>first item</li>

<li>second item

<ol>

<li>second item first subitem</li>

<li>second item second subitem</li>

<li>second item third subitem</li>

</ol>

</li>

<li>third item</li>

</ol></pre>

Example:</h4>

<ol>

first item</li>

second item

<ol>

second item first subitem</li>

second item second subitem</li>

second item third subitem</li>

</ol>

</li>

third item</li>

</ol>

</div>

Inline text semantics</h2>

<p>Use the HTML inline text semantic to define the meaning, structure, or style of a word, line, or any arbitrary piece of text.</p>

Hyperlink - <a></h3>

<p>The HTML <a> element (or anchor element) creates a hyperlink to other web pages, files, locations within the same page, email addresses, or any other URL.</p>

Markup:</h4>

Example:</h4>

</div>

Bring Attention To - <b></h3>

<p>The HTML Bring Attention To element (<b>) is used to draw the reader's attention to the element's contents, which are not otherwise granted special importance.</p>

Markup:</h4>

This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document.

</p></pre>

Example:</h4>

<p>

This article describes several <b>text-level</b> elements. It explains their usage in an <b>HTML</b> document.

</p>

</div>

Line Break - <br></h3>

<p>The HTML <br> element produces a line break in text (carriage-return). It is useful for writing a poem or an address, where the division of lines is significant.</p>

Markup:</h4>

<pre>Mozilla Foundation<br>

1981 Landings Drive<br>

Building K<br>

Mountain View, CA 94043-0801<br>

USA</pre>

Example:</h4>

Mozilla Foundation<br>

1981 Landings Drive<br>

Building K<br>

Mountain View, CA 94043-0801<br>

USA

</div>

Citation - <cite></h3>

<p>The HTML Citation element (<cite>) is used to describe a reference to a cited creative work, and must include either the title or the URL of that work.</p>

Markup:</h4>

<pre><p>More information can be found in <cite>[ISO-0000]</cite>.</p></pre>

Example:</h4>

<p>More information can be found in <cite>[ISO-0000]</cite>.</p>

</div>

Code - <code></h3>

<p>The HTML <code> element displays its contents styled in a fashion intended to indicate that the text is a short fragment of computer code.</p>

Markup:</h4>

<pre><p>The function <code>selectAll()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p></pre>

Example:</h4>

<p>The function <code>selectAll()</code> highlights all the text in the input field so the user can, for example, copy or delete the text.</p>

</div>

Data - <data></h3>

<p>The HTML <data> element links a given content with a machine-readable translation. If the content is time- or date-related, the <time> element must be used.</p>

Markup:</h4>

<pre><p>New Products</p>

<ul>

<li><data value="398">Mini Ketchup</data></li>

<li><data value="399">Jumbo Ketchup</data></li>

<li><data value="400">Mega Jumbo Ketchup</data></li>

</ul></pre>

Example:</h4>

<p>New Products</p>

<ul>

<data value="398">Mini Ketchup</data></li>

<data value="399">Jumbo Ketchup</data></li>

<data value="400">Mega Jumbo Ketchup</data></li>

</ul>

</div>

Emphasis - <em></h3>

<p>The HTML <em> element marks text that has stress emphasis. The <em> element can be nested, with each level of nesting indicating a greater degree of emphasis.</p>

Markup:</h4>

In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.

</p></pre>

Example:</h4>

<p>

In HTML 5, what was previously called <em>block-level</em> content is now called <em>flow</em> content.

</p>

</div>

Keyboard Input - <kbd></h3>

<p>The HTML Keyboard Input element (<kbd>) represents a span of inline text denoting textual user input from a keyboard, voice input, or any other text entry device.</p>

Markup:</h4>

<pre><p>Use the command <kbd>help mycommand</kbd> to view documentation for the command "mycommand".</p></pre>

Example:</h4>

<p>Use the command <kbd>help mycommand</kbd> to view documentation for the command "mycommand".</p>

</div>

Mark - <mark></h3>

<p>The HTML Mark Text element (<mark>) represents text which is marked or highlighted for reference or notation purposes, due to the marked passage's relevance or importance in the enclosing context.</p>

Markup:</h4>

It is a period of civil war. Rebel spaceships, striking from a hidden base, have won their first victory against the evil Galactic Empire. During the battle, <mark>Rebel spies managed to steal secret plans</mark> to the Empire’s ultimate weapon, the DEATH STAR, an armored space station with enough power to destroy an entire planet.

</blockquote></pre>

Example:</h4>

</blockquote>

</div>

Inline Quotation - <q></h3>

<p>The HTML <q> element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks.</p>

Markup:</h4>

According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q>

</p></pre>

Example:</h4>

<p>

According to Mozilla's website, <q cite="https://www.mozilla.org/en-US/about/history/details/">Firefox 1.0 was released in 2004 and became a big success.</q>

</p>

</div>

Strikethrough - <s></h3>

<p>The HTML <s> element renders text with a strikethrough, or a line through it. Use the <s> element to represent things that are no longer relevant or no longer accurate. However, <s> is not appropriate when indicating document edits; for that, use the <del> and <ins> elements, as appropriate.</p>

Markup:</h4>

<pre><s>Today's Special: Salmon</s> SOLD OUT</pre>

Example:</h4>

<s>Today's Special: Salmon</s> SOLD OUT

</div>

Small Text - <small></h3>

<p>The HTML <small> element makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size. In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.</p>

Markup:</h4>

This is the first sentence. <small>This whole sentence is in small letters.</small>

</p></pre>

Example:</h4>

<p>

This is the first sentence. <small>This whole sentence is in small letters.</small>

</p>

</div>

Strong Importance - <strong></h3>

<p>The HTML Strong Importance Element (<strong>) indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.</p>

Markup:</h4>

Before proceeding, <strong>make sure you put on your safety goggles</strong>.

</p></pre>

Example:</h4>

<p>

Before proceeding, <strong>make sure you put on your safety goggles</strong>.

</p>

</div>

Subscript - <sub></h3>

<p>The HTML Subscript element (<sub>) specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.</p>

Markup:</h4>

According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this will result in the complete annihilation of both particles.

</p></pre>

Example:</h4>

<p>

According to the computations by Nakamura, Johnson, and Mason<sub>1</sub> this will result in the complete annihilation of both particles.

</p>

</div>

Superscript - <sup></h3>

<p>The HTML Superscript element (<sup>) specifies inline text which is to be displayed as superscript for solely typographical reasons.</p>

Markup:</h4>

One of the most common equations in all of physics is E=mc<sup>2</sup>.

Example:</h4>

<p>

One of the most common equations in all of physics is E=mc<sup>2</sup>.

<p>

</div>

Time - <time></h3>

<p>The HTML <time> element represents a specific period in time. It may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine results or custom features such as reminders.</p>

Markup:</h4>

The concert starts at <time>20:00</time>.

</p></pre>

Example:</h4>

<p>

The concert starts at <time>20:00</time>.

</p>

</div>

Unarticulated Annotation - <u></h3>

<p>The HTML Unarticulated Annotation element (<u>) represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation.</p>

Markup:</h4>

This paragraph includes a <u class="spelling">wrnogly</u> spelled word.

</p></pre>

Example:</h4>

<p>

This paragraph includes a <u class="spelling">wrnogly</u> spelled word.

</p>

</div>

Image and multimedia</h2>

<p>HTML supports various multimedia resources such as images, audio, and video.</p>

Audio - <audio></h3>

<p>The HTML <area> element defines a hot-spot region on an image, and optionally associates it with a hypertext link. This element is used only within a <map> element.</p>

Markup:</h4>

Example:</h4>

</div>

Image - <img></h3>

<p>The HTML <img> element embeds an image into the document.</p>

Markup:</h4>

Example:</h4>

</div>

Video - <video></h3>

<p>The HTML Video element (<video>) embeds a media player which supports video playback into the document.</p>

Markup:</h4>

<pre><video controls

src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"

poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"

width="620">

</video></pre>

Example:</h4>

<video controls

src="https://archive.org/download/BigBuckBunny_124/Content/big_buck_bunny_720p_surround.mp4"

poster="https://peach.blender.org/wp-content/uploads/title_anouncement.jpg?x11217"

width="620">

</video>

</div>

Table content</h2>

<p>The elements here are used to create and handle tabular data.</p>

Table - <table></h3>

<p>The HTML <table> element represents tabular data — that is, information presented in a two-dimensional table comprised of rows and columns of cells containing data.</p>

<h4 style="margin-top:1em;">Simple table</h4>

Markup:</h4>

<tr>

</tr>

<tr>

</tr>

</table></pre>

Example:</h4>

<table>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<h4 style="margin-top:1em;">Table with colspan and rowspan</h4>

Markup:</h4>

<tr>

<td>Little</td>

<td>Piggy</td>

<td>Market</td>

</tr>

<tr>

<td>Little</td>

<td>Piggy</td>

</tr>

<tr>

<td rowspan="3">Little</td>

<td>Piggy</td>

</tr>

<tr>

<td>Little</td>

<td>Piggy</td>

</tr>

<tr>

<td>Little</td>

<td>Piggy</td>

</tr>

</table></pre>

Example:</h4>

<table>

<tr>

<td>Little</td>

<td>Piggy</td>

<td>Market</td>

</tr>

<tr>

<td>Little</td>

<td>Piggy</td>

</tr>

<tr>

<td rowspan="3">Little</td>

<td>Piggy</td>

</tr>

<tr>

<td>Little</td>

<td>Piggy</td>

</tr>

<tr>

<td>Little</td>

<td>Piggy</td>

</tr>

</table>

</div>

<h4 style="margin-top:1em;">Complex table</h4>

Markup:</h4>

<caption>A complex table</caption>

<thead>

<tr>

<th colspan="3">Invoice #123456789</th>

<th>14 January 2025

</tr>

<tr>

<br> Acme Billing Co.

<br> 123 Main St.

<br> Cityville, NA 12345

</td>

<strong>Customer:</strong>

<br> John Smith

<br> 321 Willow Way

<br> Southeast Northwestershire, MA 54321

</td>

</tr>

</thead>

<tbody>

<tr>

<th>Name / Description</th>

</tr>

<tr>

<td>Paperclips</td>

</tr>

<tr>

<td>Staples (box)</td>

</tr>

</tbody>

<tfoot>

<tr>

<th colspan="3">Subtotal</th>

</tr>

<tr>

</tr>

<tr>

<th colspan="3">Grand Total</th>

</tr>

</tfoot>

</table></pre>

Example:</h4>

<table>

<caption>A complex table</caption>

<thead>

<tr>

<th colspan="3">Invoice #123456789</th>

<th>14 January 2025

</tr>

<tr>

<br> Acme Billing Co.

<br> 123 Main St.

<br> Cityville, NA 12345

</td>

<strong>Customer:</strong>

<br> John Smith

<br> 321 Willow Way

<br> Southeast Northwestershire, MA 54321

</td>

</tr>

</thead>

<tbody>

<tr>

<th>Name / Description</th>

</tr>

<tr>

<td>Paperclips</td>

</tr>

<tr>

<td>Staples (box)</td>

</tr>

</tbody>

<tfoot>

<tr>

<th colspan="3">Subtotal</th>

</tr>

<tr>

</tr>

<tr>

<th colspan="3">Grand Total</th>

</tr>

</tfoot>

</table>

</div>

<h4 style="margin-top:1em;">Complex data table</h4>

Markup:</h4>

<thead>

<tr>

<th colspan="2" rowspan="1">HR Information</th>

<th colspan="3" rowspan="1">Contact</th>

</tr>

<tr>

<th rowspan="1" colspan="1">Position</th>

<th rowspan="1" colspan="1">Salary</th>

<th rowspan="1" colspan="1">Office</th>

</tr>

</thead>

<tbody>

<tr>

<td class="sorting_1">Airi Satou</td>

<td>Accountant</td>

<td>Tokyo</td>

<td>a.satou@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Angelica Ramos</td>

<td>Chief Executive Officer (CEO)</td>

<td>London</td>

<td>a.ramos@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Ashton Cox</td>

<td>Junior Technical Author</td>

<td>San Francisco</td>

<td>a.cox@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Bradley Greer</td>

<td>Software Engineer</td>

<td>London</td>

<td>b.greer@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Brenden Wagner</td>

<td>Software Engineer</td>

<td>San Francisco</td>

<td>b.wagner@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Brielle Williamson</td>

<td>Integration Specialist</td>

<td>b.williamson@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Bruno Nash</td>

<td>Software Engineer</td>

<td>London</td>

<td>b.nash@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Caesar Vance</td>

<td>Pre-Sales Support</td>

<td>c.vance@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Cara Stevens</td>

<td>Sales Assistant</td>

<td>c.stevens@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Cedric Kelly</td>

<td>Senior Javascript Developer</td>

<td>Edinburgh</td>

<td>c.kelly@datatables.net</td>

</tr>

</tbody>

<tfoot>

<tr>

<th rowspan="1" colspan="1">Position</th>

<th rowspan="1" colspan="1">Salary</th>

<th rowspan="1" colspan="1">Office</th>

</tr>

</tfoot>

</table></pre>

Example:</h4>

<table>

<thead>

<tr>

<th colspan="2" rowspan="1">HR Information</th>

<th colspan="3" rowspan="1">Contact</th>

</tr>

<tr>

<th rowspan="1" colspan="1">Position</th>

<th rowspan="1" colspan="1">Salary</th>

<th rowspan="1" colspan="1">Office</th>

</tr>

</thead>

<tbody>

<tr>

<td class="sorting_1">Airi Satou</td>

<td>Accountant</td>

<td>Tokyo</td>

<td>a.satou@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Angelica Ramos</td>

<td>Chief Executive Officer (CEO)</td>

<td>London</td>

<td>a.ramos@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Ashton Cox</td>

<td>Junior Technical Author</td>

<td>San Francisco</td>

<td>a.cox@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Bradley Greer</td>

<td>Software Engineer</td>

<td>London</td>

<td>b.greer@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Brenden Wagner</td>

<td>Software Engineer</td>

<td>San Francisco</td>

<td>b.wagner@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Brielle Williamson</td>

<td>Integration Specialist</td>

<td>b.williamson@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Bruno Nash</td>

<td>Software Engineer</td>

<td>London</td>

<td>b.nash@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Caesar Vance</td>

<td>Pre-Sales Support</td>

<td>c.vance@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Cara Stevens</td>

<td>Sales Assistant</td>

<td>c.stevens@datatables.net</td>

</tr>

<tr>

<td class="sorting_1">Cedric Kelly</td>

<td>Senior Javascript Developer</td>

<td>Edinburgh</td>

<td>c.kelly@datatables.net</td>

</tr>

</tbody>

<tfoot>

<tr>

<th rowspan="1" colspan="1">Position</th>

<th rowspan="1" colspan="1">Salary</th>

<th rowspan="1" colspan="1">Office</th>

</tr>

</tfoot>

</table>

</div>

Table Head - <thead></h3>

<p>The HTML <thead> element defines a set of rows defining the head of the columns of the table.</p>

Markup:</h4>

<thead>

<tr>

<th>First name</th>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

</table></pre>

Example:</h4>

<table>

<thead>

<tr>

<th>First name</th>

</tr>

</thead>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

Table Head Cell - <th></h3>

<p>The HTML <th> element defines a cell as header of a group of table cells. The exact nature of this group is defined by the scope and headers attributes.</p>

Markup:</h4>

<tr>

<th>First name</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table></pre>

Example:</h4>

<table>

<tr>

<th>First name</th>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

Table Body - <tbody></h3>

<p>The HTML Table Body element (<tbody>) encapsulates a set of table row (<tr> elements, indicating that they comprise the body of the table (<table>).</p>

Markup:</h4>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table></pre>

Example:</h4>

<table>

<tbody>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

Table Footer - <tfoot></h3>

<p>The HTML <tfoot> element defines a set of rows summarizing the columns of the table.</p>

Markup:</h4>

<tr>

</tr>

<tr>

</tr>

<tfoot>

<tr>

<td>Footer content 1</td>

<td>Footer content 2</td>

</tr>

</tfoot>

</table></pre>

Example:</h4>

<table>

<tr>

</tr>

<tr>

</tr>

<tfoot>

<tr>

<td>Footer content 1</td>

<td>Footer content 2</td>

</tr>

</tfoot>

</table>

</div>

Table Caption - <caption></h3>

<p>The HTML Table Caption element (<caption>) specifies the caption (or title) of a table, and if used is always the first child of a <table>.</p>

Markup:</h4>

<caption>Awesome caption</caption>

<tr>

<td>Awesome data</td>

</tr>

</table></pre>

Example:</h4>

<table>

<caption>Awesome caption</caption>

<tr>

<td>Awesome data</td>

</tr>

</table>

</div>

Column Group - <colgroup></h3>

<p>The HTML <colgroup> element defines a group of columns within a table.</p>

Markup:</h4>

<tr>

<th>Countries</th>

<th>Capitals</th>

<th>Population</th>

<th>Language</th>

</tr>

<tr>

<td>Washington, D.C.</td>

<td>309 million</td>

<td>English</td>

</tr>

<tr>

<td>Sweden</td>

<td>Stockholm</td>

<td>9 million</td>

<td>Swedish</td>

</tr>

</table></pre>

Example:</h4>

<table>

<tr>

<th>Countries</th>

<th>Capitals</th>

<th>Population</th>

<th>Language</th>

</tr>

<tr>

<td>Washington, D.C.</td>

<td>309 million</td>

<td>English</td>

</tr>

<tr>

<td>Sweden</td>

<td>Stockholm</td>

<td>9 million</td>

<td>Swedish</td>

</tr>

</table>

</div>

Table Column - <col></h3>

<p>The HTML <col> element defines a column within a table and is used for defining common semantics on all common cells. It is generally found within a <colgroup> element.</p>

Markup:</h4>

</colgroup>

<tr>

<th>Lemon</th>

<th>Orange</th>

</tr>

<tr>

<td>Green</td>

<td>Yellow</td>

<td>Orange</td>

</tr>

</table></pre>

Example:</h4>

<table>

</colgroup>

<tr>

<th>Lemon</th>

<th>Orange</th>

</tr>

<tr>

<td>Green</td>

<td>Yellow</td>

<td>Orange</td>

</tr>

</table>

</div>

Forms</h2>

<p>HTML provides a number of elements which can be used together to create forms which the user can fill out and submit to the Web site or application. There's a great deal of further information about this available in the <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms" target="_blank">HTML forms guide.</a></p>

<p>The HTML <form> element represents a document section that contains interactive controls for submitting information to a web server.</p>

<h4 style="margin-top:1em;">Simple form</h4>

Markup:</h4>

</form></pre>

Example:</h4>

</form>

</div>

<p>The HTML <button> element represents a clickable button, which can be used in forms, or anywhere in a document that needs simple, standard button functionality.</p>

Markup:</h4>

<pre><button name="button">Click me</button></pre>

Example:</h4>

<button name="button">Click me</button>

</div>

<p>The HTML <fieldset> element is used to group several controls as well as labels (<label>) within a web form.</p>

Markup:</h4>

<legend>Title</legend>

<label for="radio1">Click me</label>

</fieldset>

</form></pre>

Example:</h4>

<legend>Title</legend>

<label for="radio1">Click me</label>

</fieldset>

</form>

</div>

<p>The HTML <input> element is used to create interactive controls for web-based forms in order to accept data from the user.</p>

<h4 style="margin-top:1em;">Button input</h4>

<p>A push button with no default behavior.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Checkbox input</h4>

<p>A check box allowing single values to be selected/deselected.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Color input</h4>

<p>A control for specifying a color. A color picker's UI has no required features other than accepting simple colors as text (more info).</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Date input</h4>

<p>A control for entering a date (year, month, and day, with no time).</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Datetime-local input</h4>

<p>A control for entering a date and time, with no time zone.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Time input</h4>

<p>A control for entering a time value with no time zone.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Week input</h4>

<p>A control for entering a date consisting of a week-year number and a week number with no time zone.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Month input</h4>

<p>A control for entering a month and year, with no time zone.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">File input</h4>

<p>A control that lets the user select a file. Use the accept attribute to define the types of files that the control can select.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Email input</h4>

<p>A field for editing an e-mail address.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Hidden input</h4>

<p>A control that is not displayed but whose value is submitted to the server.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Number input</h4>

<p>A control for entering a number.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Password input</h4>

<p>A single-line text field whose value is obscured. Use the maxlength and minlength attributes to specify the maximum length of the value that can be entered.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Radio input</h4>

<p>A radio button, allowing a single value to be selected out of multiple choices.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Range input</h4>

<p>A control for entering a number whose exact value is not important.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Reset input</h4>

<p>A button that resets the contents of the form to default values.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Search input</h4>

<p>A single-line text field for entering search strings. Line-breaks are automatically removed from the input value.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Submit input</h4>

<p>A button that submits the form.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Tel input</h4>

<p>A control for entering a telephone number.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Text input</h4>

<p>A single-line text field. Line-breaks are automatically removed from the input value.</p>

Markup:</h4>

Example:</h4>

</div>

<h4 style="margin-top:1em;">Url input</h4>

<p>A field for entering a URL.</p>

Markup:</h4>

Example:</h4>

</div>

<p>The HTML <label> element represents a caption for an item in a user interface.</p>

Markup:</h4>

<pre><label>Click me <input type="text"></label></pre>

Example:</h4>

<label>Click me <input type="text" id="text-text1"></label>

</div>

<p>The HTML <legend> element represents a caption for the content of its parent <fieldset>.</p>

Markup:</h4>

<legend>Title</legend>

<label for="radio2">Click me</label>

</fieldset>

</form></pre>

Example:</h4>

<legend>Title</legend>

<label for="radio2">Click me</label>

</fieldset>

</form>

</div>

<p>The HTML <meter> element represents either a scalar value within a known range or a fractional value.</p>

<h4 style="margin-top:1em;">Simple example</h4>

Markup:</h4>

<pre><p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p></pre>

Example:</h4>

<p>Heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>

</div>

<h4 style="margin-top:1em;">High and Low range example</h4>

Markup:</h4>

Example:</h4>

</div>

<p>The HTML Output element (<output>) is a container element into which a site or app can inject the results of a calculation or the outcome of a user action.</p>

Markup:</h4>

<input type="range" name="b" value="50" /> +

<input type="number" name="a" value="10" /> =

</form></pre>

Example:</h4>

<label for="test-b">b</label> <input type="range" name="b" value="50" id="test-b" /> +

<label for="test-a">a</label> <input type="number" name="a" value="10" id="test-a" /> =

</form>

</div>

<p>The HTML <progress> element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.</p>

Markup:</h4>

Example:</h4>

</div>

<p>The HTML <select> element represents a control that provides a menu of options</p>

<h4 style="margin-top:1em;">Simple select list</h4>

Markup:</h4>

<option value="value1">Value 1</option>

<option value="value2" selected>Value 2</option>

<option value="value3">Value 3</option>

</select></pre>

Example:</h4>

<option value="value1">Value 1</option>

<option value="value2" selected>Value 2</option>

<option value="value3">Value 3</option>

</select>

</div>

<h4 style="margin-top:1em;">With option groups</h4>

Markup:</h4>

<option>Option 1.1</option>

</optgroup>

<option>Option 2.1</option>

<option>Option 2.2</option>

</optgroup>

<option>Option 3.1</option>

<option>Option 3.2</option>

<option>Option 3.3</option>

</optgroup>

</select></pre>

Example:</h4>

<select aria-label="Test select"

<option>Option 1.1</option>

</optgroup>

<option>Option 2.1</option>

<option>Option 2.2</option>

</optgroup>

<option>Option 3.1</option>

<option>Option 3.2</option>

<option>Option 3.3</option>

</optgroup>

</select>

</div>

<p>The HTML <textarea> element represents a multi-line plain-text editing control.</p>

Markup:</h4>

<pre><textarea name="textarea" rows="10" cols="50">Write something here</textarea></pre>

Example:</h4>

<label for="test-textarea">Test me</label> <textarea name="textarea" rows="10" cols="50" id="test-textarea">Write something here</textarea>

</div>

Stage

"StyleStage" CSS shocase from https://github.com/5t3ph/stylestage (with modifications

<a>[4])

Edit Stage boilerplate container and content area dimensions

<a href="#main" class="skip-link">Skip to main content</a>

Style Stage</h1>

A modern CSS showcase styled by community contributions</h2>

<p>

Maintained by <a target="_blank" href="https://twitter.com/5t3ph">Stephanie Eckles</a> of

<a target="_blank" href="https://moderncss.dev">ModernCSS.dev</a>

</p>

<a target="_blank" href="https://github.com/5t3ph/stylestage" class="link-github"

><span

><svg

xmlns="//www.w3.org/2000/svg"

viewBox="0 0 32 32"

aria-hidden="true"

focusable="false"

<path

d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"

></path>

</svg>

</span>

Star on Github</a

</div>

</header>

<nav>

<ul>

<a href="#about">About</a></li>

<a href="#guidelines">Guidelines</a></li>

<a href="#contribute">Contribute</a></li>

<a href="#files">Files</a></li>

<a target="_blank" href="https://stylestage.dev/styles/">All Styles</a></li>

<a target="_blank" href="https://stylestage.dev/resources/">Resources</a></li>

</ul>

</nav>

Setting the Stage</h2>

<p>

In 2003, <a target="_blank" href="//daveshea.com/projects/zen/">Dave Shea</a> began a legendary

project called <a target="_blank" href="//www.csszengarden.com/">CSS Zen Garden</a> that provided

a demonstration of "what can be accomplished through CSS-based design" until

submissions stopped in 2013.

</p>

<p>

<strong>Style Stage</strong> seeks to rekindle that spirit by providing this page as

the base HTML for contributors - like you! - to re-style by submitting an alternate

stylesheet.

</p>

<p>

<strong>How it works:</strong> Visit the

<a target="_blank" href="https://stylestage.dev/styles/">"All Styles"</a> directory page and select a style to view. A

page with identical content to this one will be presented with a new design provided

from a contributed stylesheet. CSS practitioners of any skill level are invited to

<a href="#contribute">submit a stylesheet</a>!

</p>

</blockquote>

<p>

The HTML for this page was created to be semantic, accessible, and free of nearly all

other opinions. Nested sectioning elements with the class `.container` serve as

additional style aids since you do not have access to alter the base HTML. IDs are

included where needed for nav anchors or accessibility, and a small number of

additional classes are provided for key elements without IDs. Don't forget the

`.skip-link`!

</p>

</section>

Modern CSS Under the Spotlight</h2>

<p>

Modern CSS has increased and improved the available CSS properties and layout

behaviors, and browser support is nearly in sync for most high-touch features.

</p>

<p>Some examples of modern CSS include:</p>

<ul>

Flexbox</li>

Grid</li>

custom variables</li>

@supports()</li>

gradients</li>

animation</li>

3D transforms</li>

object-fit</li>

:focus-within</li>

calc()</li>

min() / max() / clamp()</li>

viewport units</li>

scroll-(margin/padding/snap)</li>

position: sticky</li>

two-value display</li>

expanded media query values</li>

variable fonts</li>

</ul>

<p>

We also collectively have an improved understanding of what it takes to make

accessible experiences.

</p>

<p>

<a href="#contribute">Join Style Stage as a contributor</a> to refresh your CSS

skills, and learn from others!

</p>

</section>

</article>

Guidelines</h2>

<p>

Contributing a stylesheet to Style Stage means you agree to abide by

<a target="_blank" href="https://stylestage.dev/guidelines/">our full guidelines</a>.

</p>

TL;DR</h3>

<p>

All submissions will be autoprefixed and prepended with the

<a target="_blank" href="https://creativecommons.org/licenses/by-nc-sa/3.0/">CC BY-NC-SA license</a>

as well as attribution using the metadata you provide. You may use any build setup you

prefer, but the final submission should be the compiled, unminified CSS. You retain

the copyright to original graphics and must ensure all graphics used are appropriately

licensed. All asset links, including fonts, must be absolute to external resources.

Stylesheets will be saved into the Github repo, and detected changes that violate the

guidelines are cause for removal.

</p>

<p>

Ensure your design is responsive, and that it passes accessible contrast (we'll be

using aXe to verify). Animations should be removed via `prefers-reduced-motion`.

Cutting-edge techniques should come with a fallback if needed to not severely impact

the user experience. No content may be permanently hidden, and hidden items must come

with an accessible viewing technique. Page load time should not exceed 3 seconds.

</p>

<p>

Most importantly - have fun and learn something new! Check out the

<a target="_blank" href="https://stylestage.dev/resources/">resources</a> for tips and inspiration.

</p>

<a target="_blank" href="https://stylestage.dev/guidelines/" class="link-guidelines">Review full guidelines</a>

</section>

</article>

Contribute</h2>

<p>All who enjoy the craft of writing CSS are welcome to contribute!</p>

<p>

By participating as a contributor, your work will be shared with your provided

attribution as long as Style Stage is online, your stylesheet link and any asset links

remain valid, and all <a target="_blank" href="https://stylestage.dev/guidelines/">contributor guidelines</a> are adhered

to.

</p>

</section>

Steps to Contribute</h3>

<ol>

Download the source files listed below to use as a reference to build your

stylesheet, or start from the

<a target="_blank" href="https://github.com/5t3ph/stylestage-sass">Sass template</a>.

</li>

Host your completed stylesheet at a public URL, and ensure all asset links are

absolute URLs to external resources.

</li>

<a target="_blank" href="https://github.com/5t3ph/stylestage">Create a pull request</a> to add your

information as a unique .json file to: src/_data/styles. The schema is detailed in

the repo README, and you can review the FAQ on

<a target="_blank" href="https://stylestage.dev/guidelines/#how-do-i-create-a-pull-request-pr">creating a pull request</a

</li>

If your contribution abides by the previously listed guidelines, your submission

will be added!

</li>

</ol>

</section>

Source Files</h3>

<a target="_blank" href="https://stylestage.dev/source-files/style.css" class="link-downloadcss" download>Download CSS</a>

<a target="_blank" href="https://stylestage.dev/source-files/stylestage.html" class="link-downloadhtml" download

>Download HTML</a

target="_blank" href="https://codepen.io/5t3ph/pen/b493845ae41e836889dd84fdbb0f5291"

class="link-codepen"

download

>Fork the CodePen</a

</div>

</footer>

</article>

</div>

</main>

<h4 id="profile-title">Currently Staged Style</h4>

<ul>

<li class="profile-title"><span>Title:</span> <span>Main Stage</span></li>

<li class="profile-author"><span>Author:</span> <span>Stephanie Eckles</span></li>

<span>Twitter:</span> <span><a target="_blank" href="https://twitter.com/5t3ph">5t3ph</a></span>

</li>

<span>Website:</span> <span><a target="_blank" href="https://moderncss.dev">ModernCSS.dev</a></span>

</li>

</ul>

<a target="_blank" href="https://stylestage.dev/styles/css/main-stage.css">View Stylesheet</a>

</div>

</aside>

Featured Styles</h2>

<span>

<a target="_blank" href="https://stylestage.dev/styles/purplify-and-pastel"

>Purplify & Pastel<span aria-hidden="true"></span

></a>

<span>by Dominic Duffin</span>

</span>

</li>

<span>

<a target="_blank" href="https://stylestage.dev/styles/final-frontier">Final Frontier<span aria-hidden="true"></span></a>

<span>by Danielle Mayabb</span>

</span>

</li>

<span>

<a target="_blank" href="https://stylestage.dev/styles/moccasin-stage">Moccasin Stage<span aria-hidden="true"></span></a>

<span>by Gabriel Paixao</span>

</span>

</li>

</ul>

<a target="_blank" href="https://stylestage.dev/styles/" class="link-allstyles">View All Styles</a>

</div>

</aside>

<p>

Created and maintained by

<a target="_blank" href="https://twitter.com/5t3ph">Stephanie Eckles (@5t3ph)</a>

</p>

<ul>

<a target="_blank" href="https://twitter.com/5t3ph" class="link-twittercontact">Contact on Twitter</a>

</li>

<a target="_blank" href="https://github.com/5t3ph/stylestage" class="link-github"

><svg

xmlns="//www.w3.org/2000/svg"

viewBox="0 0 32 32"

aria-hidden="true"

focusable="false"

<path

d="M32 12.408l-11.056-1.607-4.944-10.018-4.944 10.018-11.056 1.607 8 7.798-1.889 11.011 9.889-5.199 9.889 5.199-1.889-11.011 8-7.798z"

></path>

</svg>

Star on Github</a

</li>

<a target="_blank" href="https://stylestage.dev/subscribe/" class="link-support">Subscribe to Updates</a></li>

</ul>

<p>

Crafted with semantic, accessible HTML and CSS, <strong>Style Stage</strong> is generated

with <a target="_blank" href="https://11ty.dev">11ty</a> and hosted on

<a target="_blank" href="https://netlify.com">Netlify</a>. This project uses

<a target="_blank" href="https://postcss.org/">PostCSS</a> with

<a target="_blank" href="https://github.com/postcss/autoprefixer">autoprefixer</a>.

</p>

<p>

Contributors retain copyright of all graphics used, and styles are available under

</p>

</div>

</footer>