Cómo cambiar el color del texto de su sitio web con CSS

Tener control sobre su sitio web es un elemento importante del diseño web. En un mundo ideal, debería poder cambiar todos los aspectos del diseño de su sitio sin tener que comprometer el producto final.

Sin embargo, por supuesto, los sitios web a menudo pueden ser tercos. No siempre es posible lograr los resultados que desea sin profundizar en el mundo de CSS. Veamos cómo puede cambiar el color del texto con CSS en su sitio web para darle una idea de cómo puede lograr más con el poder de CSS.

Cambiar el color del texto del sitio web con CSS

CSS se ha diseñado cuidadosamente para garantizar que los diseñadores tengan poder sobre los proyectos de su sitio web. Es increíblemente fácil cambiar el color del texto con CSS en su sitio web; solo necesitas una regla para hacerlo.

color azul;

Sin embargo, por supuesto, las reglas CSS no funcionan muy bien por sí solas. Debe emparejarlos con clases de elementos, ID e identificadores para asegurarse de que los navegadores web sepan a qué se aplica el estilo. Puede ver ejemplos del uso de esta regla con un encabezado H1, un párrafo P y un botón a continuación.

h1 {color: azul; }
p {color: rojo; }
botón {color: rojo; }

Esto debería brindarle una comprensión básica de lo que debe hacerse para cambiar el color del texto de su sitio web con CSS. Por lo general, se necesita más que esto, especialmente si desea dar diferentes colores a los diferentes textos de su sitio web.

Relacionado: El modelo de caja CSS explicado con ejemplos

Encontrar la clase CSS adecuada

Antes de que pueda cambiar el texto específico en su sitio web, necesita saber cómo identificarlo dentro de su CSS. La mayoría de los navegadores web tienen un conjunto de herramientas diseñadas para ayudar a los desarrolladores, y es probable que el que usa tenga algo llamado Inspector. Esto se puede usar para echar un vistazo al código HTML y otros códigos que construyen un sitio web.

Abriendo el Inspector

Abrir el inspector es diferente en cada uno de los navegadores del mercado. A continuación, cubrimos algunos de los navegadores más populares para darle una ventaja:

• Google Chrome: CTRL + Mayús + C o Puntos de menú > Más herramientas > Herramientas de desarrollo
• Microsoft Edge: CTRL + Mayús + C o Puntos de menú > Más herramientas > Herramientas de desarrollo
• Mozilla Firefox: CTRL + Mayús + C o Puntos de menú > Más herramientas > Herramientas de desarrollo web
• Safari de manzana: Preferencias > Avanzado > Mostrar el menú Desarrollar en la barra de menús y luego Desarrollar > Mostrar inspector web

Encontrar el estilo de texto CSS adecuado

Puede resultar confuso cuando abre el Inspector por primera vez en su navegador. Habrá muchas cosas que quizás no comprenda, pero no necesita preocuparse por esto por ahora. Solo necesita encontrar el nombre de estilo del texto que está intentando cambiar.

Como ejemplo, vamos a buscar y cambiar el estilo de texto CSS que se usa para el encabezado principal en la sección Programación MakeUseOf. Puede iniciar este proceso inspeccionando el elemento que debe cambiarse.

• Google Chrome: Botón derecho del ratón > Inspeccionar
• Microsoft Edge: Botón derecho del ratón > Inspeccionar
• Mozilla Firefox: Botón derecho del ratón > Inspeccionar o Q
• Safari de manzana: Botón derecho del ratón > Inspeccionar elemento

Hacer esto hará que la consola / ventana del inspector de su sitio web se enfoque en el elemento que está tratando de cambiar. En Chrome, Safari, Edge y Firefox, debería ver una sección etiquetada Estilos que contiene todo el código CSS del elemento que está inspeccionando.

También debería ver su elemento HTML resaltado en un panel junto a este. Esto se puede usar para averiguar la clase o ID del elemento que está cambiando. En nuestro caso, estamos mirando el encabezado principal H1 en nuestra página, y este pertenece a una clase llamada .listing-title.

En este punto, puede probar el estilo de texto CSS que agregará a su sitio web. La parte superior de la sección de estilo CSS en la consola del sitio web se puede utilizar para aplicar reglas al elemento específico al que se ha dirigido. Sin embargo, por supuesto, esto no es permanente.

Relacionado: Cómo construir una barra de navegación receptiva usando HTML y CSS

Agregar su nuevo CSS

Ahora es el momento de agregar su nuevo CSS a su sitio web. La forma en que lo haga dependerá del tipo de plataforma de sitio web que esté utilizando, con opciones como Shopify que requieren extensiones para permitirle agregar CSS sin cambiar sus archivos.

Independientemente de cómo agregue su código CSS, debe asegurarse de que sea correcto. Usar reglas CSS de estilo de texto no es demasiado difícil, pero puede ser frustrante cuando no puede averiguar cómo cambiar el color del texto. Para nuestro ejemplo, este es el código que deberíamos agregar a nuestro sitio web.

.listing-title {
color azul;
}

¿Qué pasa si el color de su texto no cambia?

Una vez que haya editado su archivo CSS, debería poder ver el cambio que realizó tan pronto como actualice su página. Sin embargo, no siempre es tan sencillo. CSS puede ser más complejo de lo que la gente espera y es posible que deba hacer más en esta etapa.

• Vaciando el caché: Los sitios web suelen utilizar el almacenamiento en caché para reducir los tiempos de carga. Su caché podría estar impidiendo que vea cambios en el sitio web y debe vaciarlo cuando realice cambios en CSS.
• Más alto en la hoja de estilo: CSS carga estilos secuencialmente, y esto significa que las primeras reglas en su hoja de estilo serán las que se muestren en su sitio web. Mover estilos puede ser una buena forma de darles prioridad sobre otros estilos.
• Usando etiquetas importantes: Esta siguiente opción no se considera una práctica recomendada y es mejor reservarla para cuando no tenga otra opción. Puede agregar una etiqueta importante a sus estilos de texto CSS para darles prioridad sobre todos los demás estilos, y esto se puede ver a continuación:

.listing-title {
color: azul! importante;
}

Otro estilo de texto CSS divertido

CSS es una herramienta increíblemente poderosa que le brinda acceso a una gran cantidad de opciones diferentes cuando trabaja con texto y otros elementos en su sitio web. Esto no se limita solo al color del texto CSS, y puede hacer mucho con su texto cuando elige aprender un poco de CSS. Puede encontrar algunas reglas de estilo de texto CSS más básicas a continuación:

• Tamaño de fuente: Esto cambia el tamaño del texto en su sitio web, por ejemplo, tamaño de fuente: 12px;
• Peso de fuente: El peso se refiere al grosor de una fuente, donde la negrita es de alto peso y el texto delgado es bajo, por ejemplo, el peso de la fuente: 400;
• Texto alineado: Esto cambia la alineación del texto con el que está trabajando, por ejemplo, text-align: right;
• Sombra de texto: Esto le permite agregar una sombra a su texto con un rango de atributos, por ejemplo, text-shadow: 2px 2px 3px black;
• Transformación de texto: Esto cambia el caso del texto con el que está trabajando, por ejemplo, text-transform: mayúsculas;
• Decoración de texto: Esto le permite agregar subrayados, guiones y otras decoraciones al texto, por ejemplo, decoración de texto: subrayado;

Esto es simplemente una muestra de lo que puede hacer con los estilos de texto en CSS. Hay muchas guías en la web que pueden ayudarlo con este proceso, y siempre es una buena idea investigar un poco al comenzar.

Relacionado: Cómo cambiar el texto de su sitio web con la propiedad de familia de fuentes CSS

Más información que el color del texto CSS

La práctica, la experimentación y el ensayo y error son las mejores formas de aprender una herramienta como CSS. Las hojas de estilo pueden parecer abrumadoras cuando empiezas a trabajar con ellas, pero es increíblemente fácil trabajar con ellas una vez que has pasado algún tiempo con ellas.

10 ejemplos simples de código CSS que puede aprender en 10 minutos

¿Necesitas ayuda con CSS? Pruebe estos ejemplos básicos de código CSS para empezar, luego aplíquelos a sus propias páginas web.

Leer siguiente

Sobre el Autor