Styling Ordered List - CSS

/ CSS / / 0 Comments

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 -

<ol class="count">