Elements

Below are all the tags styled by dress.css along with markup samples.

For legibility, the docs site highlights code blocks with Prism using bespoke light (Pastie) and dark (Dracula) themes. This syntax highlighting is limited to the documentation and is not bundled with dress.css.

Text
Links
Lists
Quotes
- Inline Quotation <q>
- Block Quotation <blockquote>
Code
Embeds (Media)
Blocks
Popups
- Dialog <dialog>
- Popover popover
Page Sections
Form <form>
Properties
- Inert inert

Text

Headings `<h1>…<h6>`

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

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

Abbreviation `<abbr>`

LBD

<abbr title="little black dress">LBD</abbr>

Mark Text (Highlighted Text) `<mark>`

highlighted text highlighted text with link

<mark>highlighted text</mark>
<mark><a href="#main">highlighted text with link</a></mark>

Inserted & Deleted Text `<ins>` `<del>`

Our sale ends ~~Sunday~~ Monday.

Our sale ends <del>Sunday</del> <ins>Monday</ins>.

Links

Hyperlink `<a>`

Click me

<a href="https://example.com/">Click me</a>

Button Link `<a role="button">`

<a role="button" href="https://example.com/signup">Sign Up</a>

Download Link `<a download>`

Download PDF
Save source

<a role="button" href="doc.pdf" download>Download PDF</a>
<a href="doc.md" download>Save source</a>

New Window Link `<a target="_blank">`

Shop Now
Submit Review

<a role="button" href="https://example.com/shop/" target="_blank">Shop Now</a>
<a href="https://example.com/review/" target="_blank">Submit Review</a>

In links wrapping images in a <figure>, the icon will not show.

🖨️ In print, the URL of the link will be displayed instead of the icon:

Shop Now <https://example.com/shop/>

Header Title Link `<header><h1><a href="…">`

When a <h1> heading in the <header> contains only a link, it is assumed to be used as the header title link, normally containing the site’s logo and title, and pointing to the site’s homepage. For this, the link will still work as intended for practicality, but will camouflaged as normal text for legibility and avoid distractions.

For accessibility, it is best to also include a Home link in your main menu.

Also see the details on the formatting of the page header.

<header>
	<h1>
		<a href="/">
			<img src="logo.png" alt="">
			Runway
		</a>
	</h1>
</header>

Skip Navigation (“skipnav”) `<body><a href="#…">`

For the accessibility of screen reader users, it’s common to add a link at the very beginning of the page to skip the header and its menu, and go straight to the main content. It remains hidden until the user tabs to it, yet it is always visible to the screen reader.

When a link is the first child element of <body> and points to a section to the page other than #, it will be treated and rendered as such “skipnav” link.

Skip to main content

<body>
	<!-- Skipnav link: first child of <body> and points to section on page. -->
	<a href="#main">Skip to main navigation</a>

	<header>
		<!-- Header & menu -->
	</header>
	<main id="main">
		<!-- Main content -->
	</main>
</body>

Lists

Unordered List `<ul>`

Unordered list item 1
- Nested unordered list item 1
- Nested unordered list item 2
Unordered list item 2
Unordered list item 3

<ul>
	<li>
		Unordered list item 1
		<ul>
			<li>Nested unordered list item 1</li>
			<li>Nested unordered list item 2</li>
		</ul>
	</li>
	<li>Unordered list item 2</li>
	<li>Unordered list item 3</li>
</ul>

Ordered List `<ol>`

Ordered list item 1
1. Nested ordered list item 1
2. Nested ordered list item 2
Ordered list item 2
Ordered list item 3

<ol>
	<li>
		Ordered list item 1
		<ol>
			<li>Nested ordered list item 1</li>
			<li>Nested ordered list item 2</li>
		</ol>
	</li>
	<li>Ordered list item 2</li>
	<li>Ordered list item 3</li>
</ol>

Menu List `<menu>`

Menu list item 1

Nested menu list item 1
Nested menu list item 2

Menu list item 2

Menu list item 3

<menu>
	<li>
		Menu list item 1
		<ul>
			<li>Nested menu list item 1</li>
			<li>Nested menu list item 2</li>
		</ul>
	</li>
	<li>Menu list item 2</li>
	<li>Menu list item 3</li>
</menu>

Description List `<dl>`

Term 1 : Definition 1

Term 2 : Definition 2

Term 3 : Definition 3

<dl>
	<dt>Term 1</dt>
	<dd>Definition 1</dd>
	<dt>Term 2</dt>
	<dd>Definition 2</dd>
	<dt>Term 3</dt>
	<dd>Definition 3</dd>
</dl>

Quotes

Inline Quotation `<q>`

Tech is fine, but I’d rather talk about fashion.

<q>Tech is fine, but I’d rather talk about fashion.</q>

Block Quotation `<blockquote>`

“Simplicity is the keynote of all true elegance.”
— Coco Chanel

<blockquote>
	“Simplicity is the keynote of all true elegance.”<br>
	&mdash; Coco Chanel
</blockquote>

Code

Preformatted Text `<pre>`

C U B I C
U \     U \
B   C U B I C
I   U   I   U
C U B I C   B
  \ I     \ I
    C U B I C

<pre>
C U B I C
U \     U \
B   C U B I C
I   U   I   U
C U B I C   B
  \ I     \ I
	C U B I C
</pre>

Code Block `<pre><code>`

Many libraries, including code highlighters, use the <code> tag nested in a <pre> tag to display code blocks.

alert('Hello World!');

<pre><code>
alert('Hello World!');
</code></pre>

Inline Code `<code>`

echo hello

<code>echo hello</code>

Keyboard Input `<kbd>`

Ctrl+C

<kbd>Ctrl+C</kbd>

Sample Output `<samp>`

Press F1 to continue

<samp>Press F1 to continue</samp>

Embeds (Media)

Single Figure `<figure>`

A <figure> will display embedded content, including <img>, <picture>, <svg>, <video>, <object>, and <embed> as a block.

Those elements are not shown as blocks outside of a <figure>, as there are cases when embedded content is meant to be inlined.

Triangles illustration — A display of colourful triangles. (Click for more about triangles.)

<figure>
	<a href="https://en.wikipedia.org/wiki/Triangle" target="_blank">
		<img src="triangles.svg">
	</a>
	<figcaption>
		A display of colourful triangles. (Click for more about triangles.)
	</figcaption>
</figure>

Nested Figures `<figure><figure>`

Ideal for displaying multiple images side by side, or to enlarge a single figure. Collapsed into a single column on narrow displays. Formatted automatically when a single set of figures are nested into another. When only one figure is nested, it will be displayed wider than a normal figure.

<figure>
	<figure>
		<img src="fuchsia.svg">
		<figcaption>Wide Fuchsia</figcaption>
	</figure>
</figure>

<figure>
	<figure>
		<img src="blue.svg">
		<figcaption>Blue</figcaption>
	</figure>
	<figure>
		<img src="pink.svg">
		<figcaption>Pink</figcaption>
	</figure>
	<figure>
		<img src="purple.svg">
		<figcaption>Purple</figcaption>
	</figure>
	<figcaption>A set of electric colours.</figcaption>
</figure>

Video `<video>`

Videos may be embedded on their own, or in a <figure>.

<video controls src="video.mp4"></video>

Video above is from Retrosurfing.

Inline Frame `<iframe>`

Unless the width is set on an <iframe>, it will default to take the whole width of the <body>.

<iframe src="dress.html" height="200" width="400">Dress</iframe>

Blocks

Thematic Break (Horizontal Rule) `<hr>`

<hr>

Table `<table>`

Table Caption
Header 1	Header 2	Header 3	Header 4
Footer 1	Footer 2	Footer 3	Footer 4
Data 1	Data 2	Data 3	Data 4
Data 5	Data 6	Data 7	Data 8
Data 9	Data 10	Data 11	Data 12

<table>
	<caption>
		Table Caption
	</caption>
	<thead>
		<tr>
			<th>Header 1</th>
			<th>Header 2</th>
			<th>Header 3</th>
			<th>Header 4</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<th>Footer 1</th>
			<th>Footer 2</th>
			<th>Footer 3</th>
			<th>Footer 4</th>
		</tr>
	</tfoot>
	<tbody>
		<tr>
			<td>Data 1</td>
			<td>Data 2</td>
			<td>Data 3</td>
			<td>Data 4</td>
		</tr>
		<tr>
			<td>Data 5</td>
			<td>Data 6</td>
			<td>Data 7</td>
			<td>Data 8</td>
		</tr>
		<tr>
			<td>Data 9</td>
			<td>Data 10</td>
			<td>Data 11</td>
			<td>Data 12</td>
		</tr>
	</tbody>
</table>

Details Disclosure `<details>`

Click to show details

Here are all the details!

<details>
	<summary>Click to show details</summary>
	<p>Here are all the details!</p>
</details>

Popups

Dialog `<dialog>`

Styling is applied to the <dialog> and its backdrop.

Additionally, formatting is applied to a <menu> of actions in a <form> when formatted as the code sample below.

<button onclick="document.getElementById('dialogExample').showModal()">
	Open Dialog
</button>

<dialog id="dialogExample">
	<form method="dialog">
		<p><strong>Hello!</strong> This is a native dialog.</p>
		<menu>
			<li><button value="cancel" autofocus>Cancel</button></li>
			<li><button type="submit" value="ok">OK</button></li>
		</menu>
	</form>
</dialog>

Popover `popover`

Hello! This is a popover.

<button popovertarget="detailsPopover">Show Popover</button>

<div popover id="detailsPopover">
	<p><strong>Hello!</strong> This is a popover.</p>
</div>

Page Sections

In dress.css, some special formatting is used in the header and the footer of the page to ease navigation and readability. Menus (<menu>) as well as unordered lists (<ul>) in navigation (<nav>) are rendered horizontally.

Header `<header>`

Some special styling is applied to the <header> tag itself, as well to its title, link, logo, and navigation. That can be seen at the top of this page and can be replicated with the sample below:

<header>
	<h1>
		<a href="/">
			<img src="logo.png" alt="">
			Runway
		</a>
	</h1>
	<nav>
		<ul>
			<li><a href="/">Home</a></li>
			<li><a href="/contact/">Contact</a></li>
		</ul>
	</nav>
	<menu>
		<li>
			<button onclick="document.documentElement.classList.toggle('dark')">
				Toggle theme
			</button>
		</li>
		<li>
			<button onclick="document.getElementById('settings').openModal()">
				Settings
			</button>
		</li>
	</menu>
</header>

Special styling is also applied to links in <header><h1>. For details, see Header Title Link.

Footer `<footer>`

Like the <header> tag, some special formatting is applied to <footer>. That can also been seen at the bottom of this page and can be replicated with the sample below:

<footer>
	<p>&copy; 2024</p>
	<nav>
		<ul>
			<li><a href="#terms">Terms of Use</a></li>
			<li><a href="#privacy">Privacy Policy</a></li>
		</ul>
	</nav>
	<menu>
		<li><button onclick="window.print()">Print</button></li>
		<li>
			<button onclick="prompt('Copy URL:', location.href)">Share</button>
		</li>
	</menu>
</footer>

Aside `<aside>`

<aside>
	<h4>Side Notes</h4>
	<p>This information is related to the main content, but not essential.</p>
</aside>

Note: Heading hierarchy isn’t meant to be reset in sectioning elements such as <aside> and <section>. Doing so is considered non-comforing. See HTML Living Standard §4.3.11.

Navigation Section `<nav>`

There is no styling on screen applied on <nav>.

<nav>
	<a href="#">Back to top</a>
</nav>

🖨️ In print, however, some style is applied to reduce clutter on the page:

When used in <header> or <footer>, their <menu> is invisible.
They are invisible when they only contain a link to a page’s anchor.

<header>
	<nav>
		<!--
			This <menu> will be invisible in print
			because it is in a <nav> in a header or footer.
		-->
		<menu>
			<li><a href="/">Home</a></li>
		</menu>
	</nav>
</header>

<!--
	This <nav> will be invisible in print
	because it only has an anchor link.
-->
<nav>
	<a href="#example">Example section</a>
</nav>

Main `<main>`

There is no visual styling applied on <main> itself.

However, when <body> has a <main>, the body of the page will be rendered using a flex layout and expand to take the whole height of the viewport. This sets the header at the top of the page, the footer at the bottom, and centres <main> and its content, when the content of the body is shorter than the viewport of the browser.

This is ideal for pages with little content that needs to fill up the whole height of the browser’s window.

<body>
	<header><!-- ... --></header>
	<main><!-- ... --></main>
	<footer><!-- ... --></footer>
</aside>

🖨️ In print, the layout of <body> remains unaffected.

Form `<form>`

There is some styling for forms in dress.css for the most common controls. It works best with the suggested markup below, wrapping every input field into a <label> for better usability. However, forms are notorious for how finicky they are with styling, accessibility, and inconsistencies between browsers. For anything more complex, as this stylesheet is basic, you may need to look for a different styling system better suited for your needs.

Text Input `<input>`

Works with basic “textual” input fields including the following:

text (the default type)
email
number
password
search
tel
url

<nav>
	<form method="post">
		<label>
			<span>Search</span>
			<input type="search">
		</label>
	</form>
</nav>
<form method="post">
	<label>
		<span>Username</span>
		<input>
		<small>Can also be your email address or phone number.</small>
	</label>
	<label>
		<span>Password</span>
		<input type="password">
	</label>
</form>

Date & Time Input

Basic styling is applied to date and time inputs for consistency.

<label>
	<span><code>time</code></span>
	<input type="time">
</label>
<label>
	<span><code>date</code></span>
	<input type="date">
</label>
<label>
	<span><code>datetime-local</code></span>
	<input type="datetime-local">
</label>
<label>
	<span><code>month</code></span>
	<input type="month">
</label>
<label>
	<span><code>week</code></span>
	<input type="week">
</label>

Textarea `<textarea>`

<label>
	<span>Message</span>
	<textarea rows="4">Hi!</textarea>
</label>

Select `<select>`

<label>
	<span>Choose one</span>
	<select>
		<option>Option A</option>
		<option>Option B</option>
	</select>
</label>

Checkbox `<input type="checkbox">`

<label>
	<input type="checkbox" name="agree" value="1">
	<span>I agree</span>
</label>

Radio `<input type="radio">`

<label>
	<input type="radio" name="be" value="1">
	<span>To be</span>
</label>
<label>
	<input type="radio" name="be" value="0">
	<span>Not to be</span>
</label>

File Selection `<input type="file">`

<label>
	<span>Select profile avatar</span>
	<input type="file" name="avatar">
</label>

Colour `<input type="color">`

<label>
	<span>Favourite colour</span>
	<input type="color" name="color" value="#d53bb8">
</label>

Range `<input type="range">`

<label>
	<span>Volume</span>
	<input type="range" name="volume" min="0" max="11" step="1" value="9">
</label>

Composite Inputs

Labels may also contain multiple fields. Clicking on the label will focus on its first input field. However, note this is not valid HTML5 and may present accessibility issues. Use with caution. You may consider using multiple fields in a <fieldset> instead.

<label>
	<span>Full Name</span>
	<input placeholder="Given Name">
	<input placeholder="Family Name">
</label>

Field Set `<fieldset>`

<fieldset>
	<legend>Skills</legend>
	<label>
		<input type="checkbox" name="skills" value="html">
		<span>HTML</span>
	</label>
	<label>
		<input type="checkbox" name="skills" value="css">
		<span>CSS</span>
	</label>
</fieldset>

Output `<output>`

Styling on <output> is made to match the same height than an usual <input> field for consistency.

42

<output>42</output>

Progress Indicator `<progress>`

<label>
	<span>Uploading…</span>
	<progress max="100" value="75"></progress>
</label>

Meter `<meter>`

The <meter> value switches between the semantic palette using --dress-low, --dress-mid, and --dress-hi depending on the value.

0%10%30%70%90%100%

<meter min="0" max="100" low="20" high="60" optimum="80" value="0">0%</meter>
<meter min="0" max="100" low="20" high="60" optimum="80" value="10">10%</meter>
<meter min="0" max="100" low="20" high="60" optimum="80" value="30">30%</meter>
<meter min="0" max="100" low="20" high="60" optimum="80" value="70">70%</meter>
<meter min="0" max="100" low="20" high="60" optimum="80" value="90">90%</meter>
<meter min="0" max="100" low="20" high="60" optimum="80" value="100">100%</meter>

Buttons

Including <button> as well as <input> with type="button", type="reset", and type="submit".

<input type="reset" value="Reset">
<button disabled>Disabled</button>
<button type="submit">Submit</button>

Button Set `<menu><button>`

Using <menu> as a direct descendant of a <form> or <fieldset> is assumed to be meant for a toolbar with a set of action buttons and is formatted as such.

<form>
	<menu>
		<li><button>Preview</button></li>
		<li><button type="submit">Save</button></li>
	</menu>
</form>

Properties

Inert `inert`

Any element with the inert Boolean attribute will have its content appear faded.

<nav inert><a href="javascript:history.go(-1)">Go Back</a></nav>

Elements

Contents

Text

Headings <h1>…<h6>

Heading 1 <h1>

Heading 2 <h2>

Heading 3 <h3>

Heading 4 <h4>

Heading 5 <h5>

Heading 6 <h6>

Abbreviation <abbr>

Mark Text (Highlighted Text) <mark>

Inserted & Deleted Text <ins> <del>

Links

Hyperlink <a>

Button Link <a role="button">

Download Link <a download>

New Window Link <a target="_blank">

Header Title Link <header><h1><a href="…">

Skip Navigation (“skipnav”) <body><a href="#…">

Lists

Unordered List <ul>

Ordered List <ol>

Menu List <menu>

Description List <dl>

Quotes

Inline Quotation <q>

Block Quotation <blockquote>

Code

Preformatted Text <pre>

Code Block <pre><code>

Inline Code <code>

Keyboard Input <kbd>

Sample Output <samp>

Embeds (Media)

Single Figure <figure>

Nested Figures <figure><figure>

Video <video>

Inline Frame <iframe>

Blocks

Thematic Break (Horizontal Rule) <hr>

Table <table>

Details Disclosure <details>

Popups

Dialog <dialog>

Popover popover

Page Sections

Header <header>

Footer <footer>

Aside <aside>

Navigation Section <nav>

Main <main>

Form <form>

Text Input <input>