Hi, I'm Dr. B and welcome to my digital composing instructional video series.
In this tutorial, I demonstrate how to use CSS to format and style hyperlinks.
Before starting today's tutorial, make sure you have your HTML editor open, and have created a new HTML document.
To get started, the first thing I'm going to do is add a couple of links to my HTML document and I'm going to surround both of those links with paragraph tags so we can make sure we can tell what is happening to each link as I start formatting them.
So, first, am going to add my two paragraph tags.
Inside the first paragraph tag, I'm going to create a link to CNN's homepage.
Inside the second paragraph tag, I'm going to add a link to W3 schools.
OK, now to start formatting my two links, what I need to do, then, is I need to go up into the head area of my document.
I need to put in an open and closed style tag.
I'm gonna give myself a little bit of room.
I'm going to save my document, and let's go take a look at what we have before we start changing things.
as you can see, we have two links here.
When formatting links with CSS you have four options.
You can impact how the link looks on the page before someone clicks it. As you can see here the default is blue and underline.
You can format how a link looks after you visit it, which usually changes the link to purple to let people know they've gone to that site in the past.
You can change how the cursor and how the link looks when you hover over with the mouse, as you can see here it turns to a hand.
You can also change the active state. So when you click on it you can tell the link to display differently while someone is clicking the mouse button.
So, let's go back to our HTML and let's start formatting or links.
Now, to do this, we use what are called pseudo classes, which basically impact HTML elements based on their position within the document, they're state, like links in this case, and other such features.
And the first thing we're going to put in is a, you're gonna add a colon, and we're gonna type in link, we're gonna give it a property of color, we're going to make the color red.
So if we save that, go back to our browser, and refresh our page, you can see that our links are now red.
Now let's go back to our HTML editor.
The next thing we're gonna do is we're gonna change how they look when someone has clicked them.
This one, we're gonna put visited, we're going to give it a property and a value of green.
So if we save our document, go our browser, and if we click on W3 schools you'll notice that links that we have clicked and visited are now green to differentiate that we have or have not clicked those links in the past.
So let's go back to our HTML.
The next thing we're going to format is how the links look when someone hovers over them.
In this case we're going to add a property called background-color, we're going to say yellow for now.
Alright so let's save this, get back to our browser, refresh our page, and as you can see when we hover over our links now the background behind them changes to yellow.
And then the last thing we were going to edit is how the links look when someone actually clicks on them.
We're going to use the background-color again and we're going to say pink for now.
So we'll save that, we'll go back to our browser, refresh our page. and now when someone clicks on the link notice how the background changes the pink.
Not the best formatting, but what I've done is easy to see.
It's important to point out, if we go back to our HTML editor, that the formatting rules you create for links need to be listed in this order.
You need to start with link, next you add visited, then you add hover, and if you want to you add active.
The other thing we can do with CSS is we can start grouping things together.
So, if we've decided that we want all of the links on our page to look the same, regardless of whether or not someone's clicked on them, visit them, or when they hover over them.
What we can do is we can add all of those property values and then we can start grouping things
Here again making sure to keep the order in mind.
So the next thing would be a visited, make sure when you group selectors together that you include a comma.
So, we will add the hover and then we'll add the active state.
Now we want to make sure that we get rid of this, and if we save, go back to our browser, you'll see that all that has changed.
Like all HTML elements, links, of course, can be given classes.
So, what we're going to do is we're going to create a new class, in this case we're going to say all links with the class name new, remember we use a period here, in their active state should have a background-color of pink.
Now to make sure that one of our links picks it up, we're gonna add the class new to our second link.
We are going to save our document, go back to our browser, refresh it, and now when we click on the second link, the active state changes the pink.
Notice the first one, however, doesn't because it doesn't have that class attached to it.
There are, of course, a number of other formatting decisions you can make with links using CSS.
For now, however, just remember, that you can change the links color, its visited color, the hover state, and the active state.
Just remember, of course, to always list out link, visited, hover, and acted in that order.
That's it that brings us to the end of today's tutorial.
I hope you enjoyed today's tutorial and that you are enjoying building your own digital compositions.
As I always say, thank you for playing along and for trusting in the process.
Dr. B’s instructional video series is brought to you in cooperation with the Bacha Design Group.
For more information about the Bacha Design Group, or to view more tutorials, please visit us online at jeffbacha.com.