Aplicar estilos a enlaces con CSS

En estos años hemos tenido ocasión de estudiar propiedades y clases de CSS que son quizá un poco más desconocidas o menos utilizadas por nosotros. Por eso en esta ocasión vamos a volver a lo básico y ver cómo podemos modificar la apariencia de los enlaces de una página web desde la hoja de estilos.

Lo primero que tenemos que utilizar es el elemento a para seleccionar todos los enlaces que estemos usando y a continuación definimos las propiedades que queremos modificar:

/*Se aplicará de manera global*/
a{
text-decoration:none;
}

Hay que tener en cuenta que por defecto los enlaces son azules y utilizan un subrayado. En el caso anterior elimino la línea inferior a la hora de imprimirlos en la pantalla.

Para completar nuestro CSS nos quedaría personalizar los diferentes estados de los links como son el no visitado, rollover, activo o visitado. Para ello vamos a usar algunas de las pseudo-clases que ya vimos en otro artículo y que nos servirán de selectores.

/*Para enlaces no visitados*/
a:link{
color:#999999;
}

/*Para cuando el cursor pase por encima*/
a:hover{
color:#000000;
}

/*Para cuando se haga click*/
a:active{
font-weight:#ffffff;
}

/*Para enlaces ya visitados*/
a:visited{
color:#cccccc;
}

Con esto ya tendríamos personalizados los estilos y podemos usar las propiedades que queramos para que los enlaces queden a nuestro gusto. Aunque como ejemplo he usado el elemento a que es global para todos los enlaces, podríamos usar sin ningún problema una clase o un id específico para aplicar los estilos solo a éstos.