background

Learn how to enhance your website with colorful links using Hex color codes, RGB, and HSL values.

CSS Link Color

Spicing up your website with colorful links is easy! In this tutorial, we'll demonstrate how to use Hex color codes and the CSS color property to give your anchor tags a vibrant touch. As a bonus, we'll show you how to change link color on hover. This is an essential skill for any web developer as it not only enhances the aesthetics of your site but also improves user experience by providing visual feedback.

CSS Link Color with an HTML Tag

Links, or <a> tags, behave similarly to regular text when it comes to CSS color. To change a link's color, simply apply the CSS color property to the anchor tag with your desired Hex color. In the example below, we use red, which is a bold choice that draws attention.

html

<head>
  <style>
    a { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a href="http://example.com/">A Red Link</a>
</body>

In this tutorial, we will use Hex color codes, but remember, there are many other CSS color values available, including RGB, HSL, and even named colors. Experimenting with different values can help you find the perfect palette for your website.

CSS Link Color with an ID

Another way to style an <a> tag is by using an ID. IDs are prefixed with a '#' sign in CSS and are generally meant to be unique on any given webpage. This is particularly useful when you want to target a specific link for styling, ensuring it stands out on your page.

html

<head>
  <style>
    #link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a id="link" href="http://example.com/">A Red Link</a>
</body>

CSS Link Color with a Class

Classes are designed to be reused throughout a webpage and are much more common than IDs. CSS classes are prefixed with a '.' and multiple classes can be attached to the same HTML element. Here, we use a class with the same red Hex color code to style multiple links at once, ensuring consistency across your site.

html

<head>
  <style>
    .link { color: #FF0000; } /* CSS link color */
  </style>
</head>
<body>
  <a class="link" href="http://example.com/one">A Red Link</a>
  <a class="link" href="http://example.com/two">Another Red Link</a>
</body>

Changing Link Color on Hover with CSS

You've probably noticed links changing color when you hover over them. This stylish effect is easy to implement with CSS. To change the color of your link on hover, use the :hover pseudo-class and specify a different color. This not only enhances interactivity but also provides a clear visual indication to users that the link is clickable.

css

.link { color: #FF0000; } /* CSS link color (red) */
.link:hover { color: #00FF00; } /* CSS link hover (green) */

The hover property can also be applied to IDs and elements themselves as demonstrated earlier. Color is just one of many properties you can modify using :hover; try experimenting with underlines, border colors, and backgrounds for added flair. This is a great way to make your links pop and keep your website engaging for visitors.

Share with your friends!
  • Tweet
  • Post
  • LinkedIn
  • Reddit