All language subtitles for tz4j4v9x0v4h7c2yl5k0xq3e

[Music]

hello and welcome hi I'm Dave this

tutorial is part of a beginner CSS

series I'll be using the Chrome web

browser the visual studio code editor

and the live server extension for visual

studio code to view the web page there

are links to these tools starter code

files and all resources in the

description below let's move on to

styling links with CSS you can see I've

got Visual Studio code open I have some

basic Styles in from the last tutorial

where we have some padding a font size

and a font family a small font stack set

on the body element we're also importing

in a font from Google fonts you can do

that if you want to and the starter code

is available or you can set your own

font family stack if you want to as well

also over in the file tree you'll see I

have an

index.html and in the this index I have

not only a header with an H1 heading I

have a main element that has about five

paragraphs and at least four of those

paragraphs have links in them and then I

have a couple of other HTML files very

very basic they just contain an H1

element in the body that's because I

needed something to link to so I created

a couple of those files as well so let's

go back to the style and I will resize

Visual Studio code to pull it over to

this half of the page and I'm going to

hide the file Tree by pressing contrl B

and we'll pretty much be able to see our

Styles here the only thing is a long

line like this import of the font will

wrap now over on the right you can see

I've got Chrome open and I'm using the

live server extension so anytime we make

an update to our CSS we'll automatically

see it over here on the right styling

our hypertext links is really an

extension of the typography that we just

covered in the last tutorial in this

series because it's still text so a lot

of the things we learn about typography

we can apply to our links but also these

links have their own default styles that

are different from the rest of the text

on a page and when we talk about links

in HTML we're talking about an anchor

tag and usually that links to something

with an href attribute so these first

two links that I have link to Google

searches there are different searches

one searches for web links and one

searches for hypertext links

and then I've got a couple of links that

just go to the other two HTML Pages we

created guitars and JavaScript although

those pages actually do not have that

content just went ahead and created

links that would hold that content so

let's note the default styles of these

links they're underlined that's the

first thing to note also if the link has

not been visited it's a blue color but

notice the hypertext links link that we

have here and it is purple so we know

this is a visitor link and we can tell

all of this just by looking at the page

also when we point at a link it changes

our cursor from this Arrow to a pointer

it's a little hand pointing its finger

at the link so that is called a pointer

cursor and then there's another default

style that we can't even see yet and

that is when we click on a link so I'm

going to click and hold down on this

link and it turns red so this is when

the link is active and that is another

default style that is set so I'm to go

ahead and let go and it goes back to

purple without visiting the link and if

we did visit the link and come back it

would still be purple as visited so now

that we know the default Styles let's

look at how those are set the first one

being text

decoration that we would set and that is

what controls the underline so the

default would be underline and if we

save we shouldn't see any difference but

often times developers want to take away

that underline and style something

different you do want to make sure that

it still indicates somehow that these

are links you want them to stand out in

some way and an underline is a good way

for that to happen but if you want to

take that away you can but you have to

do something else to make the link stand

out okay we also mentioned the cursor so

we can set a cursor but really cursors

have semantic values and I'll see what

Visual Studio code pulls up there's lots

of different choices here but let's look

for example at a not allowed cursor and

it has a semantic value it tells us

something just when we see it so when I

point at JavaScript you can see we get

the little icon that says this is not

allowed and we know what that means so

really we don't want to change that from

a pointer most of the time there is not

really a reason to do that so let's keep

that as pointer but I'll leave that here

so you know the cursor can be set to

different values and of course the

starting color before the link has been

clicked is just set by color and here we

see blue is the default color and I

believe that is the actual default color

and not some variant of blue let me save

again and see if I see a difference and

no it really looks the same to me but it

may look different to you but once I set

this to Blue notice what happens to the

visited link it's changed because it

overwrote the default value and then we

haven't said anything for the visited

link so we need to learn how to do that

as well so what I'm about to show you is

called a pseudo class so we'll once

again select the anchor element but now

we put a colon and now I can put a

definition after here that defines which

pseudo class that I want to select and

right now I want to select the visited

pseudo class and pseudo classes

represent the current state of the

element because a state of an anchor

element can change it has either been

visited or it hasn't and there are some

others that we'll cover as well so for

visited let's go ahead and put this back

to the default and save and now you can

see our hypertext link is once again

purple now our other links haven't been

visited so they're still blue now let's

look at another pseudo class that we can

Define and this pseudo class is called

hover when we hover over the link it

doesn't have a default value right now

if we hover over a link it doesn't

change at all either the visited or the

not visited link both of them still just

stay the same so let's go ahead and

change this and for now let's just

choose a different blue and I'm going to

show you a trick or two where you can

choose something kind of in the same

range of the color you have selected for

your link but first let's just choose a

blue randomly here so now when we hover

notice JavaScript is changing colors

when I hover over it and even the

visited hypertext link will change color

as well because now when we hover over

the link we have changed that state it's

now in the hover State and it is

changing the color of the link and then

remember we still have the active State

as well but right now that's not working

either because that was a default style

and we have overwritten that what has

followed has been visited in Hover and

really we don't have the default style

applied anymore so let's go ahead and

put in that active link

and we can change it to something like

what it was I think it was red so that

will definitely Stand Out select that

and now when I click hypertext link it

definitely turns red and I think I

visited the link and now we're searching

for hypertext link so I'll go back to

our page and we can see that this link

was visited but if I click and hold down

we can see that it's active and now I'll

just pull away and not visit the link

now we have to consider specificity and

we also have to consider the order these

are in for the Cascade so if we put

visited above our anchor selector

visited will still be applied here even

though the anchor selector comes

afterwards in the Cascade and that's

because this visited pseudo class has

more specificity than just an element

just the anchor element and we can see

that if we go to the specificity

calculator and I have this linked to in

the resources and now if I just put in

an anchor element you you can see the

score is just

01 but if I put in an anchor element

with a visited or any other pseudo

selector now the pseudo selector here is

a class I said pseudo selector a pseudo

class I'm selecting the pseudo class

classes attributes and pseudo classes so

this has more specificity and that's why

the visited link continues to stay

purple even though the anchor element

comes afterwards in the Cascade but

that's not usually the order we want

things we usually kind of want to think

about it in the order that we would have

them so I'm going to put that visited

back but now visited hover and active

all have the same specificity and one

can overwrite the other so we really

have to think about the order we put

those in let me save this and right now

they're all working because this is the

proper order have your anchor tag and

then have your visited pseudo class your

hover pseudo class and finally you're

active and they should all work so when

we hover it works visited of course is

working and if I click active it is

working however if I rearrange these

they may not so let me go ahead and take

hover and put it above visited and so

now visited comes after in the Cascade

and when I hover that still works it

hasn't been visited but let's check our

visited link the hover doesn't work

anymore so it's important to have these

in the correct order I'll take cover and

put it back where it belongs in this

order so you want your anchor tag then

your pseudo class of visited then your

pseudo class of hover and finally your

pseudo class of active and there's one

more very important pseudo class and you

usually see it added to the same style

as the hover and we can do that here

just by putting a comma and then putting

in the focus pseudo class and this

really makes your page more accessible

because if a visitor or a user of your

page is using a screen reader and

instead of using a mouse they are

tabbing through your page notice that

right now we've selected the first link

here and it has the outline around it I

am tabbing through the links and by

doing that when it has focus it is

changing the color of the link just like

we did with the hover and that's

important to make your page accessible

as well okay I'm going to take the focus

off of that link and I'm going to remove

all of these in the anchor tag all of

these Styles because they're the default

Styles anyway and what I do want to put

in here is a different color we often

see a color of black we already have

black text but notice now the Links are

underlined with the black text and I

commonly see this on web pages as well

so we don't always take away the

underline sometimes we use the same

color as the rest of the the text but we

add the underline to make them Stand Out

notice you can still have a hover you

can still have a visited color if you

want to but often times you don't see a

visited color either so we can just

comment that out and leave it in the

code and now we don't have a different

color for a visited link and that's okay

if you want to do that but we still have

a hover color and we still have a focus

color as well so now let me back this up

just I wanted to show a different

version of that I'll go ahead and put

the visited color back in and up here

let's go ahead and put in

blue let's do a different color though

let's do steel blue I like that color

we'll save and now we have steel Blue

Links and when we Mouse over it looks

okay but let me show you a couple of

things you can do to stay within the

same color and yet make it noticeable

that you are hovering going back to when

we covered colors in in the different

tutorial we learned how to use the VSS

code color selector so I moused over the

color here and it pulled up the color

selector and I can click on the color

bar and go to hex from the RGB and I can

also go to hsl and I'm going to choose

hsl here and now let's leave it at that

and notice it's 207 44 and 49 now let me

just copy

this and I'm going to take it to our

hover instead of the Dodger blue and now

right here this number is the number we

want to change it changes the color and

so that pulled it up and now we can just

make this a little lighter choosing

something different on the color wheel

if you remember the way these numbers

work it's just something different in

the wheel I'll take it down to 189

notice the other numbers are still the

same 44% and 49 so we've just changed

the shade just a little bit on the color

wheel and when we Mouse over

it kind of goes with the color theme and

that is a good way to change that so in

hsl you're really only changing the

first number and you're selecting a

number close to what you had and that is

one way to get a similar color that

complements what you originally had

another approach and I will go ahead and

comment out the

color but another approach is to use an

opacity property which is making

something

transparent and remember with colors we

could add that right inside of this hsl

as well but I'll show you how to do it

here with the opacity property and let's

put this to one would be the Max and

zero would be completely uh invisible

transparent so let's put this around

0.9 to just give it a little bit of

transparency when we Mouse over and you

can see the color changes it's keeping

the same color but it just gets a little

bit lighter and maybe the8 would even be

more noticeable let's try

that and that also works but when you

learn about this note that opacity will

change everything so if you use this on

something else let's go up here and

let's put in the main

element now if I put this in it made

everything on the page a little bit

lighter I'll make it much more

noticeable here now that made all of the

paragraphs much more transparent so you

want to be careful when you use that now

remember also in the hsl and also in

rgba there is a channel that allows you

to add a transparency value so here we

could also do

0.8 and now when I Mouse over we'll

still get a

transparency as well and it's ALS o

changing color there so if we wanted to

we could put this back to the exact same

color but now we've added the

transparency so if we save and mouse

over we still get a little lighter color

and it's really the same exact shade

we're just lightening it up with a

little bit of transparency there okay

before we finish I just want to

emphasize that these pseudo classes are

not just for changing colors you can

adjust other things although changing

the color of links and the visited

hover Focus active all of those pseudo

classes that's a common application of

this but we could do other things as

well one thing I have seen is changing a

background so let's change the

background here to gold and it will be

kind of like a highlighter so when we

focus and I'm tabbing through we're kind

of highlighting The Links of course

you'd want to choose a complimentary

color there as well but that is

something else I have seen before is

kind of adding a highlight to each link

as it has Focus or as it's hovered over

remember to keep striving for Progress

over Perfection and a little progress

every day will go a very long way please

give this video a like if it's helped

you and thank you for watching and

subscribing your helping my channel grow

have a great day and let's write more

code together very soon