COMPONENTS

Typography

Native HTML text elements receive their styling automatically. This page covers all six heading levels, body text, inline semantics, lists, quotations and technical notation, with the HTML beneath every example.

Usage

Markup: Native headings, paragraphs, lists and inline text

Behaviour: Document structure comes from your markup.

Choose an element for its meaning, rather than its visual size. Use a logical heading hierarchy and a clear page heading; no typography classes are required.
The heading specimen uses a separate document so its h1–h6 examples do not interrupt the documentation page's own outline. Its palette follows the browser colour preference.
Theme, font and data-type defaults inherit from the parent. data-size configures controls, not body text. The optional prose class limits reading width; it is not required for text styling.
Some elements use RevaCSS styling and others preserve browser-native presentation. Semantic markup does not automatically add application behaviour or accessible explanations; expand abbreviations in text when needed.

Component API and styling module · Inherited appearance settings

All six heading levels

h1 through h6 retain their native semantics and default styling. This isolated document has its own page heading; use levels according to the structure of your real content.

<main class="container" style="padding: 1rem;">
  <h1>Heading 1 — Page title</h1>
  <h2>Heading 2 — Main section</h2>
  <h3>Heading 3 — Subsection</h3>
  <h4>Heading 4 — Detailed section</h4>
  <h5>Heading 5 — Supporting detail</h5>
  <h6>Heading 6 — Further detail</h6>
  <p>Heading levels express hierarchy, not a choice of font size.</p>
</main>

Paragraphs and readable text

Paragraphs use the inherited font, colour and line height. The optional prose wrapper provides a readable maximum width.

RevaCSS starts with ordinary HTML. Use paragraphs to organise related sentences into clear blocks of content.

A new paragraph gives the next idea room to breathe. Shared typography settings apply without repeated classes.

Supporting information: available features may vary by browser.

<div class="prose">
  <p>RevaCSS starts with ordinary HTML. Use paragraphs to organise related sentences into clear blocks of content.</p>
  <p>A new paragraph gives the next idea room to breathe. Shared typography settings apply without repeated classes.</p>
  <p><small>Supporting information: available features may vary by browser.</small></p>
</div>

Importance, emphasis and visual annotation

strong expresses importance and em expresses stress. b draws attention, i distinguishes an alternate voice or term, u annotates, and s marks information that is no longer accurate.

Important: save your changes before leaving.

This setting is especially useful for shared themes.

The keyword is inheritance.

The term in situ means in its original place.

Spelling annotation: recieve should be receive.

~~Registration closes on Friday.~~ Registration now closes on Monday.

Highlighted for review: confirm the delivery date.

<p><strong>Important:</strong> save your changes before leaving.</p>
<p>This setting is <em>especially</em> useful for shared themes.</p>
<p>The keyword is <b>inheritance</b>.</p>
<p>The term <i lang="la">in situ</i> means in its original place.</p>
<p>Spelling annotation: <u>recieve</u> should be receive.</p>
<p><s>Registration closes on Friday.</s> Registration now closes on Monday.</p>
<p><mark>Highlighted for review:</mark> confirm the delivery date.</p>

Links and supporting text

Use real destinations and meaningful link labels. Small print remains readable and is not a substitute for essential instructions.

Start with the RevaCSS installation guide.

For a local section, see all six heading levels.

Terms apply to the current preview release.

<p>Start with the <a href="/RevaCSS/guide/">RevaCSS installation guide</a>.</p>
<p>For a local section, see <a href="#headings">all six heading levels</a>.</p>
<p><small>Terms apply to the current preview release.</small></p>

Inserted and deleted content

Use ins and del to identify document edits. Their semantics differ from simply drawing a line through outdated text with s.

The meeting starts at ~~09:00~~ 10:00.

<p>The meeting starts at <del datetime="2026-10-01">09:00</del> <ins datetime="2026-10-02">10:00</ins>.</p>

Abbreviations and definitions

Expand abbreviations visibly on first use. The title attribute provides additional information but should not be the only explanation.

Cascading Style Sheets (CSS) controls presentation.

Inheritance is the process by which supported styling values pass from a parent to its descendants.

<p>Cascading Style Sheets (<abbr title="Cascading Style Sheets">CSS</abbr>) controls presentation.</p>
<p><dfn>Inheritance</dfn> is the process by which supported styling values pass from a parent to its descendants.</p>

Unordered, ordered and nested lists

Use ul when order is not meaningful and ol for sequences. Nest another list inside its parent li; native numbering options need no helper classes.

Light theme
Dark theme
- Solid surfaces
- Glass surfaces

Load the stylesheet
Set shared defaults
Add semantic HTML

Override local exceptions
Review the result

<ul>
  <li>Light theme</li>
  <li>Dark theme
    <ul>
      <li>Solid surfaces</li>
      <li>Glass surfaces</li>
    </ul>
  </li>
</ul>
<ol>
  <li>Load the stylesheet</li>
  <li>Set shared defaults</li>
  <li>Add semantic HTML</li>
</ol>
<ol start="4">
  <li>Override local exceptions</li>
  <li>Review the result</li>
</ol>

Terms and descriptions

Native dl, dt and dd express term/value associations. The separate description-list component is available when you need a responsive record layout.

Theme: The light, dark or system colour mode.
Material: The solid or glass surface treatment.
Accent: The shared highlight colour.

<dl>
  <dt>Theme</dt>
  <dd>The light, dark or system colour mode.</dd>
  <dt>Material</dt>
  <dd>The solid or glass surface treatment.</dd>
  <dt>Accent</dt>
  <dd>The shared highlight colour.</dd>
</dl>

Block quotations, inline quotes and citations

blockquote contains a quotation, q marks an inline quotation, and cite names a work rather than a person's name. The text below is demonstration copy.

Good defaults leave room for your own decisions.

From A demonstration of semantic typography.

The example describes its approach as native by design.

<figure>
  <blockquote>
    <p>Good defaults leave room for your own decisions.</p>
  </blockquote>
  <figcaption>From <cite>A demonstration of semantic typography</cite>.</figcaption>
</figure>
<p>The example describes its approach as <q>native by design</q>.</p>

Code, keyboard input, output and variables

code identifies code, kbd keyboard input, samp program output and var a variable. Escape angle brackets when showing HTML as text.

Set data-theme="dark" on your page.

Press Ctrl + S to save.

The command reports Build complete.

The rectangle area is w × h.

<button type="button">Save</button>
<p>Your content stays in HTML.</p>

<p>Set <code>data-theme="dark"</code> on your page.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>S</kbd> to save.</p>
<p>The command reports <samp>Build complete.</samp></p>
<p>The rectangle area is <var>w</var> × <var>h</var>.</p>
<pre tabindex="0" aria-label="Example HTML"><code>&lt;button type="button"&gt;Save&lt;/button&gt;
&lt;p&gt;Your content stays in HTML.&lt;/p&gt;</code></pre>

Subscripts and superscripts

sub and sup support conventional notation. Provide an understandable text explanation when a formula needs more context.

Water has the chemical formula H₂O.

A square metre is written m².

The expression x² means x squared.

<p>Water has the chemical formula H<sub>2</sub>O.</p>
<p>A square metre is written m<sup>2</sup>.</p>
<p>The expression x<sup>2</sup> means x squared.</p>

Dates and machine-readable values

time supplies a machine-readable date or time; data associates visible text with an application value. CSS does not format dates or calculate values.

Published 2 October 2026.

The call begins at 15:30.

Product: RevaCSS starter.

<p>Published <time datetime="2026-10-02">2 October 2026</time>.</p>
<p>The call begins at <time datetime="15:30">15:30</time>.</p>
<p>Product: <data value="RV-001">RevaCSS starter</data>.</p>

Contact information

address contains contact information for the relevant page or article. RevaCSS removes the default italic styling; use ordinary HTML links where appropriate.

RevaCSS project
Project repository and issue tracker

<address>
  RevaCSS project<br>
  <a href="https://github.com/eristavi/RevaCSS">Project repository and issue tracker</a>
</address>

Thematic breaks and controlled line breaks

hr marks a thematic change, br creates a meaningful line break and wbr marks an optional wrapping opportunity. Use paragraphs and CSS spacing rather than repeated br elements.

The first topic ends here.

A new topic begins here.

A two-line label:
Native HTML and CSS

An optional break: verylongprojectnameexample

<p>The first topic ends here.</p>
<hr>
<p>A new topic begins here.</p>
<p>A two-line label:<br>Native HTML and CSS</p>
<p>An optional break: verylong<wbr>projectname<wbr>example</p>

Language, direction and ruby annotations

Set language and direction where needed. bdi isolates text with an unknown direction; bdo deliberately overrides direction. Ruby annotations retain native browser presentation.

Une interface claire et lisible.

Contributor: עדי.

Direction override demonstration: ABC.

東京（とうきょう）

<p lang="fr">Une interface claire et lisible.</p>
<p>Contributor: <bdi dir="auto" lang="he">עדי</bdi>.</p>
<p>Direction override demonstration: <bdo dir="rtl">ABC</bdo>.</p>
<p lang="ja"><ruby>東京<rp>（</rp><rt>とうきょう</rt><rp>）</rp></ruby></p>

Inherited text scale and a local exception

data-type selects body typography scale. Configure a parent and override only exceptions; headings and paragraphs require no extra styling classes.

A larger shared text scale

Headings and body text use the parent typography scale.

A compact local section

Only this branch changes its text scale.

<section data-type="large">
  <h3>A larger shared text scale</h3>
  <p>Headings and body text use the parent typography scale.</p>
  <section data-type="compact">
    <h4>A compact local section</h4>
    <p>Only this branch changes its text scale.</p>
  </section>
</section>