CSS Link Properties – Setting Color, Style, Size: 4 Demos

CSS Link Properties – Setting Color, Style, Size: 4 Demos

The link styling in CSS

HTML links, <a href=””> can use the CSS power to style in the web pages. You can apply different colors, styles, background, font size etc. in different states of a link by using the CSS link properties.

See an example of CSS-styled link

As such the links have four states:

  • A link until it is not visited/clicked is the normal state of a link.
  • As the mouse comes over a link, this is called the hover state.
  • As a link is clicked, this is called as the active state.
  • After a link is visited, it is called the visited state of the link.

You may set different link properties for all these states, in order to distinguish the links that are visited or not or as the mouse comes over a link or a link is visited.

Below are a few examples of using each of these states and setting the link CSS properties.

Setting link properties for normal state of link

Till a link is unvisited, it is called as the normal state of a link. The example below shows how to set CSS link properties: color, style, font size etc. for a link in the normal state.

The first link is set with link color, font style, and font size properties. The second link is set without an underline by using the text-decoration property.

https://www.tutorialscollection.com/css-demo/css-demo-2.php?ex=11.0_1CSS-link settings

Experience this example online

Setting link properties at hover state

This example shows setting the link properties in the hover state i.e. as the mouse is over a link. The color and size will be changed as the mouse comes over the link by using CSS a: hover property.

Experience this example online

Setting link properties for active link by a: active

In the following example, we will set the link properties in an active state (as the link is clicked). The color and size will be changed as the mouse clicks in a link.

Note that, nothing will be changed as the mouse is over the link. The appearance will be changed once the mouse is clicked on the link by using a: active.

Experience this example online

Setting link properties for visited link by CSS a: visited

To show your users that they have visited the link(s), you can use the visited state of a link. The CSS property used for that is a: visited as shown below.

Experience this example online

 

Read Further: CSS text color, CSS font size