Original article: How to Change Text Color in HTML – Font Style Tutorial
El texto juega un rol muy importante en nuestras páginas web. Esto se debe a que ayuda al usuario a saber de qué trata la página web y qué pueden hacer en ella.
Cuando agregas texto a tus páginas web, este por defecto tendrá un color negro. Pero a veces querrás cambiar el color del texto para tener una página web más personalizada.
Por ejemplo, supón que tienes el fondo de tu sitio web con un color oscuro. En ese caso, querrás cambiar el color del texto a uno más claro y brillante para así mejorar la legibilidad y la accesibilidad de tu sitio web.
En este artículo aprenderás cómo cambiar el color del texto en HTML. Revisaremos varios métodos y discutiremos cuál de ellos es el mejor.
Cómo se cambiaba el color del texto antes de HTML5
Antes de la introducción de HTML5, hubieses usado <font> para agregar texto a sitios web. Este tag toma el atributo color y acepta el color como nombre o valor de código hexadecimal:
<font color="#9900FF"> Bienvenido a freeCodeCamp. </font>
// O
<font color="green"> Bienvenido a freeCodeCamp. </font>
Este tag fue despreciado cuando HTML5 fue introducido. Esto tiene sentido porque HTML es un lenguaje de marcado, no de estilado. Cuando estemos lidiando con algún tipo de estilado, es mejor usar CSS, que tiene como función principal estilar.
Esto significa que para que agregar colores a tus páginas web, tienes que usar CSS.
En caso de que tengas prisa y quieras ver cómo puedes cambiar el color de tu texto, puedes usar esto:
// Usando inline CSS
<h1 style="color: valor;"> ¡Bienvenido a freeCodeCamp! </h1>
// Usando CSS interno/externo CSS
selector {
color: valor;
}
Supongamos que no tienes prisa. Vamos a indagar brevemente.
Cómo cambiar el color del texto en HTML
Puedes usar la propiedad color de CSS para cambiar el color del texto. Esta propiedad acepta valores de color como código hexadecimal, RGB, HSL o nombres de colores.
Por ejemplo, si quieres cambiar el color del texto a azul cielo, puedes usar el nombre skyblue, el código hexadecimal #87CEEB, el código decimal RGB rgb(135,206,235), o el valor HSL hsl(197, 71%, 73%).
Para cambiar el color de tu texto con CSS existen tres maneras . Estas son usar estilado inline, estilado interno o estilado externo.
Cómo cambiar el color de HTML con estilado inline CSS
Los estilos inline de CSS te permiten aplicar estilos directamente a los elementos de HTML. Esto significa que estás poniendo CSS dentro de un tag de HTML directamente.
Puedes usar el atributo style, que contiene todos los estilos que deseas aplicar a este tag.
<p style="...">¡Bienvenido a freeCodeCamp!</p>
Puedes usar la propiedad color de CSS junto con el valor del color preferido:
// Valor nombre de Color
<p style="color: skyblue">¡Bienvenido a freeCodeCamp!</p>
// Valor Hexadecimal
<p style="color: #87CEEB">¡Bienvenido a freeCodeCamp!</p>
// Valor RGB
<p style="color: rgb(135,206,235)">¡Bienvenido a freeCodeCamp!</p>
// Valor HSL
<p style="color: hsl(197, 71%, 73%)">¡Bienvenido a freeCodeCamp!</p>
Sin embargo, estilado inline no es la mejor opción si tu app crece y se vuelve más compleja. En su lugar, veamos qué puedes hacer.
Cómo cambiar el color del texto en HTML con CSS interno o externo
Otra forma preferida para cambiar el color del texto es usar estilado interno o externo. Estos son similares, ya que ambos usan un selector.
El estilado interno se hace dentro de la etiqueta <head> en el archivo HTML. Dentro de la etiqueta <head>, agregarás la etiqueta <style> y pondrás todos tus estilos CSS dentro.
<!DOCTYPE html>
<html>
<head>
<style>
selector {
color: valor;
}
</style>
</head>
// ...
</html>
En cambio, para el estilado externo todo lo que tienes que hacer es agregar los estilos CSS a tu archivo CSS usando la sintaxis general:
selector {
color: valor;
}
El selector puede ser una etiqueta HTML o un class o ID. Por ejemplo:
// HTML
<p> ¡Bienvenido a freeCodeCamp! </p>
// CSS
p {
color: skyblue;
}
O puedes usar un class:
// HTML
<p class="mi-parrafo" > ¡Bienvenido a freeCodeCamp! </p>
// CSS
.mi-parrafo {
color: skyblue;
}
O puedes usar un id:
// HTML
<p id="mi-parrafo" > ¡Bienvenido a freeCodeCamp! </p>
// CSS
#mi-parrafo {
color: skyblue;
}
Nota: como has visto anteriormente, con CSS inline, puedes usar el nombre del color, el código Hex y el valor RGB. El valor HSL puede ser usado solamente con estilado interno o externo.
Conclusión
En este artículo has aprendido a cómo cambiar, usando CSS, el color del texto o color de letra de un elemento HTML. También has aprendido que, antes de la introducción de HTML5, los desarrolladores hacían este cambio con la etiqueta <font> y los atributos de color.
Así mismo, ten en cuenta que siempre será preferible estilar tus elementos HTML con un estilado externo o interno, en vez de usar un estilado inline. Esto porque el estilado interno o externo te brinda más flexibilidad.
Por ejemplo, en vez de agregar estilos en línea similares en todas tus elementos de etiquetas <p>, podrías usar una sola class de CSS para todos ellos.
Los estilos inline no son considerados como la mejor práctica, ya que implican muchas repeticiones - no puedes usar estos estilos en otras partes. Para aprender más, puedes leer mi artículo de Estilos inline en HTML. También con este artículo puedes aprender cómo cambiar el tamaño del texto, y con este otro puedes aprender cómo cambiar el color de fondo.
Espero que este tutorial te brinde el conocimiento para cambiar el color de tu texto HTML, y hacerlo más atractivo.
¡Diviértete codificando!