- [Chris] Hi, this is Chris Converse
and in this episode we'll use CSS
to indicate to our users links
that open in new browser windows or tabs.
So, if you'd like to follow along,
download the exercise files
and we'll begin by opening the HTML file
in a text editor.
And once you have the HTML file open
up in the head area you'll see we have a link
to our style sheet called style.css
and we'll be opening this in a moment,
and if I scroll down the page
you'll see an unordered list
with a series of list items.
Inside of each list item is an anchor tag
with a link to a particular episode of CSS Shorts.
So, what we're going to do here is target a new window
for some of these links.
So, I'll come down here to the second item
and before the href I'll add target equals,
two quotes and then inside of the quotes
we'll put _blank.
So, this will tell the browser
that we want this link to open in a new window.
So, now I'll come in here, select and copy this,
I'll paste it on the third item
and then down here on the sixth item.
So, with those in place, save your HTML,
let's go back to the exercise files,
let's find style.css,
let's open this in our text editor,
going to scroll down to the bottom here
and after the anchor tag with the hover pseudo class,
let's hit a few returns
and now we're going to create a CSS rule
that will target the anchor links
with a specific attribute, the target attribute.
And so, we'll do that by typing in A,
then a beginning and ending square bracket.
Inside of the square brackets
we're going to type target, then equals,
two quotes, inside the quotes
we'll type _blank.
Then outside of the square brackets,
we'll add our curly brackets,
we'll split this open
and the first property we're going to set here
is going to be the background image.
We want to bring in that SVG graphic
that has the little arrow that points out of the box.
So, I'll type background,
URL, put in our parentheses,
we'll type images/offsite_arrow.svg,
then outside of the parentheses
we'll set a no-repeat.
Next we'll set the background position X
to right, then a space
and the background position Y to four pixels.
Next line let's hit a background size.
We're going to set this to 14 pixels
for the width and auto for the height.
Then the next property's going to be padding-right.
We're going to set this to 24 pixels.
And then finally I want to set a transition property
so we can animate that background
just to give a little bit more of an indication
that something's different about this link.
So, we'll type transition, colon, space.
Property's going to be padding-right.
Then a space and we're going to set the time to .2s
for .2 seconds.
So now with this in place we can hit save in our CSS
and then back in the browser
we'll now see these background graphics showing up
for all of the links that have that target attribute.
And so, now let's go back to our CSS file
and let's create a specific hover state
for these offsite links.
So, I'll come up here and copy the selector.
Let's paste it down here.
Then after the square brackets
we'll add a colon then type in hover,
add in our curly brackets
and now so when we hover over one of our offsite links
we'll change the color to a gray.
So, we'll say color, colon, space,
use hexadecimal, so a pound sign
and three number eights.
Then on the next line
we're going to change the padding-right property.
So, we'll set padding-right to 20 pixels.
Now since we set a transition up here
this is going to create an animation
of that padding-right property.
So, with these in place, hit save in your CSS
and now back in the browser
when I hover over these offsite links,
the text will turn gray
and we'll see a slight animation on that background graphic.
So, by using an attribute selector
we're able to target and style offsite links
a little differently than links
that stay within our site.
And so with that I'll conclude this episode
and as always, thanks for watching.