HTML organized list ol letters or Roman variations while using WordPress

I use WordPress to build my web pages. Unfortunately I found out that the simple HTML way to alter the numbered list to letters or roman numerals shown below doesn’t work while using WordPress.

Without WordPress, you usually use the following…

• <ol type”A”> for uppercase letters
• <ol type”a”> for lowercase letters
• <ol type”I”> for Roman numerals (uppercase)
• <ol type”i”> for lowercase Roman numerals.

After searching google, I found out that using the CSS coding shown on this page, does work while using wordpress.

By default the organized list <ol> tag creates a list like this….

1. First item.
2. Second item.
3. Third item.
4. Fourth item.
5. Fifth item.
6. Sixth item.

HTML code used to produce the list above…

<ol>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>

Upper case alphabet ordered list:

1. First item.
2. Second item.
3. Third item.
4. Fourth item.
5. Fifth item.
6. Sixth item.

Above was created with the additional CSS…

<ol style=”list-style: upper-alpha;”>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>

Lower case alphabet.

1. First item.
2. Second item.
3. Third item.
4. Fourth item.
5. Fifth item.
6. Sixth item.

Above was created with additional CSS…

<ol style=”list-style: lower-alpha;”>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>

Roman numerals (upper case)

1. 1. First item.
   2. Second item.
   3. Third item.
   4. Fourth item.
   5. Fifth item.
   6. Sixth item.

Above was created with the additional CSS…

<ol>
<li style=”list-style-type: none;”>
<ol style=”list-style: upper-roman;”>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>
</li>
</ol>

Lower case Roman numerals

1. 1. First item.
   2. Second item.
   3. Third item.
   4. Fourth item.
   5. Fifth item.
   6. Sixth item.

Above was created with the additional CSS…

<ol>
<li style=”list-style-type: none;”>
<ol style=”list-style: lower-roman;”>
<li>First item.</li>
<li>Second item.</li>
<li>Third item.</li>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>
</li>
</ol>

Start with a different number

4. Fourth item.
5. Fifth item.
6. Sixth item.

Above created with

<ol start=”4″>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>

Start at 4 in Roman numerals (uppercase)

4. Fourth item.
5. Fifth item.
6. Sixth item.

Above created with

<ol style=”list-style: upper-roman;” start=”4″>
<li>Fourth item.</li>
<li>Fifth item.</li>
<li>Sixth item.</li>
</ol>

Reversed order numbers

1. Third place item.
2. Second place item.
3. 1st place winner item.

Above created with

<ol reversed=””>
<li>Third place item.</li>
<li>Second place item.</li>
<li>1st place winner item.</li>
</ol>

Reversed Roman numeral

1. Third place item.
2. Second place item.
3. 1st place winner item.

Above created with

<ol style=”list-style: upper-roman;” reversed=””>
<li>Third place item.</li>
<li>Second place item.</li>
<li>1st place winner item.</li>
</ol>

 To support this site, check out the following links:

• Check out my YouTube videos! https://www.youtube.com/c/Electronzap/videos
• Products I used in my videos or otherwise think look like a good buy. As an Amazon associate, I earn from qualifying purchases. My Amazon affiliate page showing products I think look good

Home page

• Information on this site is not guaranteed to be accurate. Always consult the manufacturer info/datasheet of parts you use. Research the proper safety precautions for everything you do.
• Electronzap is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to amazon.com.