Cambiar el color a nivel general

Dentro de una web existen diferentes elementos como títulos, párrafos de texto, listas, etc.

Gracias al CSS y a la propiedad «color», a cada uno de estos elementos se les puede dar un color diferente, veamos algunos ejemplos:

Copiar

Con selectores de texto

Gracias a los selectores CSS podemos seleccionar ciertas partes de nuestro texto para pintarlo del color que queramos.

Para ello, podemos «marcar» los elementos con una clase o con un id (los selectores) e indicar que cuando el texto tenga ese selector, los pinte de un determinado color.

Hay una buenas prácticas entre usar las clases o los ids para seleccionar contenido, si quieres saber más, aquí tienes más info.

Podemos referenciar un párrafo o una palabra usando una clase o un id, para ello hay que dar el nombre a la clase y/o del id.

Luego en el código CSS indicaremos el de los selectores indicados.

Si usamos un id, en el CSS, se debe indicar con la almohadilla «#» y el nombre del id

Si usamos una clase, en el CSS, se debe indicar con un punto «.» y el nombre de la clase

Código HTML

Copiar

Código CSS

Copiar

Resultado

Este texto será de color normal

Este texto será de color naranja

Texto de color azul

Cambiar el color de una palabra dentro de una frase o párrafo

Suponer una frase, en ella se quiere remarcar ciertas palabras de otro color, para ello vamos a usar el elemento «span» y una clase.

Código HTML

Copiar

Código CSS

Copiar

Resultado

Estas palabras aparecen en otro color

Utilizando estilos en línea

Utilizar estilos en línea signfica añadir sobre el mismo elemento html los estilos CSS que quieras, sin usar clases o ids, tan solo indicas las propiedades que quieres, en este caso de color, y listo.

Código HTML y CSS incrustado, ejemplo #1

Copiar

Resultado ejemplo #1

Estas palabras salen rojo

Puedes usar el elemento «span» para que, con los estilos en línea, puedas cambiar frases o palabras de colores.

Código HTML y CSS incrustado, ejemplo #2

Copiar

Resultado ejemplo #2

Estas palabras salen rojo, pero estas en verde ¡Mola!

Dónde insertar el CSS

Existen varios sitios donde puedes insertar este CSS, la forma «más sencilla» es que vayas, dentro del menú de la administración de tu WordPress, a Apariencia > Personalizar > CSS Adicional.

Ahí puedes introducir el CSS que necesites.

Añadir CSS personalizado en WordPress

Cambiar el color de texto de los enlaces

Los enlaces se representan por el elemento «a» en HTML.

Si quieres cambiar el color de los enlaces debes usar el siguiente código CSS.

Copiar

Cambiar el color del textos los enlaces cuando pasas el ratón por encima

Seguramente también quieras modificar el color del enlace al situar el ratón por encima, para ello, debes usar la pseudo-clase «hover».

El hover indica los estilos que se deben aplicar a un elemento cuando el ratón está encima de ese elemento.

Copiar

Conclusión

Estos serían unos casos muy sencillos para empezar a cambiar los colores de los textos de una web, práctica y juego con ello, ¡hay una gran comunidad en Internet que ofrece mucha información!

¡Valora este artículo y ayúdame a mejorar la calidad del blog, si no te ha servido, déjame un comentario para revisarlo!
(Votos: 4 Promedio: 5)