> Faqs > Sobre aplicar color y tipo de letra a los enlaces

Sobre aplicar color y tipo de letra a los enlaces

He visto el siguiente artículo (https://desarrolloweb.com/articulos/556.php) que es para darle formato al texto: tamaño y color, pero al querer agregarle un vinculo, el texto me sale en color gris y no blanco.

Tengo el siguiente código:

<center>
    <span style="color: white; font-size: small;"><a href="https://test2.com/1">LINK 1 </a><a href="https://test.com/2">LINK 2</a></span>
</center>

¿Cómo puedo hacer para que el color de fondo que estoy definiendo para los enlaces aplique verdaderamente a todos los enlaces que tengo dentro del <span>?

Respuestas

El artículo que comentas lo tenemos en un manual de "HTML en desuso". Lo digo primeramente para que lo tengas en cuenta, pues el modo normal de especificar color o tipo de letra a elementos de la página es mediante CSS.

De todos modos, veo que en el código que nos mandas estás usando el atributo style que es de CSS, lo que es en principio correcto. Solo una recomendación, lo más interesante es no poner CSS "en línea", es decir, no poner CSS con el atributo style, sino en un archivo aparte. En los primeros artículos del Manual de CSS se explican las diversas maneras de incluir CSS, por si tienes alguna duda.

Ahora, respondiendo tu pregunta.

El problema que tienes para modificar el color del enlace es que le estás aplicando estilos a una etiqueta <span>. Esa etiqueta dentro contiene la etiqueta <a> del enlace. En la mayoría de las etiquetas HTML, colocar el color al padre es suficiente para que afecte también a todos los hijos, pero en el caso de los enlaces esto no es así. Simplemente, los enlaces tienen sus propios colores asignados de manera global a toda la página, y ese color predomina sobre el color asignado al padre.

La solución sería básicamente asignar el color en la propia etiqueta <a> y no en la etiqueta <span>

<span style="color: white; font-size: small;"><a href="https://test2.com/1" style="color: white;">LINK 1 </a><a href="https://test.com/2" style="color: white;">LINK 2</a></span>

El problema de este ejemplo es que, colocando el estilo css inline estamos obligados a tocar el atributo CSS de cada etiqueta, lo que es poco útil. Lo mejor sería que usases por ejemplo clases CSS para no tener que repetirte. Por ejemplo:

<span class="enlaces_estilosos"><a href="https://test2.com/1" style="color: white;">LINK 1 </a><a href="https://test.com/2" style="color: white;">LINK 2</a></span>

Luego, en tu hoja de estilos externa, deberías tener este CSS:

.enlaces_estilosos {
    font-size: small;
}
.enlaces_estilosos a {
    color: white;
}
Miguel Angel
3145 140 209 17