Snappy article titles get read. One of the most popular attention grabbers used by bloggers is the “ten biggest reasons…” type of post which often achieve not only a high number of clicks but a large amount of discussion and sharing on social networks which is crucial for site marketing. It’s a shame many authors are let down by the very vanilla options available as standard when it comes to styling numbered lists and these posts often fail to stand out as a result. Here are some ideas to help you make your post more appealing.

How To Target Your Styling In Ordered Lists

We’ll start out by discussing some of the simple customisations you can make to a list then add some colours and backgrounds to get you started. The basic structure of an ordered list is shown below:

<ol>

<li>The First Point</li>
<li>The Second Amazing Point</li>
…
…

</ol>

It’s difficult for us to achieve all the desired customisations if we work with a list in that format
due to the default assumptions most browsers make. Luckily by adding paragraph tags to our
list items we can then style the text and numbers separately by styling the ordered list element
to change the appearance of the numbers and style the paragraph elements to control the
appearance of the text. So instead we would use the structure below for our list and this gives
much greater power to us to use CSS to control its appearance.

<ol>

<li><p>The First Point</p></li>
<li><p>The Second Amazing Point</p></li>
…
…

</ol>

There is one further complication to be aware of when it comes to targeting your styling for the list. The numbers are usually positioned by browsers outside of the actual ordered list element. So, if you added a background image to the ordered list then by default you might need to move the numbers by styling the list item margin and padding as well. Now we’ve covered the basic
rules let’s move onto some examples of styling that list above.

List Style Types

The simplest change you can make to your ordered list is to simply change the type of numbers used to display your list. From the classic 1, 2, 3 to Roman Numerals you have a range of choices illustrated below:-

ol { list-style-type: upper-roman; }
I. The First Point

II. The Second Amazing Point

III. …

The other available options are:-

upper-alpha: A, B, C
lower-alpha: a, b, c
upper-roman: I, II, III
lower-roman: i, ii, iii
decimal (the default option): 1, 2, 3
none:

Styling The Numbers And Paragraphs Separately

The list numbers will typically display in the same format as body text by default. You can change this simply by styling the ordered list element as discussed. This would also change the format of our text if we had not included paragraph tags to style separately.

ol {

list-style-type: upper-roman;
color: blue;

}

ol p {
color: black;
}

I. The First Point
II. The Second Amazing Point
III. …

As you can imagine this power to style the two elements separately allows you to do more than just change the colours! You can also change font sizes, style, positioning and backgrounds to create some pretty eye catching results for your article. What’s even better is that these techniques are fairly cross browser compatible so you won’t run into many issues there.

Backgrounds And Other Effects

Adding the paragraph tags does alter the appearance of your list slightly by moving the lines further apart. That is easily fixed by resetting the margin and padding on the ordered list paragraph as shown below. In addition to that we have added a background of a light blue shade to the numbers and a white background to the text so we have a nice emphasis on the numbers. As we discussed earlier we can simply pad the list item to move the text to the right slightly leaving a gap between the background and the start of our text.

ol {

list-style-type: upper-roman;
color: blue;
background: #66CCFF;

}

ol p {
color: black;
margin: 0px;
padding: 0px;
}

ol li {
background: white;
padding-left: 10px;
}

Hopefully some of these basic tips have whetted your appetite for more experimentation with numbered lists. They really are a versatile tool and with an attention grabbing list you can double the effectiveness of your attention grabbing headline!