1
00:00:01.00 --> 00:00:02.05
- [Instructor] Hi this is Chris Converse,

2
00:00:02.05 --> 00:00:04.07
and in this episode we'll style and label

3
00:00:04.07 --> 00:00:06.03
rows of links on a webpage

4
00:00:06.03 --> 00:00:09.01
without resorting to tables
or floating elements.

5
00:00:09.01 --> 00:00:11.00
Now this is something
that we do pretty often,

6
00:00:11.00 --> 00:00:13.06
especially for content
with multiple references

7
00:00:13.06 --> 00:00:16.08
or blogs and stories with
tags and category assignments,

8
00:00:16.08 --> 00:00:18.09
and it keeps our HTML really clean.

9
00:00:18.09 --> 00:00:20.07
If you'd like to follow along with me,

10
00:00:20.07 --> 00:00:22.07
download the exercise
files, and let's begin

11
00:00:22.07 --> 00:00:29.01
by opening index.html in a text editor.

12
00:00:29.01 --> 00:00:31.08
Inside the HTML file
if we scroll down here,

13
00:00:31.08 --> 00:00:35.04
I have the main story
in an article element,

14
00:00:35.04 --> 00:00:36.09
and after the content of the story,

15
00:00:36.09 --> 00:00:39.00
I have a navigation element here.

16
00:00:39.00 --> 00:00:41.03
And inside the navigation
element, I've broken my links

17
00:00:41.03 --> 00:00:42.04
into two groups.

18
00:00:42.04 --> 00:00:44.06
The first group here
inside of the first div

19
00:00:44.06 --> 00:00:46.02
and then the second group.

20
00:00:46.02 --> 00:00:47.09
So the HTML here is really clean.

21
00:00:47.09 --> 00:00:50.04
I don't have a lot of
classes, and I am simply using

22
00:00:50.04 --> 00:00:53.05
HTML elements to structure the content.

23
00:00:53.05 --> 00:00:55.07
If you'd like to preview the
design we're working with,

24
00:00:55.07 --> 00:00:59.00
you can open the index.html
file up in a browser.

25
00:00:59.00 --> 00:01:01.01
Now to begin styling those
links, we're going to go back

26
00:01:01.01 --> 00:01:04.00
to the exercise files, and
let's open up style.css

27
00:01:04.00 --> 00:01:06.09
in our text editor.

28
00:01:06.09 --> 00:01:11.00
Then once inside the CSS
file, let's scroll down.

29
00:01:11.00 --> 00:01:13.08
I have a media query down here
which we'll be making use of

30
00:01:13.08 --> 00:01:17.00
in a little bit, so after article nav,

31
00:01:17.00 --> 00:01:19.07
let's come in here, and
let's target the div elements

32
00:01:19.07 --> 00:01:22.06
that we have inside of the nav element.

33
00:01:22.06 --> 00:01:28.05
We'll start with article nav div.

34
00:01:28.05 --> 00:01:30.09
Let's add in some brackets,
and what we're going to do here

35
00:01:30.09 --> 00:01:33.08
is simply space out these two divs,

36
00:01:33.08 --> 00:01:35.08
so we'll use the margin property here,

37
00:01:35.08 --> 00:01:39.07
so margin: top property
we're going to set to zero.

38
00:01:39.07 --> 00:01:42.06
Zero on the right, 15 pixels on the bottom

39
00:01:42.06 --> 00:01:46.05
and zero pixels on the left.

40
00:01:46.05 --> 00:01:48.05
Preview this in a browser, we
can now see we have a space

41
00:01:48.05 --> 00:01:51.04
between those two div elements.

42
00:01:51.04 --> 00:01:54.01
Back to our CSS, let's hit a few returns.

43
00:01:54.01 --> 00:01:55.08
Now we're going to
create a pseudo-element,

44
00:01:55.08 --> 00:02:00.03
so we can add a label
into each one of the divs,

45
00:02:00.03 --> 00:02:04.09
so I'll type article nav div.

46
00:02:04.09 --> 00:02:07.05
Then, we'll use two colons.

47
00:02:07.05 --> 00:02:09.07
Then, we'll type in the word before,

48
00:02:09.07 --> 00:02:12.00
and then put in our brackets.

49
00:02:12.00 --> 00:02:13.05
So with pseudo-element gives us a way

50
00:02:13.05 --> 00:02:16.07
that we can basically add
a phantom HTML element

51
00:02:16.07 --> 00:02:18.04
into the div elements.

52
00:02:18.04 --> 00:02:21.01
It's almost as if we had
added the code to the HTML,

53
00:02:21.01 --> 00:02:24.06
but it's being added through CSS.

54
00:02:24.06 --> 00:02:25.06
Inside of our pseudo-element,

55
00:02:25.06 --> 00:02:27.09
let's first define the content.

56
00:02:27.09 --> 00:02:32.00
So content: space, two
tick marks for a string

57
00:02:32.00 --> 00:02:33.03
then a semicolon.

58
00:02:33.03 --> 00:02:37.04
Inside we'll just simply
put the word test for now.

59
00:02:37.04 --> 00:02:40.03
Then, on the next line
let's set the font size,

60
00:02:40.03 --> 00:02:45.02
so I'll set font size to .9 ems.

61
00:02:45.02 --> 00:02:48.02
Then, on the next line
we'll set font style,

62
00:02:48.02 --> 00:02:51.09
and we'll set this to italic.

63
00:02:51.09 --> 00:02:54.07
To see what we have so
far save your CSS, go back

64
00:02:54.07 --> 00:02:56.08
to the browser and hit
reload, and now you see

65
00:02:56.08 --> 00:02:58.09
that we have the word test before each

66
00:02:58.09 --> 00:03:00.08
of the individual divs.

67
00:03:00.08 --> 00:03:03.03
Now that that's working,
let's go back to our CSS,

68
00:03:03.03 --> 00:03:08.09
and let's add the proper
labels into each of the divs.

69
00:03:08.09 --> 00:03:13.02
Create a new selector article nav div,

70
00:03:13.02 --> 00:03:16.02
and then we'll pick out the
first div element in this nav,

71
00:03:16.02 --> 00:03:19.01
so we'll use the nth-child feature,

72
00:03:19.01 --> 00:03:26.08
so :nth, which is N-T-H, -child.

73
00:03:26.08 --> 00:03:28.05
Then, beginning and ending parenthesis,

74
00:03:28.05 --> 00:03:31.01
and then inside of the parenthesis
we'll put a number one,

75
00:03:31.01 --> 00:03:33.09
and then outside of the
parenthesis, we'll put in two colons

76
00:03:33.09 --> 00:03:37.03
to target the pseudo-class
in that first div.

77
00:03:37.03 --> 00:03:42.00
Type in the word before then
a space, put in our brackets.

78
00:03:42.00 --> 00:03:44.03
I'll split this open, and
now we're going to redefine

79
00:03:44.03 --> 00:03:48.04
the content for the
pseudo-element in the first div.

80
00:03:48.04 --> 00:03:52.06
We'll type content: space,
two tick marks for a string,

81
00:03:52.06 --> 00:03:57.03
semicolon, and then we'll set
that first label to history.

82
00:03:57.03 --> 00:03:58.07
Then if we look in the browser, we'll see

83
00:03:58.07 --> 00:04:02.00
that the first pseudo-class
which had a content of test is

84
00:04:02.00 --> 00:04:04.02
now being reset to history.

85
00:04:04.02 --> 00:04:06.07
Back in our CSS, let's
come in here and copy

86
00:04:06.07 --> 00:04:08.06
this entire rule.

87
00:04:08.06 --> 00:04:11.05
Let's hit a few returns, let's paste it.

88
00:04:11.05 --> 00:04:13.06
Then, we'll come in here
and change nth-child(1)

89
00:04:13.06 --> 00:04:17.05
to nth-child(2), and
let's change the content

90
00:04:17.05 --> 00:04:23.02
from history to practices.

91
00:04:23.02 --> 00:04:25.02
Once that's done you can save your work.

92
00:04:25.02 --> 00:04:28.02
Now in the browser we can
see history and practices,

93
00:04:28.02 --> 00:04:29.07
and since we're overriding the content

94
00:04:29.07 --> 00:04:31.05
in both of these divs, let's come back

95
00:04:31.05 --> 00:04:34.02
to the original pseudo-class,
and let's come in here

96
00:04:34.02 --> 00:04:36.03
and just remove content all together.

97
00:04:36.03 --> 00:04:38.09
So we'll let the first
pseudo-class define the properties,

98
00:04:38.09 --> 00:04:43.04
and we'll set the content
in the nth-child selectors.

99
00:04:43.04 --> 00:04:45.05
Now with our labels in
place, let's make some room

100
00:04:45.05 --> 00:04:47.05
in the layout for these labels.

101
00:04:47.05 --> 00:04:51.04
Let's go back to our article
nav div where we set the margin

102
00:04:51.04 --> 00:04:54.03
to zero zero, 15 and
zero, and let's change

103
00:04:54.03 --> 00:04:57.09
that left property to 100
pixels, save our work.

104
00:04:57.09 --> 00:05:00.09
Back in the browser, we'll
now have 100 pixels of margin

105
00:05:00.09 --> 00:05:03.02
on the left-hand side
of each of those divs,

106
00:05:03.02 --> 00:05:06.06
and this will give us room
to position those labels.

107
00:05:06.06 --> 00:05:08.04
Then back in our CSS, we'll also want

108
00:05:08.04 --> 00:05:10.09
to set a position relative
here because we are going

109
00:05:10.09 --> 00:05:12.03
to be positioning the pseudo-elements,

110
00:05:12.03 --> 00:05:13.08
and we want to make
sure that they position

111
00:05:13.08 --> 00:05:19.05
in relation to their parent div.

112
00:05:19.05 --> 00:05:22.05
Now let's work on sizing and
positioning those labels.

113
00:05:22.05 --> 00:05:24.00
I'll scroll down here a bit.

114
00:05:24.00 --> 00:05:27.07
Let's go back into our article nav div

115
00:05:27.07 --> 00:05:29.08
targeting the pseudo-element.

116
00:05:29.08 --> 00:05:33.08
After font style italic, let's
add another property here.

117
00:05:33.08 --> 00:05:36.00
First, we're going to
set the display type.

118
00:05:36.00 --> 00:05:38.02
We're going to set this to inline-block

119
00:05:38.02 --> 00:05:41.05
that way we can give some
dimensions to our labels.

120
00:05:41.05 --> 00:05:42.05
On the next line,

121
00:05:42.05 --> 00:05:45.02
let's come in here and
set a position property.

122
00:05:45.02 --> 00:05:48.08
We're going to set this to absolute.

123
00:05:48.08 --> 00:05:51.06
Next line we're going
to set a top property.

124
00:05:51.06 --> 00:05:55.00
We'll set this to about two pixels.

125
00:05:55.00 --> 00:05:57.05
Then on the next line,
let's set a left property,

126
00:05:57.05 --> 00:05:58.08
and we're going to set the left property

127
00:05:58.08 --> 00:06:00.06
to negative 100 pixels.

128
00:06:00.06 --> 00:06:03.07
That way this element here
will be positioned to the left

129
00:06:03.07 --> 00:06:06.02
to make up for the 100 pixels
we put on the left margin

130
00:06:06.02 --> 00:06:07.08
for the parent div.

131
00:06:07.08 --> 00:06:11.08
Then, one final property down
here after the left property.

132
00:06:11.08 --> 00:06:13.05
Let's come in here and set a width,

133
00:06:13.05 --> 00:06:16.03
and we'll set a width to 100 pixels.

134
00:06:16.03 --> 00:06:18.02
Now we don't have to set a width here.

135
00:06:18.02 --> 00:06:20.07
However if your labels are
going to have multiple words

136
00:06:20.07 --> 00:06:23.01
and need to wrap, setting
a width property here

137
00:06:23.01 --> 00:06:27.07
will make sure that the labels
don't overlap with the links.

138
00:06:27.07 --> 00:06:29.05
So with these CSS rules in place,

139
00:06:29.05 --> 00:06:30.07
let's go back to the browser.

140
00:06:30.07 --> 00:06:33.06
Let's hit reload, and now
if I resize the browser,

141
00:06:33.06 --> 00:06:36.07
notice that the links will
wrap underneath each other.

142
00:06:36.07 --> 00:06:39.00
The labels will stay
fixed over to the left,

143
00:06:39.00 --> 00:06:40.05
and we get this nice column effect

144
00:06:40.05 --> 00:06:44.04
by simply using positioning
and margin properties.

145
00:06:44.04 --> 00:06:47.03
Now if I bring the browser
down to under 500 pixels wide,

146
00:06:47.03 --> 00:06:49.09
this layout starts to
get a little bit crowded,

147
00:06:49.09 --> 00:06:51.08
so let's go back to our CSS.

148
00:06:51.08 --> 00:06:53.08
I did add a media query in here.

149
00:06:53.08 --> 00:06:56.07
What we're going to do is
redefine some of these properties,

150
00:06:56.07 --> 00:06:58.05
so that on small screens
we can have the label

151
00:06:58.05 --> 00:07:01.00
above the links, so to do that

152
00:07:01.00 --> 00:07:07.04
we're going to start with article nav div,

153
00:07:07.04 --> 00:07:10.01
put in our brackets,
and we're going to come

154
00:07:10.01 --> 00:07:12.04
in here and redefine the
margin left property.

155
00:07:12.04 --> 00:07:17.04
We're going to set this to
zero, and then on the next line,

156
00:07:17.04 --> 00:07:20.00
we're going to target the
pseudo-elements in both divs.

157
00:07:20.00 --> 00:07:25.06
So we'll type article nav div::,

158
00:07:25.06 --> 00:07:28.07
type in the word before.

159
00:07:28.07 --> 00:07:31.01
Let's come in here and add our brackets.

160
00:07:31.01 --> 00:07:32.09
Inside of the brackets,
the first thing we'll do

161
00:07:32.09 --> 00:07:35.09
is reset the position property,
so we're going to set position

162
00:07:35.09 --> 00:07:39.02
to static, and then on the next line,

163
00:07:39.02 --> 00:07:43.09
we're going to set the
display type to block.

164
00:07:43.09 --> 00:07:46.04
So position: static will remove
the positioning properties

165
00:07:46.04 --> 00:07:48.06
from the labels and
make the browser ignore

166
00:07:48.06 --> 00:07:51.06
the top and left properties,
and then display: block

167
00:07:51.06 --> 00:07:54.02
will put each of these
items on its own line.

168
00:07:54.02 --> 00:07:56.03
Then with these in place
save your work, go back

169
00:07:56.03 --> 00:07:59.00
to the browser, hit reload
and then when the browser's

170
00:07:59.00 --> 00:08:03.01
under 500 pixels wide, we'll
see this alternate layout.

171
00:08:03.01 --> 00:08:05.00
With these CSS properties, we were able

172
00:08:05.00 --> 00:08:08.02
to create a nice visual layout
for our links, with labels,

173
00:08:08.02 --> 00:08:11.05
without adding any code to our HTML page.

174
00:08:11.05 --> 00:08:13.09
If you'd like to see more
techniques using pseudo-elements

175
00:08:13.09 --> 00:08:17.07
in CSS, check out either
creating a pull quote with CSS

176
00:08:17.07 --> 00:08:20.02
or graphics and CSS pseudo-elements.

177
00:08:20.02 --> 00:08:22.04
Both are available here in the library.

178
00:08:22.04 --> 00:08:24.06
And so with that I'll
conclude this episode,

179
00:08:24.06 --> 00:08:27.04
and as always thanks for watching.