- [Chris] Hi, this is Chris Converse,
and in this episode, we're going to restyle
a plain hyperlink into being a linked logo for our webpage.
Now for search engines and accessibility,
we want to make sure that the HTML elements
are simple and full of information about the content,
however this is not very attractive to look at.
In the example for this episode,
we'll take an SEO and accessibility friendly hyperlink,
and we'll transform it into something more visually
appealing by adding a graphic using CSS.
Now if you'd like to follow along with me download
the exercise files and let's begin by opening
the index.html file in a text editor.
Now in the HTML file, we have a header area here.
Inside of the header we have an h1
and we have an anchor tag, and this is the anchor tag
that we're going to apply a logo to.
So here we have an anchor tag that's got a title.
We have an href, and we had the label
or the linked text of the anchor tag.
So what we're going to do first is we're going to put
the text here inside of the span element.
So after the beginning anchor tag,
let's add a <, type in the word span then a >,
then let's get our cursor after the y in company,
and then we'll end the span element.
Now we're doing this so that we can hide the span element
from viewers but again it's still in the HTML and accessible
for screen readers and search engines.
And now the second thing that I'll do,
up here before the title, is add a class.
So I'll say, class=""
and then type in logo.
So that's the only thing we're going to
change about the anchor tag.
And now to see what our page looks like
before we make any CSS changes,
let's open index.html up in our browser,
so here we can see our logo is just a simple text link
up in the header area, so now we'll
go back to our exercise files.
Let's find style.css.
Let's open this up in our text editor.
Let's scroll down to the bottom.
I'll add a few returns down here,
and now let's first target the span element
inside of our anchor tag with a class of logo.
So we'll type header space a.logo then a space then span,
put in our {},
and we'll simply come in here
and set a display property to none.
Now when we preview this in a browser,
we'll now see that the text for
that anchor tag is not showing up.
It's still in the HTML, but we don't
see it in the browser's view port.
Now before this rule, let's target the anchor link itself.
So header space a.logo,
let's put in our {},
let's split these open,
and the first property we'll set is the display type.
So we're going to change the display type
of that anchor link to an inline block.
This way we can give it some dimensions,
so on the next line, we're going to set a width.
We'll set the width to 250 pixels.
Next line we're going to set the height.
We're going to set the height to 50 pixels.
Next we're going to bring in
an svg graphic as the background.
So on the next line, let's come in here
and set a background property.
We use shorthand style here.
The first property would be color,
but we're not going to set a color.
So the second value is url, so we'll take the url (),
inside we're going to point to the image's directory.
So we'll type images/
travel_company.svg
then after the (), we'll set the repeat property
to no-repeat then a space then 0 for the x
and 0 for the y position.
Now by default, the background graphic
should scale to the dimensions of the logo.
So this should automatically scale to 250 by 50,
however, I like to make sure that
I'm specifying this in the CSS as well.
So on the next line, we're going to set a background size,
and we'll set this to contain,
and so now with these in place, if we go back to the browser
and hit reload, we'll now see that we have the hyperlink
showing up where we don't see that original text,
but we see the graphic in the background,
and then we can see the title attribute showing up
as a tool tip since we haven't
changed any of the base HTML.
And then the last thing we'll do
is just set some positioning properties.
Let's go back to our CSS.
After background-size
new line, let's set position to absolute.
Let's set a top property to 10 pixels
and a left property to 25 pixels.
And so now with these rules in place,
we've transformed a standard hyperlink
into an attractive linked logo for our webpage.
Now if you'd like to take this idea one step further
and create a responsive svg logo for your hyperlink,
check out Chapter 2 of the Advanced Techniques
in Responsive Web Design course we have here in the library.
And to learn more about positioning elements,
check out our previous episode in this series
about the position property in CSS.
And so with that, I'll conclude this episode,
and as always, thanks for watching.