1
00:00:02.02 --> 00:00:03.05
- [Chris] Hi, this is Chris Converse

2
00:00:03.05 --> 00:00:05.02
and in this episode we'll use CSS

3
00:00:05.02 --> 00:00:06.08
to indicate to our users links

4
00:00:06.08 --> 00:00:09.03
that open in new browser windows or tabs.

5
00:00:09.03 --> 00:00:10.07
So, if you'd like to follow along,

6
00:00:10.07 --> 00:00:12.01
download the exercise files

7
00:00:12.01 --> 00:00:14.02
and we'll begin by opening the HTML file

8
00:00:14.02 --> 00:00:16.02
in a text editor.

9
00:00:16.02 --> 00:00:17.08
And once you have the HTML file open

10
00:00:17.08 --> 00:00:19.07
up in the head area
you'll see we have a link

11
00:00:19.07 --> 00:00:22.02
to our style sheet called style.css

12
00:00:22.02 --> 00:00:24.05
and we'll be opening this in a moment,

13
00:00:24.05 --> 00:00:25.06
and if I scroll down the page

14
00:00:25.06 --> 00:00:26.07
you'll see an unordered list

15
00:00:26.07 --> 00:00:29.00
with a series of list items.

16
00:00:29.00 --> 00:00:30.09
Inside of each list item is an anchor tag

17
00:00:30.09 --> 00:00:34.06
with a link to a particular
episode of CSS Shorts.

18
00:00:34.06 --> 00:00:37.02
So, what we're going to do
here is target a new window

19
00:00:37.02 --> 00:00:38.06
for some of these links.

20
00:00:38.06 --> 00:00:40.09
So, I'll come down here to the second item

21
00:00:40.09 --> 00:00:44.03
and before the href
I'll add target equals,

22
00:00:44.03 --> 00:00:46.09
two quotes and then inside of the quotes

23
00:00:46.09 --> 00:00:49.07
we'll put _blank.

24
00:00:49.07 --> 00:00:50.06
So, this will tell the browser

25
00:00:50.06 --> 00:00:53.05
that we want this link
to open in a new window.

26
00:00:53.05 --> 00:00:56.05
So, now I'll come in here,
select and copy this,

27
00:00:56.05 --> 00:00:58.01
I'll paste it on the third item

28
00:00:58.01 --> 00:01:00.09
and then down here on the sixth item.

29
00:01:00.09 --> 00:01:03.01
So, with those in place, save your HTML,

30
00:01:03.01 --> 00:01:04.09
let's go back to the exercise files,

31
00:01:04.09 --> 00:01:07.03
let's find style.css,

32
00:01:07.03 --> 00:01:10.01
let's open this in our text editor,

33
00:01:10.01 --> 00:01:11.08
going to scroll down to the bottom here

34
00:01:11.08 --> 00:01:16.02
and after the anchor tag
with the hover pseudo class,

35
00:01:16.02 --> 00:01:17.08
let's hit a few returns

36
00:01:17.08 --> 00:01:19.01
and now we're going to create a CSS rule

37
00:01:19.01 --> 00:01:20.03
that will target the anchor links

38
00:01:20.03 --> 00:01:23.05
with a specific attribute,
the target attribute.

39
00:01:23.05 --> 00:01:25.09
And so, we'll do that by typing in A,

40
00:01:25.09 --> 00:01:28.01
then a beginning and
ending square bracket.

41
00:01:28.01 --> 00:01:30.00
Inside of the square brackets

42
00:01:30.00 --> 00:01:32.07
we're going to type target, then equals,

43
00:01:32.07 --> 00:01:34.08
two quotes, inside the quotes

44
00:01:34.08 --> 00:01:38.03
we'll type _blank.

45
00:01:38.03 --> 00:01:39.08
Then outside of the square brackets,

46
00:01:39.08 --> 00:01:41.09
we'll add our curly brackets,

47
00:01:41.09 --> 00:01:43.05
we'll split this open

48
00:01:43.05 --> 00:01:44.08
and the first property
we're going to set here

49
00:01:44.08 --> 00:01:46.03
is going to be the background image.

50
00:01:46.03 --> 00:01:48.00
We want to bring in that SVG graphic

51
00:01:48.00 --> 00:01:52.06
that has the little arrow
that points out of the box.

52
00:01:52.06 --> 00:01:55.06
So, I'll type background,

53
00:01:55.06 --> 00:01:58.06
URL, put in our parentheses,

54
00:01:58.06 --> 00:02:06.09
we'll type images/offsite_arrow.svg,

55
00:02:06.09 --> 00:02:08.03
then outside of the parentheses

56
00:02:08.03 --> 00:02:10.03
we'll set a no-repeat.

57
00:02:10.03 --> 00:02:12.01
Next we'll set the background position X

58
00:02:12.01 --> 00:02:14.09
to right, then a space

59
00:02:14.09 --> 00:02:19.02
and the background
position Y to four pixels.

60
00:02:19.02 --> 00:02:22.07
Next line let's hit a background size.

61
00:02:22.07 --> 00:02:24.08
We're going to set this to 14 pixels

62
00:02:24.08 --> 00:02:30.00
for the width and auto for the height.

63
00:02:30.00 --> 00:02:32.07
Then the next property's
going to be padding-right.

64
00:02:32.07 --> 00:02:35.08
We're going to set this to 24 pixels.

65
00:02:35.08 --> 00:02:37.07
And then finally I want to
set a transition property

66
00:02:37.07 --> 00:02:39.02
so we can animate that background

67
00:02:39.02 --> 00:02:41.00
just to give a little
bit more of an indication

68
00:02:41.00 --> 00:02:44.06
that something's
different about this link.

69
00:02:44.06 --> 00:02:48.01
So, we'll type transition, colon, space.

70
00:02:48.01 --> 00:02:52.00
Property's going to be padding-right.

71
00:02:52.00 --> 00:02:55.01
Then a space and we're
going to set the time to .2s

72
00:02:55.01 --> 00:02:59.04
for .2 seconds.

73
00:02:59.04 --> 00:03:01.09
So now with this in place
we can hit save in our CSS

74
00:03:01.09 --> 00:03:02.08
and then back in the browser

75
00:03:02.08 --> 00:03:04.09
we'll now see these
background graphics showing up

76
00:03:04.09 --> 00:03:07.08
for all of the links that
have that target attribute.

77
00:03:07.08 --> 00:03:09.07
And so, now let's go back to our CSS file

78
00:03:09.07 --> 00:03:11.05
and let's create a specific hover state

79
00:03:11.05 --> 00:03:14.08
for these offsite links.

80
00:03:14.08 --> 00:03:18.04
So, I'll come up here
and copy the selector.

81
00:03:18.04 --> 00:03:20.07
Let's paste it down here.

82
00:03:20.07 --> 00:03:21.06
Then after the square brackets

83
00:03:21.06 --> 00:03:25.07
we'll add a colon then type in hover,

84
00:03:25.07 --> 00:03:27.09
add in our curly brackets

85
00:03:27.09 --> 00:03:30.02
and now so when we hover
over one of our offsite links

86
00:03:30.02 --> 00:03:33.02
we'll change the color to a gray.

87
00:03:33.02 --> 00:03:35.06
So, we'll say color, colon, space,

88
00:03:35.06 --> 00:03:38.02
use hexadecimal, so a pound sign

89
00:03:38.02 --> 00:03:40.03
and three number eights.

90
00:03:40.03 --> 00:03:41.01
Then on the next line

91
00:03:41.01 --> 00:03:43.05
we're going to change the
padding-right property.

92
00:03:43.05 --> 00:03:47.00
So, we'll set padding-right to 20 pixels.

93
00:03:47.00 --> 00:03:48.08
Now since we set a transition up here

94
00:03:48.08 --> 00:03:50.00
this is going to create an animation

95
00:03:50.00 --> 00:03:52.08
of that padding-right property.

96
00:03:52.08 --> 00:03:55.02
So, with these in place,
hit save in your CSS

97
00:03:55.02 --> 00:03:56.03
and now back in the browser

98
00:03:56.03 --> 00:03:58.02
when I hover over these offsite links,

99
00:03:58.02 --> 00:03:59.05
the text will turn gray

100
00:03:59.05 --> 00:04:02.09
and we'll see a slight animation
on that background graphic.

101
00:04:02.09 --> 00:04:04.04
So, by using an attribute selector

102
00:04:04.04 --> 00:04:06.08
we're able to target
and style offsite links

103
00:04:06.08 --> 00:04:07.09
a little differently than links

104
00:04:07.09 --> 00:04:09.05
that stay within our site.

105
00:04:09.05 --> 00:04:11.07
And so with that I'll
conclude this episode

106
00:04:11.07 --> 00:04:14.07
and as always, thanks for watching.