Imagen destacada del artículo Cómo cambiar color de texto html con css

Cómo cambiar color de texto html con css

html svgcss svg
actualizado: 28 / 01 / 2023

Para que nuestra web se vea lo más profesional posible tenemos que cambiar el color que traen las letras por defecto en los navegadores, a continuación aprenderás a hacerlo fácilmente usando html y css.

Para cambiar el color de fuente en html debemos usar la propiedad color de css que soporta los siguientes formatos de colores: hexadecimal, rgb, rgba, hsl, hsla o el nombre del color. Para ver todo los colores html visita este enlace

Cambiar el color de texto en html en una página web

La regla css para cambiar el color del texto es la siguiente color: código del color; para hacerlo de forma global en todo el body de nuestro html podemos aplicar el siguiente código en el archivo css.

css
body {
color: #7d7d7d;
}

Como cambiar el color de texto css de las etiquetas headings

Los encabezados de nuestros artículos (h1,h2,h3,h4,h5) son realmente importantes y por ello debemos resaltarlos para facilitar y la lectura de nuestros usuarios.

Normalmente las etiquetas h (encabezados) deben ser más oscuras para crear un contraste para diferenciar entre las letras de los títulos y párrafos del contenido, el código para poner el color de los encabezados es el siguiente:

css
h1 {
color: hsl(227, 2%, 12%);
}
/* para agregarlo a todos los encabezados has esto */
h1,
h2,
h3,
h4,
h5,
h6 {
color: hsl(227, 2%, 12%);
}

Cómo cambiar color a las letras de la etiqueta p en html

El color de las letras de los párrafos de un artículo es muy importante ya que la mayoría del contenido que leen en nuestra web esta dentro de esta etiqueta, para cambiar su color escrirbe el siguiente código en tu css.

css
p {
color: rgb(125, 125, 125);
}

Cambiar color de fuente css usando estilos en línea

Aunque no se recomienda usar los estilos en línea para agregar css a html muchas veces necesitaremos añadir el color del texto directamente en el html sin recurrir al una hoja externa de css, la forma correcta de incrustar estilos en línea para el color del texto es la siguiente:

html
<body>
<h1 style="color: #3a3a3a ;">Esto es un titulo</h1>
<p style="color: #7d7d7d;">Esto es un párrafo</p>
</body>

Pautas y consejos a tener en cuenta a la hora de establecer el color del texto de tu página web

Para finalizar te dejo una lista con algunos consejos que te servirán para escoger el color de texto ideal para tu web.

  • Si el fondo de tu web es oscuro el color blanco es la mejor opción para el color de fuente.

  • No uses el color negro puro ya que es demasiado intenso, mejor prueba con tonos un poco más cercanos al gris.

  • Las etiquetas h deben ser más oscuras que el resto del texto.

  • El color de los enlaces debe ser diferente al del texto para dejarle claro al usuario que es un link y así facilitar su navegación por la web. Nota: También puedes agregar subrayado para resaltarlos aún más.

Artículos relacionados:
Cómo insertar estilos css en html

Imagen destacada del artículo Cómo insertar estilos css en html

Cómo poner color de fondo en html con css

Imagen destacada del artículo Cómo poner color de fondo en html con css

Cómo crear un formulario de contacto con html

Imagen destacada del artículo Cómo crear un formulario de contacto con html

Cómo centrar un div con css

Imagen destacada del artículo Cómo centrar un div con css

Top 8 lenguajes backend más usados en la actualidad

Imagen destacada del artículo Top 8 lenguajes backend más usados en la actualidad

Calcular cuantos días hay entre dos fechas con javascript

Imagen destacada del artículo Calcular cuantos días hay entre dos fechas con javascript

Headless cms (cms sin cabeza) que es y porque deberías usarlo

Imagen destacada del artículo Headless cms (cms sin cabeza) que es y porque deberías usarlo

Cómo centrar una tabla html con css

Imagen destacada del artículo Cómo centrar una tabla html con css