The next thing is how to style links
And I know most of you think you can do that because you think we just need to type a, add a curly bracelets and insert the property and value
Like this 👇
a {color: blue
}❌
No, it doesn't works that way.
A link is a lot more complicated that you might think. A link is actually composed of something called states and a state is basically when and how you press the link.
We gonna go through different states (not location like Lagos state) for you to understand what am talking about.
There's one link for when the page is first visited.
There's another states for when the link is being clicked.
There's another states as you mousing over the link
And the last is as your mouse button is down and as you're clicking the link
So, one link can have 4 different styles.
Let's see how to change the style of a link and also change the style of each different states.
We all know the element for link is a (the a tag or anchor tag)
Let's use the google link we have on our webpage for example.
So we already have a link that will take us to Google.com so whenever we hold it down or click it, it turns red but maybe we don't want it to be purple by default or when we click, it turns red. Those are the things we want to adjust.
Before you click a link, its gonna be at default states and that is
a:link
a stands for the a or anchor tag that we have in the body section of our webpage. And then semicolon
While the link is one of the states. Now we can change the default by adding property and value.
Let's go ahead and change the color: red and set the text-decoration: none
Like this 👇
We have different kinds of text-decoration
Underlined, strikethrough or linethrough, we don't need all these kinds of text-decoration.
It's basically underlined or none that web developers use.
And as you can see, we have a Google link without underline and our link is red, right?
The next states we should study is visited but our anWriter free HTML editor will not show the different but we can still learn this, so that whenever you come across it, you can easily recognize its function.
And that is;
a:visited {
}
Is when you already clicked a link, you should know what that means.
Use color:green;
Like this 👇
Though we didn't see the different because of the anWriter editor we are using but if you click on the option button in the right top corner and choose the option to view on web browser and view through any of your web browser, you will certainty see the different.
If you click on Google and it takes you Google search page, then go back to your previous webpage, the link will turn to green.
There are two other States we won't be able to cover on this tutorial because of the anWriter free HTML editor we are using, if you have a PC Laptop with much data subscription, I will send the PC version of the text editor with that functions.
Don't panic, you only need about 200mb to download and install and of course, it's the same procedure with the Android version just that the platform is extended but if you've been following all my tutorials, you can work on any platform perfectly.
Something like this
If you press down the Google link for like 2secs, you can still see these functions, it turns blue and have changes to bold text with an underline.
If you check this function out on your PC web browser, you'll see how sweet the function is.
That's how to make your website dynamic using CSS.
And the last one which is the active state, and it's as you're pressing down and your finger is holding down that button.
a:active {background-color: orange;
}
If you hold down on your link, you'll see that the color will change to orange. Like this 👇
Now, you know the different states of link styling using CSS and how to use them.
