Headings
Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Heading 6
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
Paragraphs
Regular text
<p>Regular text</p>
Lists
Not all classes work in every browser, see MDN for a comprehensive list.
There is also support for list styles on elements other than <ul>
or <ol>
, though not for all styles. To use them prefix the class-name with list-style-
, the symbols will appear on direct child elements only.
No list style
plain
or none
means no padding, no margin, no bullets
<ul class="plain">
<li>No padding, no margin, no bullets</li>
</ul>
// or
<ul class="none">
<li>No padding, no margin, no bullets</li>
</ul>
● disc
no class at all on <ul>
<ul>
<li>No class at all</li>
</ul>
// or
<ol class="disc">
<li>Disc</li>
</ol>
// on other elements
<div class="list-style-disc">
<div>Element with list style</div>
</div>
○ circle
<ul class="circle">
<li>Circle</li>
</ul>
// on other elements
<div class="list-style-circle">
<div>Element with list style</div>
</div>
■ square
<ul class="square">
<li>Square</li>
</ul>
// on other elements
<div class="list-style-square">
<div>Element with list style</div>
</div>
1. decimal
no class at all on <ol>
<ol>
<li>No class at all</li>
</ol>
<ul class="decimal">
<li>Decimal</li>
</ul>
// on other elements
<div class="list-style-decimal">
<div>Element with list style</div>
</div>
01. decimal-leading-zero
<ol class="decimal-leading-zero">
<li>Decimal Leading Zero</li>
</ol>
// on other elements
<div class="list-style-decimal-leading-zero">
<div>Element with list style</div>
</div>
a. lower-alpha or lower-latin
<ol class="lower-alpha">
<li>Lower Alpha</li>
</ol>
// or
<ol class="lower-latin">
<li>Lower Latin</li>
</ol>
// on other elements
<div class="list-style-lower-alpha">
<div>Element with list style</div>
</div>
// or
<div class="list-style-lower-latin">
<div>Element with list style</div>
</div>
A. upper-alpha or upper-latin
<ol class="upper-alpha">
<li>Upper Alpha</li>
</ol>
// or
<ol class="upper-latin">
<li>Upper Alpha</li>
</ol>
// on other elements
<div class="list-style-upper-alpha">
<div>Element with list style</div>
</div>
// or
<div class="list-style-upper-latin">
<div>Element with list style</div>
</div>
i. lower-roman
<ol class="lower-roman">
<li>Lower Roman</li>
</ol>
// on other elements
<div class="list-style-lower-roman">
<div>Element with list style</div>
</div>
I. upper-roman
<ol class="upper-roman">
<li>Upper Roman</li>
</ol>
// on other elements
<div class="list-style-upper-roman">
<div>Element with list style</div>
</div>
α. lower-greek
<ol class="lower-greek">
<li>Lower Greek</li>
</ol>
// on other elements
<div class="list-style-lower-greek">
<div>Element with list style</div>
</div>
ա. armenian
<ol class="armenian">
<li>Armenian</li>
</ol>
// on other elements
<div class="list-style-armenian">
<div>Element with list style</div>
</div>
ა. georgian
<ol class="georgian">
<li>Georgian</li>
</ol>
// on other elements
<div class="list-style-georgian">
<div>Element with list style</div>
</div>
א. hebrew
<ul>
and <ol>
only
<ol class="hebrew">
<li>Hebrew</li>
</ol>
あ、hiragana
<ul>
and <ol>
only
<ol class="hiragana">
<li>Hiragana</li>
</ol>
い、`hiragana-iroha
<ul>
and <ol>
only
<ol class="hiragana-iroha">
<li>Hiragana Iroha</li>
</ol>
ア、 `katakana
<ul>
and <ol>
only
<ol class="katakana">
<li>Katakana</li>
</ol>
イ、`katakana-iroha
<ul>
and <ol>
only
<ol class="katakana-iroha">
<li>Katakana Iroha</li>
</ol>