CSS Color de Enlace

Su fácil para dar un toque de color a su sitio web con algunos coloridos vínculos; en este tutorial te mostraremos cómo utilizar códigos de colores Hex y el CSS propiedad color para dar a sus etiquetas ancla más pop. Y, como bonificación, incluso le muestran cómo utilizar CSS para cambiar el color de los enlaces de puntero. Que empecemos, ¿vale?

CSS color de enlace mediante una etiqueta HTML

En cuanto a CSS color se refiere, los vínculos o <a> etiquetas, se comportan de la misma manera como texto normal. Esto significa cambiar el color del enlace todo lo que debe hacer es utilizar el CSS propiedad de color en la etiqueta delimitadora Hex con cualquier color que desee, en el ejemplo que se presenta a continuación, utilice rojo. 

HTML

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

Para los ejemplos de este tutorial vamos a usar un código Hex de color, pero hay que recordar que hay muchos otros posibles valores de color CSS; echar un vistazo a las demás CSS guía para una visión general de todas las distintas formas de utilizar el color en su estilo.

CSS color de enlace utilizando un ID

IDs otra forma de estilo etiqueta <a> mediante CSS. Probablemente hayas visto antes, IDs con el prefijo un signo '#' en CSS y en general están destinados a ser utilizados sólo una vez en cualquier página web. 

HTML

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

CSS color de enlace utilizando una clase

Clases en el otro lado, se tiene la intención de volver a usar en una página web, y son mucho más comunes que IDs. Las clases CSS van precedidos de un '.' y varias clases pueden incluso estar conectadas al mismo elemento HTML. Aquí se utiliza una clase con el mismo código Hex de color rojo. 

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>
Demo en CodePen

Cambiar color de vínculo de hover con CSS

Es probable que hayas notado enlaces cambia de color cuando se coloque el cursor sobre ellos, un elegante y muy fácil de implementar usando CSS. Para cambiar el color de su enlace en hover, utilice el :hover pseudo-propiedad en el enlace de la clase y le dan un color diferente. 

CSS

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

La propiedad hover también pueden utilizarse tanto en IDs y elementos en sí, como se demuestra en el tutorial. Color es sólo una de las muchas propiedades que se pueden modificar mediante :hover, pruebe a experimentar con relieve, colores de los bordes y fondos para la diversión.