CSS Link – How to customize styles of your links

CSS Link – How to customize styles of your links

2 52015

CSS Link – How to customize styles of your links

Today I will tell you about CSS again. But we will talk not about properties today – but about link elements. Link is part of document, linking to other element (text, image, block) in same document or to another object (as example file or other document). As we all know, default color of links is blue (in all browsers). But of course, we can style our links with CSS properties (as example choose another color, font, background, visual text effects, etc) for all states.

For links, HTML using tag <a>, with defined link it will looks like <a href="link_url">link caption</a>.


As I told before, link can have 4 states:

  • active – this state describing link in moment when mouse down and over our link.
  • hover – this state describing link in moment when mouse only over our link.
  • link – this state for usual unvisited links.
  • visited – this state for already visited links.

Also present few rules that we should define ‘hover’ properties after defining ‘link’ and ‘visited’, and also need to have ‘active’ after ‘hover’

So, in result – here are order of styles which we can have:

a:link { /* styles for unvisited link */ }
a:visited { /* styles for visited link */ }
a:hover { /* styles for hover link */ }
a:active { /* styles for active link */ }

Ok, lets create first sample where we will use different font size and colors for different states

Sample 1

#sample1 a:link { font-size:14px;color:red; }
#sample1 a:visited { font-size:15px;color:green; }
#sample1 a:hover { font-size:16px;color:blue; }
#sample1 a:active { font-size:17px;color:black; }
<div id="sample1"><a href="https://www.script-tutorials.com/about/">First sample link</a></div>

That was fine, but, commonly we can define really many different styles: font-family, font-weight, text-transform, white-space, and, one of interesting and important properties is: text-decoration. It can allow you to set custom decoration: we can remove underline, force underline, put line over link (overline), put line through text (line-through), and even set blinking (blink). More, we can combine these decorations (with splitting by space).

Sample 2

#sample2 a:link { text-decoration:none; }
#sample2 a:visited { text-decoration:line-through; }
#sample2 a:hover { font-weight:bold;text-decoration:underline overline; }
#sample2 a:active { font-weight:bold;text-transform: uppercase; }
<div id="sample2"><a href="https://www.script-tutorials.com/about/">Second sample link</a></div>

A little about CSS3, Commonly, nothing changed here since first version of CSS (for links), here are same states: link,visited,active,hover. We can just use more different styles to customize our links. Like rounded corners, text shadow, text rotation etc.


Conclusion

I hope that our new css article was interesting and useful for your projects. Good luck!

SIMILAR ARTICLES


2 COMMENTS

  1. It is really just for beginner, must be continue …
    As for me I like the links with subtle dashed underline.

  2. Customizing links is a must if you want attention. A good looking link can generate traffic for a site. :)

Leave a Reply