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>