Styling HTML Ordered Lists with CSS

Nicely styled OL on KeepAndCastle.Com
Nicely styled OL on KeepAndCastle.Com

As with the previous post, it’s the simple, small things that build your site’s “feel.” As with the HR in the previous post, ordered lists often end up being quite boring despite the range of numbering options. However, again, CSS3 offers us the ability to style these lists in a wide range of ways giving us full control over the lists’ feel.

Here I found Red Team Design‘s article “CSS3 Ordered List Styles” excellent and helpful. While I didn’t use any of the animations they built (they seemed a bit over the top to me, except for the small movement on the rectangle-shaped elements) I did find these examples a great starting point for creating my own styles.

The only issue I ran into that I have yet been able to solve is restarting the numbering on a multi-page list since their examples used CSS3’s counter-reset and counter-increment properties which I don’t fully understand yet.

Styling Horizontal Rules (HRs) in HTML

Beautiful CSS-Styled HTML HR with Code
Beautiful CSS-Styled HTML HR with Code

While the large things (colors, images, content, etc.) contribute to the “look” of your site, it’s the small things that make your site “feel” the way you want. When you’re looking at enhancing the “feel” of your site it’s often good to default styles applied by the users’ browser as much as possible. One place this can be done is with the HR element. Most websites use the horizontal rule in one way another as a way to easily divide content on the site. However, while it’s easy to change the color by setting the CSS “border-color” property, this leaves the same square, blocky look as the default HR. However, with widespread adoption of modern CSS properties, we can now use the “background-image” property to effectively modify the appearance of HRs, while allowing for excellent backwards-compatibility. To that end, I’ve discovered the “Simple Styles for <hr>’s” document at css-tricks.com to be very handy. These styles are beautiful, simple, and useful.