1
00:00:01.01 --> 00:00:02.06
- [Instructor] Hi, this is Chris Converse,

2
00:00:02.06 --> 00:00:04.08
and in this episode,
we'll be helping our users

3
00:00:04.08 --> 00:00:07.02
determine which links
they've already visited

4
00:00:07.02 --> 00:00:10.09
by making use of the
visited pseudo-class in CSS.

5
00:00:10.09 --> 00:00:13.07
Now, using CSS, we can alter
some properties of the links

6
00:00:13.07 --> 00:00:15.02
that go to destinations

7
00:00:15.02 --> 00:00:17.05
that match the user's browsing history.

8
00:00:17.05 --> 00:00:19.00
But for privacy reasons,

9
00:00:19.00 --> 00:00:21.05
browsers will limit the
properties that we can apply

10
00:00:21.05 --> 00:00:23.03
using the visited pseudo-class.

11
00:00:23.03 --> 00:00:26.00
So we'll make the most of
what's available to us.

12
00:00:26.00 --> 00:00:27.05
Now if you'd like to follow along with me,

13
00:00:27.05 --> 00:00:29.04
you can download the exercise files,

14
00:00:29.04 --> 00:00:32.00
and we'll start by opening
the index.html file

15
00:00:32.00 --> 00:00:34.03
in a text editor.

16
00:00:34.03 --> 00:00:35.07
Now, with this html page open,

17
00:00:35.07 --> 00:00:37.04
we have a very simple layout here,

18
00:00:37.04 --> 00:00:39.09
and we're going to be focusing
on this unordered list,

19
00:00:39.09 --> 00:00:41.08
where I simply have the list of links

20
00:00:41.08 --> 00:00:45.02
to different courses that
we have here in the library.

21
00:00:45.02 --> 00:00:47.01
And if you'd like to preview
the way this page looks,

22
00:00:47.01 --> 00:00:50.01
you can open this index.html
file up in a browser,

23
00:00:50.01 --> 00:00:52.07
and you'll see a layout that
looks something like this.

24
00:00:52.07 --> 00:00:54.02
So, here's the list.

25
00:00:54.02 --> 00:00:56.06
So what we want to do
is indicate to our users

26
00:00:56.06 --> 00:01:00.01
whether or not they have
visited any one of these URLs.

27
00:01:00.01 --> 00:01:01.06
So right now, we have no CSS in place

28
00:01:01.06 --> 00:01:03.00
to target the visited links,

29
00:01:03.00 --> 00:01:05.07
so all of the links have
the same appearance.

30
00:01:05.07 --> 00:01:07.02
So to begin modifying this,

31
00:01:07.02 --> 00:01:08.09
let's go back to the exercise files,

32
00:01:08.09 --> 00:01:12.09
and let's open up style.css
up in our text editor.

33
00:01:12.09 --> 00:01:14.04
And here in the CSS
file, down at the bottom,

34
00:01:14.04 --> 00:01:16.02
we have our two anchor link selectors.

35
00:01:16.02 --> 00:01:17.08
We have our regular anchor link,

36
00:01:17.08 --> 00:01:22.01
and the anchor link with
the pseudo-class of hover.

37
00:01:22.01 --> 00:01:23.03
Now, there is a specific order

38
00:01:23.03 --> 00:01:26.01
that you should list all
of your pseudo-classes in.

39
00:01:26.01 --> 00:01:29.05
You should start with the
anchor tag, or a:link,

40
00:01:29.05 --> 00:01:33.00
and then next, you should
specify the visited pseudo-class,

41
00:01:33.00 --> 00:01:34.05
then the hover pseudo-class,

42
00:01:34.05 --> 00:01:37.02
and then finally, the active pseudo-class.

43
00:01:37.02 --> 00:01:39.09
So we already have our
anchor links specified,

44
00:01:39.09 --> 00:01:42.04
we already have a hover, and
in this particular episode,

45
00:01:42.04 --> 00:01:45.05
we're going to focus on the visited class.

46
00:01:45.05 --> 00:01:46.09
So back in our CSS class,

47
00:01:46.09 --> 00:01:49.02
we're going to specify
the visited pseudo-class

48
00:01:49.02 --> 00:01:50.08
before the hover,

49
00:01:50.08 --> 00:01:53.08
so let's come in here and add
a few returns before hover.

50
00:01:53.08 --> 00:01:59.06
So we'll type a:visited,
put in our brackets,

51
00:01:59.06 --> 00:02:01.00
hit a few spaces,

52
00:02:01.00 --> 00:02:02.00
and what I want to do first

53
00:02:02.00 --> 00:02:04.08
is specify a light gray text color.

54
00:02:04.08 --> 00:02:07.08
So we'll type in color,
colon, space, pound sign,

55
00:02:07.08 --> 00:02:10.09
and then an a for red, a
for green, and a for blue,

56
00:02:10.09 --> 00:02:12.05
then a semi-colon.

57
00:02:12.05 --> 00:02:13.07
Now, let's save our work,

58
00:02:13.07 --> 00:02:16.05
let's go back to the
browser, and hit reload,

59
00:02:16.05 --> 00:02:19.01
and since I haven't visited
any one of these URLs yet,

60
00:02:19.01 --> 00:02:21.01
they all still look the same.

61
00:02:21.01 --> 00:02:22.00
So I'm going to come in here,

62
00:02:22.00 --> 00:02:25.01
and open Styling a Table in a new tab,

63
00:02:25.01 --> 00:02:28.00
and then Add a Twitter
Timeline in a new tab.

64
00:02:28.00 --> 00:02:29.01
Now, if I go to each of these tabs,

65
00:02:29.01 --> 00:02:31.01
we can see the course loaded up here.

66
00:02:31.01 --> 00:02:32.08
I'll close each tab.

67
00:02:32.08 --> 00:02:33.09
Come back to the main window,

68
00:02:33.09 --> 00:02:36.04
and we'll now see that
those two particular courses

69
00:02:36.04 --> 00:02:38.05
are now showing up in gray type.

70
00:02:38.05 --> 00:02:39.03
And if you don't see that

71
00:02:39.03 --> 00:02:41.07
you may need to hit
reload in your browser.

72
00:02:41.07 --> 00:02:42.06
So again, this is specifying to me

73
00:02:42.06 --> 00:02:45.08
that I have now visited
these two individual links.

74
00:02:45.08 --> 00:02:47.01
Now, the next property
we're going to change

75
00:02:47.01 --> 00:02:48.04
is the background color,

76
00:02:48.04 --> 00:02:50.02
however, the background
color cannot be changed

77
00:02:50.02 --> 00:02:51.08
on the visited pseudo-class,

78
00:02:51.08 --> 00:02:55.01
unless it's already been
defined on the anchor tag.

79
00:02:55.01 --> 00:02:56.07
So let's go back to our CSS file,

80
00:02:56.07 --> 00:03:00.07
and let's come in here and
define a background color.

81
00:03:00.07 --> 00:03:03.04
So I'll type background-color,
colon, space.

82
00:03:03.04 --> 00:03:04.06
We're going to set the background color

83
00:03:04.06 --> 00:03:08.04
to the same color gray as the body.

84
00:03:08.04 --> 00:03:09.03
So let's come up here

85
00:03:09.03 --> 00:03:13.00
and find the background
property for the body.

86
00:03:13.00 --> 00:03:16.00
Let's copy that, it's e5
for red, green and blue.

87
00:03:16.00 --> 00:03:19.07
Then we'll paste that down
here, hit a semi-colon.

88
00:03:19.07 --> 00:03:21.07
Now, let's come down to the visited link,

89
00:03:21.07 --> 00:03:24.08
and we'll add a background
color down here,

90
00:03:24.08 --> 00:03:27.04
and we're going to set the
background color to white.

91
00:03:27.04 --> 00:03:29.03
So pound sign and three F's.

92
00:03:29.03 --> 00:03:30.06
And now, another thing to note here

93
00:03:30.06 --> 00:03:33.05
is that we cannot use any
semi-transparent values

94
00:03:33.05 --> 00:03:35.07
for any of the properties
in the visited links.

95
00:03:35.07 --> 00:03:38.01
So I can't use an RGBA value here,

96
00:03:38.01 --> 00:03:41.07
and specify the alpha at
anything other than 100 percent.

97
00:03:41.07 --> 00:03:43.06
So with this in place, let's
go back to the browser.

98
00:03:43.06 --> 00:03:45.04
Let's hit reload, and now we'll see

99
00:03:45.04 --> 00:03:47.00
that we have background properties

100
00:03:47.00 --> 00:03:49.02
that are showing up for the visited links.

101
00:03:49.02 --> 00:03:51.08
But again, we are specifying
the exact same background color

102
00:03:51.08 --> 00:03:53.08
in the backgrounds of these other tags.

103
00:03:53.08 --> 00:03:55.02
However, now that I look at this,

104
00:03:55.02 --> 00:03:58.00
this actually calls more
attention to the visited links

105
00:03:58.00 --> 00:04:00.05
versus the links that
somebody has not gone to.

106
00:04:00.05 --> 00:04:01.06
So now, let's reverse this

107
00:04:01.06 --> 00:04:05.00
so that the visited links
aren't quite as prominent.

108
00:04:05.00 --> 00:04:07.01
Now let's go back to our CSS,

109
00:04:07.01 --> 00:04:08.08
let's come up to the anchor tag.

110
00:04:08.08 --> 00:04:12.06
Let's change the background
color here to white,

111
00:04:12.06 --> 00:04:15.02
so I'll put three letter F's here.

112
00:04:15.02 --> 00:04:16.02
Then I'll come in here and cut the color

113
00:04:16.02 --> 00:04:17.09
that was originally there.

114
00:04:17.09 --> 00:04:20.04
Let's come down here and
paste it on the visited,

115
00:04:20.04 --> 00:04:21.09
and then let's come in here
and add a few more properties

116
00:04:21.09 --> 00:04:24.05
to make these look a little
bit more like buttons.

117
00:04:24.05 --> 00:04:27.00
So up in the anchor tag,
after background color,

118
00:04:27.00 --> 00:04:28.07
let's hit a return.

119
00:04:28.07 --> 00:04:32.01
Let's set a display type to inline-block.

120
00:04:32.01 --> 00:04:34.01
This way, if the links
wrap on a second line,

121
00:04:34.01 --> 00:04:36.09
we'll cover the entire text area.

122
00:04:36.09 --> 00:04:39.09
Next line, let's set padding.

123
00:04:39.09 --> 00:04:42.08
We're going to set this to four
pixels on the top and bottom,

124
00:04:42.08 --> 00:04:45.00
and 15 pixels on the right and left.

125
00:04:45.00 --> 00:04:47.01
Then, a return.

126
00:04:47.01 --> 00:04:49.02
Let's come in here and set border-radius.

127
00:04:49.02 --> 00:04:52.07
We're going to set that to
five pixels on all four sides.

128
00:04:52.07 --> 00:04:54.03
Then, a return, and let's come in here

129
00:04:54.03 --> 00:04:56.06
and specify a border as well.

130
00:04:56.06 --> 00:04:59.08
We'll set a one pixel, solid,

131
00:04:59.08 --> 00:05:02.02
we'll use RGBA, because we're
on the main anchor link,

132
00:05:02.02 --> 00:05:04.00
not the visited link,

133
00:05:04.00 --> 00:05:08.02
and for the RGBA values, we're
going to use 255 for red,

134
00:05:08.02 --> 00:05:11.04
255 for green, and 255 for blue,

135
00:05:11.04 --> 00:05:14.09
and then we're going to
specify .8 for the alpha.

136
00:05:14.09 --> 00:05:17.06
Now, let's come down to the visited link.

137
00:05:17.06 --> 00:05:21.03
After background-color, let's hit a space.

138
00:05:21.03 --> 00:05:24.02
Let's come in here and
specify border color.

139
00:05:24.02 --> 00:05:25.09
And again, we can't use transparency here,

140
00:05:25.09 --> 00:05:27.06
so we'll simply set this to white.

141
00:05:27.06 --> 00:05:30.04
So a pound sign, and three F's.

142
00:05:30.04 --> 00:05:31.09
And now, so with these
properties in place,

143
00:05:31.09 --> 00:05:33.04
let's go back to the browser.

144
00:05:33.04 --> 00:05:35.02
Let's hit reload,

145
00:05:35.02 --> 00:05:37.03
and so now all of the links
that we have not visited

146
00:05:37.03 --> 00:05:39.07
have a white background
and rounded corners,

147
00:05:39.07 --> 00:05:41.07
and all of the visited states

148
00:05:41.07 --> 00:05:44.04
have applied our background
color and our border,

149
00:05:44.04 --> 00:05:46.00
and now show in gray type,

150
00:05:46.00 --> 00:05:47.06
so they don't feel quite as prominent

151
00:05:47.06 --> 00:05:50.01
as the links that we have not yet visited.

152
00:05:50.01 --> 00:05:51.09
And so now that we're using
more of a button style

153
00:05:51.09 --> 00:05:54.07
instead of a list, let's
go back to our CSS.

154
00:05:54.07 --> 00:05:56.08
Let's find our unordered list.

155
00:05:56.08 --> 00:06:00.00
After the margin properties,
let's hit a space,

156
00:06:00.00 --> 00:06:04.03
let's come in here and
set list-style to none.

157
00:06:04.03 --> 00:06:08.00
And let's come in here and
set padding-left to zero.

158
00:06:08.00 --> 00:06:10.00
Then, we'll go back to
the browser one more time,

159
00:06:10.00 --> 00:06:12.07
hit reload, and now each
of our links is displaying

160
00:06:12.07 --> 00:06:14.01
without a bullet in front,

161
00:06:14.01 --> 00:06:16.06
and they're flush left with
the rest of the content.

162
00:06:16.06 --> 00:06:18.05
And so with a few simple CSS rules,

163
00:06:18.05 --> 00:06:20.08
we're able to give our users an indication

164
00:06:20.08 --> 00:06:23.01
on which particular links
they have not yet visited

165
00:06:23.01 --> 00:06:25.02
from our webpage.

166
00:06:25.02 --> 00:06:27.01
So now, if you'd like to
explore more techniques

167
00:06:27.01 --> 00:06:29.03
for working with
pseudo-classes for hyperlinks,

168
00:06:29.03 --> 00:06:31.00
check out our course here in the library

169
00:06:31.00 --> 00:06:34.00
on creating animated rollovers with CSS.

170
00:06:34.00 --> 00:06:36.07
Or, to learn to assign background
graphics to hyperlinks,

171
00:06:36.07 --> 00:06:38.01
check out chapter two of our course

172
00:06:38.01 --> 00:06:40.06
on creating a sortable photo gallery.

173
00:06:40.06 --> 00:06:42.04
And so with that, I'll
conclude this brief look

174
00:06:42.04 --> 00:06:44.01
at the visited pseudo-class,

175
00:06:44.01 --> 00:06:47.01
and as always, thanks for watching.