Search This Blog

Friday, October 28, 2016

How To Style Visited Links With CSS

Have you ever noticed, that when you watch a video in YouTube, and the video get listed again in the suggested video section, then there will be an overlay on the video's thumbnail titled Watched. This is done in order to help us easily know which video you have watched and which you have not.

The is true when a visitor is browsing through a website (your website). By default, the browser of the visitor is using will apply a unique style to all text link he or she have visited. But you do not need the browser to do that for you, you can do that yourself.

Doing this yourself is a very great ideal because you will be able to style visited link to your preference, the same what you might have styled other links which have not been click on, so that the click will blend into and complement the design of your blog or website.

To style visited links, all you need do is to use the a:visited selector in the opening and closing <style> tag, and then stipulate the style you want to apply.
Let use this example.
We want out visited link to have a red text color, to be italicized and to be overlined instead of underline. Then we use this code:

a:visited {
     color: red;
     fontweight: italic:
     text-decoration: overline; 

We can place this code inside the <head> tag or at the top of the <body> tag or anywhere. But we recommend that you put it at the <head> that so that the browser will apply it as it loads the page not after.

The Main Point
The a:visited CSS selector is used to select and style links that have been visited or clicked upon by your site visitors previously.

Any text style can be applied to visited links, thus the style applied to the visited links in our code above is not the only style that can be applied to visited text links.

Hash Tags:
#Pinfoltd #CSS1 #CSS #Links #StylingLinks #VisitedLinks

Team Pinfoltd



Search This Blog