08. Styling Links

3 minutes
Share the link to this page
Copied
  Completed
You need to have access to the item to view this lesson.
This is a free item
$0.00
د.إ0.00
Kz0.00
ARS$0.00
A$0.00
৳0.00
Лв0.00
Bs0.00
B$0.00
P0.00
CA$0.00
CHF 0.00
CLP$0.00
CN¥0.00
COP$0.00
₡0.00
Kč0.00
DKK kr0.00
RD$0.00
DA0.00
E£0.00
ብር0.00
€0.00
FJ$0.00
£0.00
Q0.00
GY$0.00
HK$0.00
L0.00
Ft0.00
₪0.00
₹0.00
ISK kr0.00
¥0.00
KSh0.00
₩0.00
DH0.00
L0.00
ден0.00
MOP$0.00
MX$0.00
RM0.00
N$0.00
₦0.00
C$0.00
NOK kr0.00
रु0.00
NZ$0.00
S/0.00
K0.00
₱0.00
₨0.00
zł0.00
₲0.00
L0.00
QR0.00
SAR0.00
SEK kr0.00
S$0.00
฿0.00
₺0.00
$U0.00
R0.00
ZK0.00
Already have an account? Log In

Transcript

In the session, let us learn how to use the pseudo selector with the anchor tag. pseudo selector. Whatever comes after colon is called as a pseudo selector. In this case, colon link colon, colon active colon hoba. All these are pseudo selectors. Let me now explain what is the use of these fools pseudo selectors colon link is used for unvisited links.

If you want to add any styling to an unlimited link, going for colon link, in this case, I am trying to change the font color. The default color of the link is blue. I am changing it to orange colon visited. If you want to add any styling for a visited hyperlink, you can go in for this colon visited here also I'm trying to change the color to black by the way font the font color of a visited link is open colon active. Colon active happens when the user is clicking on the link, but not released the mouse. This is called as colon active colon hover when you move the mouse over the link that is colon hover.

So for all these you can add styling. Now, let us see an example of how to use these pseudo selectors with answers that are created a HTML page with two links. I have also added the styling part. Let me explain this yet. Colon link colon link to see pseudo selector. For an unnecessary link, I'm trying to change the font color to green.

For this link. I want the color to be red. When I'm hovering or I mean I'm hovering the mouse on the link. I want to do a few styling, change the color to orange, change the text to uppercase and give Letter Spacing as five itself. Similarly, for colon add to when clicking on the link I want to do few styling that I have written. Now let me run this.

Okay, browser and the Sublime Text side by side. I've got the output, you can see visit Google is in red color. Open Udemy is in green color. It means visit Google has been visited already. That is why it is coming in red color you know that already are always going to Google to search for something. So it is coming in red color.

What about open Udemy there still no I have not opened it. So it is coming in Greek green color and visited link. Now let me Hover the mouse on open Udemy see the change I have over the mouse on this particular night. automatically the text is getting transformed to uppercase the letter spacing is five pixels and the colors change to orange. Next, let us talk about this active for active I have got few styling, let us check this out and clicking this link, but I have not release the mouse. See the changes open Udemy is getting and it's added format font style is getting changed to italicize.

The font weight is bold. The color is blue, and it is adding the previous stuff also because you are hovering the mouse over the link. So the text transformation is uppercase letters. I mean letter spacing is five pixels. afterwards. What we have seen is how to use a pseudo selectors like colon links colon visited colon hover and colon active together with anchor tags.

That's it. Thank you

Sign Up

Share

Share with friends, get 20% off
Invite your friends to LearnDesk learning marketplace. For each purchase they make, you get 20% off (upto $10) on your next purchase.