Cambiar el color y quitar subrayado a enlace que viene por defecto con CSS

Sabemos que en HTML cuando creamos un enlace de texto, este por defecto nos convierte este texto en azul corriente como también nos genera un subrayado en este mismo. Esto era muy normal en los primeros años de internet e inclusive muchos sitios siguen utilizando este tipo de diseño en sus enlaces pero también es cierto que la mayoría quiere tener manejo sobre el diseño de sus enlaces ya sea para que tengan congruencia con los colores del resto de la web o por cualquier otro motivo.

Para los que no saben como tener control sobre el diseño de sus enlaces con CSS, se los explicaré de forma simple:

Paso 1: Definimos el enlace en nuestro HTML

<html> <–!  Abrimos el HTML –>

<head>

<title>Ejemplo de Enlace y CSS</title>

</head>

<body> <–!  Abrimos el Body –>

Este es un ejemplo para <a href=”http://www.budowebs.cl”>este enlace</a> <–! definimos el texto a enlazar –>

</body>

</html> <–!  Cerramos nuestro HTML –>

Paso 2: Le especificamos un un ID (identificador) a nuestra etiqueta de enlace

<body> <–!  Abrimos el Body –>

Este es un ejemplo para <a href=”http://www.budowebs.cl” id=”link”>este enlace</a> <–! definimos el texto a enlazar –>

</body>

Paso 3: Creamos el ID en nuestro CSS

#link {  } // Primero creamos el ID en nuestro CSS

#link a {  } // Acto seguido, damos la orden de aplicar las propiedades a los enlaces de esa ID (“a”).

Paso 4: Especificamos las propiedades de nuestra ID

#link a { color: #0000000;  } // Especificamos el color en formato hexadecimal #000000 (negro) para nuestro enlace

#link a { color: #0000000;  text-decoration: none; } // Ordenamos que el texto no tenga ningún tipo de decoración (con esto eliminamos el subyarado).

Conclusión

Como pueden ver, el cambiar el color por defecto de los enlaces y quitar subrayado de estos, es muy fácil a través de css.

Espero este tutorial sea de su agrado.

Artículo: Cambiar el color y quitar subrayado a enlace que viene por defecto con CSS

Su comentario es importante…

Sé el primero en comentar!.

Únete a la discusión

Puedes usar las siguientes HTML etiquetas y atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>