Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

WDS42 - Style Links

In the last article, we learned about CSS Icons and now you can easily insert favorite icons in web pages using icons library like font awesome or google material icons. Now moving forward, today we are going to customise links on web pages using CSS.
Let's begin...

Styling Links depending on states

Now, what the heck states are? Oh, don't worry! Links on web pages are categorized in following 4 states:
  • link - Normal unvisited link
  • visited - A link that user has already visited
  • hover - When a user hovers the mouse over the link
  • active - A moment of clicking the link
Now you can customise each of this states using CSS. Let's see how...

How to Access States

If you want to access particular state of the particular element, the syntax is as follows:
element : state{
    color: red;
In our case we can access, let's say visited state of the link that is a tag using:
a : visited{
    color: blue;
Note: While setting styles for several link states, follow following rules:
  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover
You can use all the text properties to customise links like removing underlines, changing background colors. With the help of some CSS, you can also create a button like the visualisation of links which will be great without the actual use of buttons.
While I am providing code for above button-like links, before seeing code try yourself to produce same.
That's all for today. In the next article, we will learn about customising lists and make them look beautiful.
Till the #keepCoding.

This post first appeared on The Coding Express, please read the originial post: here

Share the post

WDS42 - Style Links


Subscribe to The Coding Express

Get updates delivered right to your inbox!

Thank you for your subscription