VOOZH about

URL: https://www.geeksforgeeks.org/css/css-links/

⇱ CSS Links - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS Links

Last Updated : 11 May, 2026

CSS Links are used to style hyperlinks and control how they appear in different states such as normal, visited, hover, and active. They help improve the look and user experience of web navigation by customizing link colors, effects, and behaviors.

Four states of links:

  • a:link: This is a normal, unvisited link.
  • a:visited: This is a link visited by user at least once
  • a:hover : This is a link when mouse hovers over it
  • a:active: This is a link that is just clicked.
  • The <a> (anchor) tag is used to create a hyperlink that redirects the user to the GeeksforGeeks website when the text is clicked.
  • The CSS applied to the <p> tag increases the font size to 25px and centers the link text, improving readability and presentation on the page.
Syntax: a:link {color:color_name;}

Properties of CSS Links

Some basic CSS properties of links are given below: 

1. Color

This CSS property is used to change the color of the link text. 

Syntax: 

a {
 color: color_name;
}
  • The CSS pseudo-classes (a:link, a:visited, a:hover, a:active) control the link’s color in different states such as unvisited, visited, hovered, and active (clicked).
  • This example demonstrates how a single link dynamically changes color based on user interaction, improving visual feedback and user experience.

2. Font-family

This property is used to change the font type of a link using font-family property. 

Syntax:

a {
 font-family: "family name";
}
  • The CSS link pseudo-classes (a:link, a:visited, a:hover, a:active) are used to change the font family of the hyperlink based on different user interaction states.
  • This example shows how a link’s appearance dynamically updates—from Arial by default to Times New Roman on hover and Comic Sans MS when clicked—enhancing interactivity and visual feedback.

3. Text-Decoration

This property is basically used to remove/add underlines from/to a link. 

Syntax:

a {
 text-decoration: none;
}
  • The text-decoration: none; property is used to remove the default underline from the hyperlink, giving it a cleaner and more customized appearance.
  • The example highlights how text-decoration can be used to control link styling, such as adding or removing underlines to match the design requirements.

4. background-color

This property is used to set the background color of the link. 

Syntax:

a {
 background-color: color_name;
}
  • The background-color property is used to style the hyperlink as a button, giving it a powder blue background for the unvisited state and green on hover for visual interaction feedback.
  • Additional styling like color, padding, text-decoration: none, and display: inline-block makes the link look like a clickable button rather than a standard text link, improving usability and aesthetics.

CSS Link Button

CSS links can also be styled using buttons/boxes. The following example shows how CSS links can be designed as buttons. 

  • The link is styled as a button using CSS properties like background-color, color, padding, border-radius, and display: inline-block to make it visually distinct and user-friendly.
  • text-decoration: none removes the default underline, while text-align: center ensures the text is centered within the button, enhancing readability and aesthetics.
Comment
Article Tags: