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.
Soy Juneiker Castillo, un desarrollador web frontend apasionado por la programación y la creación de sitios web modernos rápidos y escalables, en fin un friki 🤓 de javascript enamorado de react js ⚛️.
Sobre mi