Not only do we have our videos there, but we have part lists, diagrams, pictures and even complete code examples.

So if you are watching this video and you want more information, please go to Eli, the computer guy dot com.

Welcome back.

As you know, I am Eli the computer guy and in today's class and going to be showing you how to format hyperlinks using CSS for your 80 Mount documents and Web applications.

So whenever you go to an HTML document or you go to a WETA application, it is going to be full of hyperlinks, really.

One of the defining components of a human documents are these hyperlinks, And one of the cool things that you could do with CSS is you conform at those hyperlinks so that it is easier for your users to understand where the links are, to understand how they're interacting with links, to understand what links they've already visited so on and so forth.

So this is a pretty simple class, especially if you've been following along with my other CSS courses that I've done.

So let's just jump right over to the computer and I can show you how to format your hyperlinks using CSS.

So here we are, back in my demonstration machine again, I am using a Mac book, so I wrote these two files using text at it.

But when you're writing HTML or CSS, all you need is a basic asking text editor.

So if you're in the Windows world, you can use no pad.

Obviously the macron.

You can use text at it.

If you're in Lenox World, you can use yet it nano them whatever you want.

The two documents that we have here is basically we have a link dot html.

So this is the file that will open up within the Web browser.

It could be named whatever you want, as long as it ends with dot HTM or dot html.

So it opens by default with Web browser.

That is then going to point back to a link style that CSS this particular file.

This is the style sheet for this particular project.

With that, let's go over and take a look at the demonstrations you can.

I understand what we're gonna be coding for.

And when you go over here, this is the basically the HTML document that I've created.

All I have is two sentences here, essentially amusing H one with no additional formatting.

So I'm using just using h one on and then in the middle of both of these sentences I have a lake, so you can see here There's a little bit of different formatting eso with a link on the second on the second example here where this is blue.

This is for when I have not collect on that link.

So I have not clicked on that link.

And so it is blue.

So it shows me haven't clicked on that link up here where it is gray.

When is gray?

That means that I have clicked on that link.

Then what you'll notice is if I hover over the link, you'll see that it has a background color of yellow.

So if I have a whole list of different links, I'm trying to figure out what link I'm actually trying to click on.

Then it's going to turn yellow.

This may be useful for things like tag clouds, eh?

So If you ever deal with WordPress or content management systems, one of the cool pieces of functionally do they have they normally have, like a plug in or widget allows you to create tag clouds.

So you're most your most used tags.

I don't know, kind of just drops it into something.

Looks like a cloud if you don't know what a tag cloud is on a Google search attack cloud.

But anyway, uh, it can be useful to a degree because it does show you the most used tags.

But when you go to try to click on a tag, it might be a little difficult to really realize what tag you're clicking on.

So basically, if you make it so with hyperlinks, whenever you hover over them, they turn yellow.

That could just make it a lot easier for your users to understand what they're actually hovering over.

Then the next thing that's kind of cool is when I click down.

So all I'm doing now is a click down a click down.

I haven't actually lifted my finger yet, right?

So when the link becomes active, what I have here is that the background color becomes red so I can say OK, this is the link that I'm actually clicking on at this moment.

The cool part about this is it.

I don't want to actually click on the link.

I can just move, move my mouse off the link, pull up on the mouse and then I'm not actually going to go through.

So, like, with this link, I haven't gone here yet.

I click down.

But then, like, Oh, is that the link I wanna click on?

No, that could simply go over here.

And I haven't actually clicked on the link.

Right.

So I go here, I hold down and then I pull up.

Then it will actually take me to wherever the link is pointed Thio.

And now we can see that both links are now Grey.

Let's go and actually take a look at the code that's required to create this.

The first thing we'll take a look at is employed the HTML because it is ridiculously simple.

Same stuff we've done in all of our projects.

Have you been following along with CSS?

Basically, we open the HTML we open the head, we're going to point to the style sheet, so the style sheet is called link style dot C s s.

So again, you can simply put the name of style sheet here if it is insane folder or directory as the HTML document.

If not, you have to put the full file path in.

So do do what you need to do there.

That we're gonna close ahead.

We're then gonna open the body.

And here basically, I have just to h one sentence is what I have here is that says this is a and I do a ref, So all I'm doing is creating a hyperlink.

So with this, I actually just linked directly back to the page itself again.

These are the kinds of things you can do in the HTML world who doesn't really matter again in the production environment.

Don't do this, But, you know, if you're just trying to create links and they have to go somewhere, you can actually just have them point back to themselves anyway.

So I'm just having this essentially point back to itself.

And then I have the word link.

And then I closed the hyperlink, finished the sentence and then close the H one and then open up another age one.

I say this is a again.

I have the whole link again on Lee here.

I'm pointing this to CNN dot com again just to give me a different thing that I'm pointing at with the word.

Then I close the hyperlink at last word closed the age one.

Then I simply closed the body and I closed the HTML.

So the interesting stuff is when we go over then to the CSS, this is where we have the four things that we actually have to code for.

That's what we're going to do Here is a a eso Whenever you're dealing with tags and HTML or elements within CSS, one of things you can do is you can just simply call the tag.

So what we're doing here with the A is we're simply calling the A here for the hyperlink for the A giraffe.

So we're basically saying Whenever you see an A, so whenever you see in a comma and it is a link, then I want you to turn it to a color blue.

If you haven't a I'm sorry, Colin.

So this is Coghlan.

Coghlan, Uh, and you're going to be hovering over.

That's basically whenever you're hovering over hyperlink, I want to take the background color and make it yellow.

A active so active means you're holding down on the mouse.

You haven't pulled up again.

I want to turn the background color to be read and then a visited.

So you've already gone there.

I want the color to be gray, and when you do all of that, this is essentially what you get.

And again, this could be one of those very simple things you can do with CSS and formatting to make your documents.

HTML Documents and Web applications be a lot easier to use again when you think about things from like the coyote perspective, remember, if somebody goes to your page and there's a lot of it's like an administration panel, so there's a lot of different things to click on.

It could be very useful for your user for your visitor toe, have those hyperlinks to be very easy to see, And so when they're trying to navigate through and actually try to use whatever that dashboard you're giving them by formatting those hyperlinks in different ways that can make it a lot easier for them.

So this is basically all there is to it s so when you have a link so you can do Cole and Link.

So when is the link You conform at it in a way, cool and hover.

So you're hovering over.

You conform at it in a way active, so active means when you're holding down button before you've clicked up, you conform at it in a way on, then if it's been visited, you conform at it in a different way.

So those are some of the things that you can do with the formatting of hyperlinks.

So there you go.

Now you know how to format hyperlinks.

I know this might seem like a very little thing, but again, when you're thinking about the Web application that you're going to be creating or the HTML documents you're going to be creating, being able to format your links so that they're easier for your viewers or your users to use maybe a very valuable thing again, as I'm teaching you these types of skills, one of the points that I'm coming from is the concept of a I ot world.

So imagine you've got 100 different.

I ot sensors out in your environment, they're pumping information back to the server.

The server is then dynamically writing basically dashboards and administration panels for your users to be able to interact with.

So understanding where the links are basically understanding what you can click on and what you can't click on where you've been, where you can go.

That type of thing may seem like a very small nuanced, but again it can be very useful and very valuable to your end.

Users went especially again if you have those sensors, if you have a problem, if they have an emergency going on in their environment, if they can pull up that administrative dashboard and instantly know what they can click on when they can't click on understand where they've been that type of thing, that could be very valuable again, especially in an emergency when it really matters.

So that's that's really all there is to formatting hyperlinks.

As always, I enjoyed teaching this class look forward to see what the next one.

If you like the content that I create, please think about going to align the computer guy dot com and becoming a member or donating.

Please understand that all the educational videos are in front of the pay wall that includes the videos that includes the notes, the diagrams and the code.

Example.

All of that is freely available and in front of the pay wall.

But if you want to watch opinion videos, or if you want to be able to comment, you do need to become a member.

Membership is $5 a month or $60 a year and gives you access to those opinion videos and the ability to comment.

If you don't want to become a member, you just want to give a one time donation.

There is also a donate button where you can do that.

Please understand.

In order to provide the education that I am.

It does cost money, servers, cost money, equipment costs, money, travel costs, money.

All of these things cost a reasonable amount of money.

And the fact of the matter is, is YouTube's advertising program no longer supports creators the way that it used to.

So if you want to these classes to continue to stick around and you find them to be valuable, please think about either becoming a monthly member or donating a few dollars for this project.