1
00:00:01.02 --> 00:00:02.04
- [Chris] Hi, this is Chris Converse,

2
00:00:02.04 --> 00:00:03.03
and in this episode,

3
00:00:03.03 --> 00:00:05.02
we'll replace the default numbers we get

4
00:00:05.02 --> 00:00:08.03
in an html ordered list
with large styled numbers,

5
00:00:08.03 --> 00:00:10.00
which we'll generate with CSS.

6
00:00:10.00 --> 00:00:11.03
So if you'd like to follow along,

7
00:00:11.03 --> 00:00:12.08
download the exercise files

8
00:00:12.08 --> 00:00:15.00
and you can begin by opening the html file

9
00:00:15.00 --> 00:00:16.07
in your favorite text editor.

10
00:00:16.07 --> 00:00:18.02
Now when you have the html file open,

11
00:00:18.02 --> 00:00:20.00
up in the head area
you'll see we have a link

12
00:00:20.00 --> 00:00:21.03
to style that css.

13
00:00:21.03 --> 00:00:23.03
We'll be opening this in a moment.

14
00:00:23.03 --> 00:00:24.02
If you continue down

15
00:00:24.02 --> 00:00:26.00
and look at the mark up
inside of the body element,

16
00:00:26.00 --> 00:00:28.05
we have a header and an article element,

17
00:00:28.05 --> 00:00:29.09
and then inside of the article element,

18
00:00:29.09 --> 00:00:32.09
we have an ordered list
with a class of country

19
00:00:32.09 --> 00:00:36.04
and then five individual list items.

20
00:00:36.04 --> 00:00:37.05
And if you look at this in the browser,

21
00:00:37.05 --> 00:00:39.00
you'll see the numbers showing up here.

22
00:00:39.00 --> 00:00:40.09
One, two, three, four and five.

23
00:00:40.09 --> 00:00:42.09
So to begin to restyle these numbers,

24
00:00:42.09 --> 00:00:44.09
we're going to go back
to the exercise files

25
00:00:44.09 --> 00:00:48.01
and let's open up style.css
in our text editor.

26
00:00:48.01 --> 00:00:49.04
And now in the css file,

27
00:00:49.04 --> 00:00:50.08
let's scroll down.

28
00:00:50.08 --> 00:00:54.05
Let's find the rule
that targets ol.country.

29
00:00:54.05 --> 00:00:57.05
So this is the ordered list
with the country class.

30
00:00:57.05 --> 00:00:58.07
The first thing we'll do inside of here

31
00:00:58.07 --> 00:01:01.06
is add a property to remove the numbers.

32
00:01:01.06 --> 00:01:03.02
So after padding,

33
00:01:03.02 --> 00:01:04.04
let's come in here and
let's set a property

34
00:01:04.04 --> 00:01:08.05
called list-style-type,

35
00:01:08.05 --> 00:01:10.05
and we'll set this to none.

36
00:01:10.05 --> 00:01:11.04
Save your css,

37
00:01:11.04 --> 00:01:13.09
you'll now see the numbers
go away in the browser.

38
00:01:13.09 --> 00:01:15.09
Let's continue to scroll down.

39
00:01:15.09 --> 00:01:19.09
Let's find the ol.country space list item.

40
00:01:19.09 --> 00:01:22.05
Let's come in here after padding.

41
00:01:22.05 --> 00:01:24.09
Let's hit a return.

42
00:01:24.09 --> 00:01:27.07
Let's add a property
called counter-increment,

43
00:01:27.07 --> 00:01:28.07
then a colon space,

44
00:01:28.07 --> 00:01:32.08
and let's give this
counter-increment a name.

45
00:01:32.08 --> 00:01:37.06
So I'll name this myCounter
and then a semi-colon.

46
00:01:37.06 --> 00:01:39.05
We also want to have room
for our large numbers,

47
00:01:39.05 --> 00:01:42.03
so in the padding
property in the same rule,

48
00:01:42.03 --> 00:01:44.07
let's come in here and change
the padding left property

49
00:01:44.07 --> 00:01:48.04
from zero to 70 pixels.

50
00:01:48.04 --> 00:01:50.00
And so now with these properties in place,

51
00:01:50.00 --> 00:01:52.01
if we save our css and
go back to the browser,

52
00:01:52.01 --> 00:01:53.04
we'll now see that all of the elements

53
00:01:53.04 --> 00:01:56.03
will move an additional 70
pixels over toward the right,

54
00:01:56.03 --> 00:01:58.07
since we added these
70 pixels to the left.

55
00:01:58.07 --> 00:02:01.05
This gives us room for the large numbers.

56
00:02:01.05 --> 00:02:02.05
And now to add in the numbers,

57
00:02:02.05 --> 00:02:04.08
we're going to use a pseudo element.

58
00:02:04.08 --> 00:02:07.02
So we'll start by typing ol.country,

59
00:02:07.02 --> 00:02:08.07
then a space,

60
00:02:08.07 --> 00:02:10.08
then we'll target the list items.

61
00:02:10.08 --> 00:02:12.07
Then 2 colons,

62
00:02:12.07 --> 00:02:14.02
then the word before.

63
00:02:14.02 --> 00:02:16.02
This will put the pseudo
elements as the first item

64
00:02:16.02 --> 00:02:18.02
inside of the list elements.

65
00:02:18.02 --> 00:02:19.05
Then we'll add in our brackets.

66
00:02:19.05 --> 00:02:21.08
We'll split this open,

67
00:02:21.08 --> 00:02:24.04
and the first thing we'll do
is add a content property.

68
00:02:24.04 --> 00:02:26.02
So content:space.

69
00:02:26.02 --> 00:02:28.06
We're going to define a counter.

70
00:02:28.06 --> 00:02:29.09
So I'll type counter,

71
00:02:29.09 --> 00:02:31.03
beginning and ending parenthesis,

72
00:02:31.03 --> 00:02:32.07
then a semi-colon,

73
00:02:32.07 --> 00:02:34.02
then inside of the parentheses,

74
00:02:34.02 --> 00:02:37.09
we're going to target the
myCounter name we created up here.

75
00:02:37.09 --> 00:02:40.00
So let's come in here and copy that.

76
00:02:40.00 --> 00:02:42.05
Then come down here inside of
the parentheses for counter,

77
00:02:42.05 --> 00:02:43.09
then we'll paste that.

78
00:02:43.09 --> 00:02:45.05
Now at this point you can hit Save,

79
00:02:45.05 --> 00:02:46.05
and if we look over in the browser,

80
00:02:46.05 --> 00:02:48.05
we'll now see our numbers showing up here.

81
00:02:48.05 --> 00:02:49.09
So they're showing up as an element

82
00:02:49.09 --> 00:02:53.03
before everything else in each list item.

83
00:02:53.03 --> 00:02:55.01
Now I do want to add a leading zero,

84
00:02:55.01 --> 00:02:58.07
so I want one to be zero
one and then zero two.

85
00:02:58.07 --> 00:03:01.06
So to do that, inside of the
parentheses after myCounter,

86
00:03:01.06 --> 00:03:04.05
let's hit a comma, then a space,

87
00:03:04.05 --> 00:03:08.08
then we're going to type
decimal-leading-zero.

88
00:03:08.08 --> 00:03:11.03
Hit save again and now
we'll see a zero showing up

89
00:03:11.03 --> 00:03:14.07
before each numbered item.

90
00:03:14.07 --> 00:03:15.05
So with that in place,

91
00:03:15.05 --> 00:03:16.08
let's go back to the css.

92
00:03:16.08 --> 00:03:20.02
Let's begin to add some
more properties for styling.

93
00:03:20.02 --> 00:03:22.07
Let's add a display type.

94
00:03:22.07 --> 00:03:26.04
We're going to set this to inline block.

95
00:03:26.04 --> 00:03:28.08
Next line, we're going to set padding.

96
00:03:28.08 --> 00:03:31.09
We're going to set this zero pixels.

97
00:03:31.09 --> 00:03:34.06
Next let's set a font size.

98
00:03:34.06 --> 00:03:38.04
We're going to set the
font size to 5.3 em.

99
00:03:38.04 --> 00:03:40.05
You can hit save at any
point to see our progress,

100
00:03:40.05 --> 00:03:43.04
so this is what we're seeing so far.

101
00:03:43.04 --> 00:03:45.01
After font size let's come in here

102
00:03:45.01 --> 00:03:47.06
and set the text align.

103
00:03:47.06 --> 00:03:50.09
We're going to set this to right.

104
00:03:50.09 --> 00:03:53.01
Next property, we're
going to set the color.

105
00:03:53.01 --> 00:03:55.05
We're going to set this to the dark blue,

106
00:03:55.05 --> 00:03:56.09
so that's a pound sign.

107
00:03:56.09 --> 00:03:58.04
Two zeros per red,

108
00:03:58.04 --> 00:04:00.01
three three for green,

109
00:04:00.01 --> 00:04:03.01
and six six for blue.

110
00:04:03.01 --> 00:04:07.02
Next property we're going
to set the font family.

111
00:04:07.02 --> 00:04:09.09
We're going to set this to Roboto Slab.

112
00:04:09.09 --> 00:04:14.06
So inside of this string
we'll type Roboto Slab.

113
00:04:14.06 --> 00:04:15.06
Then outside of the string,

114
00:04:15.06 --> 00:04:17.00
hit a comma,

115
00:04:17.00 --> 00:04:20.01
type in serif, then a semi-colon.

116
00:04:20.01 --> 00:04:21.09
And then finally we'll need
three additional properties

117
00:04:21.09 --> 00:04:23.08
for positioning.

118
00:04:23.08 --> 00:04:25.01
The first one being position,

119
00:04:25.01 --> 00:04:27.08
we'll set this to absolute.

120
00:04:27.08 --> 00:04:31.08
Then we'll set a top
property to five pixels,

121
00:04:31.08 --> 00:04:36.03
and the a left property
to negative 30 pixels.

122
00:04:36.03 --> 00:04:37.01
So with those in place,

123
00:04:37.01 --> 00:04:38.08
hit save, go back to the browser,

124
00:04:38.08 --> 00:04:40.01
and you'll now see your large numbers

125
00:04:40.01 --> 00:04:43.04
positioned over to the left
hand side of each list item.

126
00:04:43.04 --> 00:04:45.00
And now if you'd like to
see a few more techniques

127
00:04:45.00 --> 00:04:46.03
for styling lists,

128
00:04:46.03 --> 00:04:47.02
check out this other course

129
00:04:47.02 --> 00:04:49.02
entitled Styling Numbered Lists,

130
00:04:49.02 --> 00:04:51.06
which is also available
here in the library.

131
00:04:51.06 --> 00:04:52.04
And so with that,

132
00:04:52.04 --> 00:04:53.09
I'll conclude this episode.

133
00:04:53.09 --> 00:04:54.07
And as always,

134
00:04:54.07 --> 00:04:56.05
thanks for watching.