Styling Ordered List - CSS

In this tutorial we are going to see, how can we style the Ordered list in CSS using the simple CSS selectors.

Customize it and Download :

#page-wrap {

width: 600px;

}

.count {

counter-reset: c4learn-counter;

}

.count ol {

position: relative;

font: bold 16px Georgia;

padding: 4px 0 10px 0;

}

.count ol: before {

content: counter(c4learn-counter);

counter-increment: c4learn-counter;

position: absolute;

left: 0;

top: 0;

font: bold 30px/1 Sans-Serif;

}

.count li {

margin: 0 0 20px 0;

line-height: 1.4em;

}

.count ol,

.count li {

padding-left: 20px;

}

Edit Yourself »

For learning HTML online : click here

Explanation : Styling Ordered List

In the above code, counter-reset property will allow you automatic numbering of the elements. Counter increment property will automatically increment the value of counter.

.count ol: before {

content: counter(c4learn-counter);

counter-increment: c4learn-counter;

}

Just copy the style shown above and include in your CSS file. You just need to include the <ol> element like this -

1	<ol class="count">