- [Chris] Hi, this is Chris Converse,
and in this episode,
we'll replace the default numbers we get
in an html ordered list with large styled numbers,
which we'll generate with CSS.
So if you'd like to follow along,
download the exercise files
and you can begin by opening the html file
in your favorite text editor.
Now when you have the html file open,
up in the head area you'll see we have a link
to style that css.
We'll be opening this in a moment.
If you continue down
and look at the mark up inside of the body element,
we have a header and an article element,
and then inside of the article element,
we have an ordered list with a class of country
and then five individual list items.
And if you look at this in the browser,
you'll see the numbers showing up here.
One, two, three, four and five.
So to begin to restyle these numbers,
we're going to go back to the exercise files
and let's open up style.css in our text editor.
And now in the css file,
let's scroll down.
Let's find the rule that targets ol.country.
So this is the ordered list with the country class.
The first thing we'll do inside of here
is add a property to remove the numbers.
So after padding,
let's come in here and let's set a property
called list-style-type,
and we'll set this to none.
Save your css,
you'll now see the numbers go away in the browser.
Let's continue to scroll down.
Let's find the ol.country space list item.
Let's come in here after padding.
Let's hit a return.
Let's add a property called counter-increment,
then a colon space,
and let's give this counter-increment a name.
So I'll name this myCounter and then a semi-colon.
We also want to have room for our large numbers,
so in the padding property in the same rule,
let's come in here and change the padding left property
from zero to 70 pixels.
And so now with these properties in place,
if we save our css and go back to the browser,
we'll now see that all of the elements
will move an additional 70 pixels over toward the right,
since we added these 70 pixels to the left.
This gives us room for the large numbers.
And now to add in the numbers,
we're going to use a pseudo element.
So we'll start by typing ol.country,
then a space,
then we'll target the list items.
Then 2 colons,
then the word before.
This will put the pseudo elements as the first item
inside of the list elements.
Then we'll add in our brackets.
We'll split this open,
and the first thing we'll do is add a content property.
So content:space.
We're going to define a counter.
So I'll type counter,
beginning and ending parenthesis,
then a semi-colon,
then inside of the parentheses,
we're going to target the myCounter name we created up here.
So let's come in here and copy that.
Then come down here inside of the parentheses for counter,
then we'll paste that.
Now at this point you can hit Save,
and if we look over in the browser,
we'll now see our numbers showing up here.
So they're showing up as an element
before everything else in each list item.
Now I do want to add a leading zero,
so I want one to be zero one and then zero two.
So to do that, inside of the parentheses after myCounter,
let's hit a comma, then a space,
then we're going to type decimal-leading-zero.
Hit save again and now we'll see a zero showing up
before each numbered item.
So with that in place,
let's go back to the css.
Let's begin to add some more properties for styling.
Let's add a display type.
We're going to set this to inline block.
Next line, we're going to set padding.
We're going to set this zero pixels.
Next let's set a font size.
We're going to set the font size to 5.3 em.
You can hit save at any point to see our progress,
so this is what we're seeing so far.
After font size let's come in here
and set the text align.
We're going to set this to right.
Next property, we're going to set the color.
We're going to set this to the dark blue,
so that's a pound sign.
Two zeros per red,
three three for green,
and six six for blue.
Next property we're going to set the font family.
We're going to set this to Roboto Slab.
So inside of this string we'll type Roboto Slab.
Then outside of the string,
hit a comma,
type in serif, then a semi-colon.
And then finally we'll need three additional properties
for positioning.
The first one being position,
we'll set this to absolute.
Then we'll set a top property to five pixels,
and the a left property to negative 30 pixels.
So with those in place,
hit save, go back to the browser,
and you'll now see your large numbers
positioned over to the left hand side of each list item.
And now if you'd like to see a few more techniques
for styling lists,
check out this other course
entitled Styling Numbered Lists,
which is also available here in the library.
And so with that,
I'll conclude this episode.
And as always,
thanks for watching.