Css style

CSS Style Links | How to Style Links in CSS

A link represents a connection from one web page to another web page. This CSS property can be used to link styles in different ways. In this article, you will learn how to set different properties of a hyperlink using CSS property. So let’s take a look at the best practices for styling links.

The first thing to understand is the notion of link states, different states in which there can be links that can be designed using different pseudo-classes:

  • unvisited link: is the default state a link is in, specifically when it is not in any other state. It can be specifically designed using the link pseudo-class.
  • visited: represents a link that has already been accessed, visited, styled using the visited pseudo-class.
  • active: represents a link that is activated by clicking on the link, styled using the :active pseudo-class.
  • float: represents a link that once the user hovers over the link, the property is activated, styled using the :hover pseudo-class.
  • focus: represents a link that has been focused (example: the user moves the action to an element on the page using the Tab key or targeted programmatically using HTMLElement.focus()), styled to using the pseudo-class: focus

Here is an example of a simple link:

CSS links 

Example for a simple link

You can see some things when you drill down into the default styles, i.e. unvisited links are blue, links are highlighted, visited links are purple, deep links have an outline and active links are red.

The default styles can be changed or disabled using the following CSS properties: mouse pointer style slider, text color, and text outline.

Here is an example using the text-decoration property:

Here is a link

CSS Links Fig2

Here is another example, this time using the background-color property:

This is a link

Fig3 CSS Links

Advanced CSS link buttons: To create a link button, use some CSS style properties, so you can create the box and make it interactive. You will need the color property to set the color of the text representing the link, the background color to add color to the button itself, the text-decoration property to remove the underline from the link, the text property -align to set the alignment of your link, the display property describes how your link and your padding property should be displayed and determines the size of your button.

Here is the example:


CSS Links Fig4

All the properties we used before can also be used in other ways. For example, states like hover can be used to style many different elements, not just bindings.

Links are often styled enough to look and behave like buttons in certain situations. A navigation menu is marked as a list containing links, and this can be easily designed to look like a set of control buttons, giving the user access to other parts of the site. See the example below:

Fig5 CSS Links

Let’s see what happens in the example below, focusing on the most interesting parts. Therefore, the second rule removes padding from the element