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

2
00:00:02.03 --> 00:00:04.01
and in this episode,
we're going to restyle

3
00:00:04.01 --> 00:00:08.05
a plain hyperlink into being
a linked logo for our webpage.

4
00:00:08.05 --> 00:00:10.03
Now for search engines and accessibility,

5
00:00:10.03 --> 00:00:12.01
we want to make sure
that the HTML elements

6
00:00:12.01 --> 00:00:14.09
are simple and full of
information about the content,

7
00:00:14.09 --> 00:00:17.04
however this is not very
attractive to look at.

8
00:00:17.04 --> 00:00:18.09
In the example for this episode,

9
00:00:18.09 --> 00:00:22.03
we'll take an SEO and
accessibility friendly hyperlink,

10
00:00:22.03 --> 00:00:24.03
and we'll transform it into
something more visually

11
00:00:24.03 --> 00:00:27.09
appealing by adding a graphic using CSS.

12
00:00:27.09 --> 00:00:29.09
Now if you'd like to follow
along with me download

13
00:00:29.09 --> 00:00:32.05
the exercise files and
let's begin by opening

14
00:00:32.05 --> 00:00:35.05
the index.html file in a text editor.

15
00:00:35.05 --> 00:00:38.09
Now in the HTML file, we
have a header area here.

16
00:00:38.09 --> 00:00:41.00
Inside of the header we have an h1

17
00:00:41.00 --> 00:00:43.02
and we have an anchor tag,
and this is the anchor tag

18
00:00:43.02 --> 00:00:45.05
that we're going to apply a logo to.

19
00:00:45.05 --> 00:00:49.00
So here we have an anchor
tag that's got a title.

20
00:00:49.00 --> 00:00:51.09
We have an href, and we had the label

21
00:00:51.09 --> 00:00:54.04
or the linked text of the anchor tag.

22
00:00:54.04 --> 00:00:56.01
So what we're going to do
first is we're going to put

23
00:00:56.01 --> 00:00:59.06
the text here inside of the span element.

24
00:00:59.06 --> 00:01:01.06
So after the beginning anchor tag,

25
00:01:01.06 --> 00:01:07.06
let's add a <, type in
the word span then a >,

26
00:01:07.06 --> 00:01:10.00
then let's get our cursor
after the y in company,

27
00:01:10.00 --> 00:01:11.07
and then we'll end the span element.

28
00:01:11.07 --> 00:01:14.04
Now we're doing this so that
we can hide the span element

29
00:01:14.04 --> 00:01:17.09
from viewers but again it's
still in the HTML and accessible

30
00:01:17.09 --> 00:01:20.08
for screen readers and search engines.

31
00:01:20.08 --> 00:01:22.00
And now the second thing that I'll do,

32
00:01:22.00 --> 00:01:25.00
up here before the title, is add a class.

33
00:01:25.00 --> 00:01:28.09
So I'll say, class=""

34
00:01:28.09 --> 00:01:30.06
and then type in logo.

35
00:01:30.06 --> 00:01:31.07
So that's the only thing we're going to

36
00:01:31.07 --> 00:01:33.08
change about the anchor tag.

37
00:01:33.08 --> 00:01:34.09
And now to see what our page looks like

38
00:01:34.09 --> 00:01:36.08
before we make any CSS changes,

39
00:01:36.08 --> 00:01:40.01
let's open index.html up in our browser,

40
00:01:40.01 --> 00:01:42.03
so here we can see our logo
is just a simple text link

41
00:01:42.03 --> 00:01:44.00
up in the header area, so now we'll

42
00:01:44.00 --> 00:01:46.00
go back to our exercise files.

43
00:01:46.00 --> 00:01:47.09
Let's find style.css.

44
00:01:47.09 --> 00:01:52.09
Let's open this up in our text editor.

45
00:01:52.09 --> 00:01:55.09
Let's scroll down to the bottom.

46
00:01:55.09 --> 00:01:57.07
I'll add a few returns down here,

47
00:01:57.07 --> 00:01:59.06
and now let's first
target the span element

48
00:01:59.06 --> 00:02:03.02
inside of our anchor tag
with a class of logo.

49
00:02:03.02 --> 00:02:09.05
So we'll type header space
a.logo then a space then span,

50
00:02:09.05 --> 00:02:11.05
put in our {},

51
00:02:11.05 --> 00:02:12.04
and we'll simply come in here

52
00:02:12.04 --> 00:02:17.05
and set a display property to none.

53
00:02:17.05 --> 00:02:18.04
Now when we preview this in a browser,

54
00:02:18.04 --> 00:02:20.00
we'll now see that the text for

55
00:02:20.00 --> 00:02:21.07
that anchor tag is not showing up.

56
00:02:21.07 --> 00:02:23.00
It's still in the HTML, but we don't

57
00:02:23.00 --> 00:02:26.00
see it in the browser's view port.

58
00:02:26.00 --> 00:02:29.02
Now before this rule, let's
target the anchor link itself.

59
00:02:29.02 --> 00:02:33.04
So header space a.logo,

60
00:02:33.04 --> 00:02:34.06
let's put in our {},

61
00:02:34.06 --> 00:02:36.06
let's split these open,

62
00:02:36.06 --> 00:02:39.07
and the first property we'll
set is the display type.

63
00:02:39.07 --> 00:02:41.00
So we're going to change the display type

64
00:02:41.00 --> 00:02:44.05
of that anchor link to an inline block.

65
00:02:44.05 --> 00:02:47.02
This way we can give it some dimensions,

66
00:02:47.02 --> 00:02:49.04
so on the next line, we're
going to set a width.

67
00:02:49.04 --> 00:02:53.02
We'll set the width to 250 pixels.

68
00:02:53.02 --> 00:02:54.08
Next line we're going to set the height.

69
00:02:54.08 --> 00:02:57.05
We're going to set the
height to 50 pixels.

70
00:02:57.05 --> 00:02:58.05
Next we're going to bring in

71
00:02:58.05 --> 00:03:00.04
an svg graphic as the background.

72
00:03:00.04 --> 00:03:01.04
So on the next line, let's come in here

73
00:03:01.04 --> 00:03:03.02
and set a background property.

74
00:03:03.02 --> 00:03:04.08
We use shorthand style here.

75
00:03:04.08 --> 00:03:06.00
The first property would be color,

76
00:03:06.00 --> 00:03:07.07
but we're not going to set a color.

77
00:03:07.07 --> 00:03:12.09
So the second value is url,
so we'll take the url (),

78
00:03:12.09 --> 00:03:16.06
inside we're going to point
to the image's directory.

79
00:03:16.06 --> 00:03:19.08
So we'll type images/

80
00:03:19.08 --> 00:03:24.02
travel_company.svg

81
00:03:24.02 --> 00:03:26.03
then after the (), we'll
set the repeat property

82
00:03:26.03 --> 00:03:30.04
to no-repeat then a space then 0 for the x

83
00:03:30.04 --> 00:03:32.07
and 0 for the y position.

84
00:03:32.07 --> 00:03:34.06
Now by default, the background graphic

85
00:03:34.06 --> 00:03:37.04
should scale to the
dimensions of the logo.

86
00:03:37.04 --> 00:03:40.05
So this should automatically
scale to 250 by 50,

87
00:03:40.05 --> 00:03:41.07
however, I like to make sure that

88
00:03:41.07 --> 00:03:44.02
I'm specifying this in the CSS as well.

89
00:03:44.02 --> 00:03:46.04
So on the next line, we're
going to set a background size,

90
00:03:46.04 --> 00:03:48.07
and we'll set this to contain,

91
00:03:48.07 --> 00:03:50.05
and so now with these in place,
if we go back to the browser

92
00:03:50.05 --> 00:03:53.00
and hit reload, we'll now see
that we have the hyperlink

93
00:03:53.00 --> 00:03:56.00
showing up where we don't
see that original text,

94
00:03:56.00 --> 00:03:57.06
but we see the graphic in the background,

95
00:03:57.06 --> 00:03:59.09
and then we can see the
title attribute showing up

96
00:03:59.09 --> 00:04:01.04
as a tool tip since we haven't

97
00:04:01.04 --> 00:04:04.00
changed any of the base HTML.

98
00:04:04.00 --> 00:04:04.08
And then the last thing we'll do

99
00:04:04.08 --> 00:04:07.01
is just set some positioning properties.

100
00:04:07.01 --> 00:04:09.04
Let's go back to our CSS.

101
00:04:09.04 --> 00:04:12.02
After background-size

102
00:04:12.02 --> 00:04:15.08
new line, let's set position to absolute.

103
00:04:15.08 --> 00:04:19.05
Let's set a top property to 10 pixels

104
00:04:19.05 --> 00:04:24.03
and a left property to 25 pixels.

105
00:04:24.03 --> 00:04:25.04
And so now with these rules in place,

106
00:04:25.04 --> 00:04:27.03
we've transformed a standard hyperlink

107
00:04:27.03 --> 00:04:30.07
into an attractive linked
logo for our webpage.

108
00:04:30.07 --> 00:04:32.09
Now if you'd like to take
this idea one step further

109
00:04:32.09 --> 00:04:36.03
and create a responsive svg
logo for your hyperlink,

110
00:04:36.03 --> 00:04:38.05
check out Chapter 2 of
the Advanced Techniques

111
00:04:38.05 --> 00:04:41.04
in Responsive Web Design course
we have here in the library.

112
00:04:41.04 --> 00:04:43.02
And to learn more about
positioning elements,

113
00:04:43.02 --> 00:04:45.01
check out our previous
episode in this series

114
00:04:45.01 --> 00:04:48.03
about the position property in CSS.

115
00:04:48.03 --> 00:04:50.06
And so with that, I'll
conclude this episode,

116
00:04:50.06 --> 00:04:53.05
and as always, thanks for watching.