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

Cómo cambiar color del texto en html con css

html svgcss svg
actualizado: 14 / 08 / 2022

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.

Cambiar el color del texto en todo el cuerpo de la 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 letra en las etiquetas h1, h2, h3,h4 con css

Los encabezados de nuestros artículos 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 los títulos y párrafos del texto, 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 el color de los párrafos html con css

El color 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);
}

Agregando el color del texto directamente en tu html 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 poner comentarios en javascript

Imagen destacada del artículo Cómo poner comentarios en javascript

Cómo crear un menú desplegable con html y css

Imagen destacada del artículo Cómo crear un menú desplegable con html y css

Cómo desinstalar paquetes npm

Imagen destacada del artículo Cómo desinstalar paquetes npm

Aprende a usar e insertar imágenes en html

Imagen destacada del artículo Aprende a usar e insertar imágenes en html

Cómo poner una imagen de fondo en html con css

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

Cómo crear un dropdown (menu desplegable) accesible con reactjs

Imagen destacada del artículo Cómo crear un dropdown (menu desplegable) accesible con reactjs

Cómo justificar el texto html con css

Imagen destacada del artículo Cómo justificar el texto html con css

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