Cómo cambiar los colores de fuente del sitio web con CSS

CSS le brinda control sobre la apariencia del texto en las páginas web que crea y administra. En esta guía, le mostramos cómo cambiar los colores de fuente en CSS utilizando palabras clave de color, códigos de color hexadecimales o números de color RGB.

Cómo usar estilos CSS para cambiar el color de la fuente

Los valores de color se pueden expresar como palabras clave de color, números de color hexadecimales o números de color RGB. Para esta lección, necesitará un documento HTML para ver los cambios de CSS y un archivo CSS separado que se adjunta a ese documento. Vamos a ver el elemento de párrafo, específicamente.

Utilice palabras clave de color para cambiar los colores de fuente

Para cambiar el color del texto de cada párrafo en su archivo HTML, vaya a la hoja de estilo externa y escriba pag { }. Colocar el color propiedad en el estilo seguido de dos puntos, como p {color:}. Luego, agregue su valor de color después de la propiedad y termine con un punto y coma. En este ejemplo, el texto del párrafo se cambia al color negro:

pag {
de color negro;
}

Utilice valores hexadecimales para cambiar los colores de fuente

El uso de palabras clave de color para cambiar el texto a rojo, verde, azul o algún otro color básico no le dará la precisión que podría estar buscando al crear diferentes tonos de esos colores. Para eso son los valores hexadecimales.

Este estilo CSS se puede utilizar para colorear los párrafos de negro porque el código hexadecimal # 000000 se traduce en negro. Incluso podría usar taquigrafía con ese valor hexadecimal y escribirlo como # 000 con los mismos resultados.

pag {
color: # 000000;
}

Los valores hexadecimales funcionan bien cuando necesitas un color que no sea simplemente blanco o negro. Por ejemplo, este código hexadecimal le brinda la capacidad de establecer un tono de azul muy específico, un azul de rango medio similar a una pizarra:

pag {
color: # 2f5687;
}

Hex funciona estableciendo los valores RGB (rojo, verde, azul) de un color por separado con valores de base dieciséis. Por eso contienen las letras A mediante F además de los dígitos 0 mediante 9.

Cada color, rojo, verde y azul, recibe su propio valor de dos dígitos. 00 es el valor más bajo posible, mientras que FF es el más alto. Los colores se enumeran en orden RGB en un hexadecimal, por lo que los dos primeros dígitos representan el valor rojo y así sucesivamente.

Utilice valores de color RGBA para cambiar los colores de fuente

Finalmente, puede usar valores de color RGBA para editar colores de fuente. RGCA es compatible con todos los navegadores modernos, por lo que puede usar estos valores con la confianza de que funcionará para la mayoría de los espectadores, pero también puede establecer una alternativa fácil.

Este valor RGBA es el mismo que el color azul pizarra especificado anteriormente:

pag {
color: rgba (47,86,135,1);
}

Los primeros tres valores establecen los valores de rojo, verde y azul y el número final es la configuración alfa para la transparencia. La configuración alfa se establece en 1 para significar 100 por ciento, por lo que este color no tiene transparencia. Si establece ese valor en un número decimal, como .85, se traduce en un 85 por ciento de opacidad y el color sería ligeramente transparente.

Si desea proteger sus valores de color, copie este código CSS:

pag {
color: # 2f5687;
color: rgba (47,86,135,1);
}

Esta sintaxis establece el código hexadecimal primero y luego sobrescribe ese valor con el número RGBA. Esto significa que cualquier navegador antiguo que no admita RGBA obtendrá el primer valor e ignorará el segundo.

Es importante tener en cuenta que la propiedad de color funciona en cualquier elemento de texto HTML en CSS. Puede, por ejemplo, cambiar todos los colores de sus enlaces. Este ejemplo hará que sus enlaces sean de color verde brillante:

a {
color: # 16c616;
}

Esto también funciona con varios elementos a la vez. Puede configurar todos los niveles de título simultáneamente. Por ejemplo, esto establecerá todos los elementos de su título en un color azul medianoche:

h1, h2, h3, h4, h5, h6 {
color: # 020833;
}

Obtener los valores hexadecimales o RGBA para sus colores no siempre es fácil. La mayoría de los diseñadores web utilizarán un programa de edición de imágenes, como Photoshop o GIMP, para generar los códigos exactos. También puede encontrar prácticas herramientas de selección de color en línea, como este de w3schools.

Otras formas de diseñar una página HTML

Los colores de fuente se pueden cambiar con una hoja de estilo externa, una hoja de estilo interna o un estilo en línea dentro del documento HTML. Sin embargo, las mejores prácticas dictan que debe usar una hoja de estilo externa para sus estilos CSS.

Una hoja de estilo interna, que son estilos escritos directamente en el "encabezado" de su documento, generalmente solo se usa para sitios web pequeños de una página. Deben evitarse los estilos en línea, ya que son similares a las antiguas etiquetas de "fuente" que tratamos hace muchos años. Esos estilos en línea hacen que sea muy difícil administrar el estilo de fuente, ya que debe cambiarlos en cada instancia del estilo en línea.