Cómo cambiar el color del texto y el fondo en CSS

CSS (hojas de estilo en cascada) es un lenguaje que le permite crear hermosos sitios web.

Con la sintaxis de color de texto CSS, puede especificar el color de texto exacto en su sitio web. Esta sintaxis es esencial ya que aumenta la facilidad de uso y la accesibilidad de su sitio web y otro material de marketing.

Ya sea que esté creando desde cero o usando BootStrap CSS, necesitará algunos conocimientos de HTML y CSS. En este artículo, veremos cómo cambiar el color del texto y el fondo en CSS.

Su sintaxis se da como color: color/inicial/heredar;.

Por otro lado, la propiedad background-color especifica el color de fondo del elemento. Esta propiedad cubre todo el tamaño del elemento, incluido el relleno y el borde. Sin embargo, no incluye el margen.

Su sintaxis es: {propiedad de color de fondo} elemento.

Opciones de color de fondo y texto CSS

Cambiar el color del texto en una página web es fácil con la propiedad de color CSS.

Antes de ver lo importante que es comprender las diferentes formas de establecer valores de propiedad. Puedes usar:

• Nombres de colores HTML: CSS admite 140 nombres de colores. Amarillo, fucsia, granate y azul cielo son solo algunos ejemplos.
• Códigos de colores hexadecimales: Estos códigos constan de tres pares de caracteres que representan la intensidad de los tres colores primarios. Los valores posibles van desde 00 (menor intensidad del color base) hasta FF (mayor intensidad del color base). El código de color hexadecimal para el negro es # 000000, el rojo es # FF0000 y el azul es # 0000FF.

Fuente de imagen

• valores RGB: RGB es otro modelo de color basado en una combinación de los colores primarios rojo, verde y azul. Consta de tres números separados por comas, cada uno de los cuales representa la intensidad del color base correspondiente como un número entero entre 0 y 255. El negro es RGB (0, 0, 0), el rojo es RGB (255, 0, 0) y el azul es RGB (0, 0, 255).

Fuente de imagen

Descargar ahora: Guía gratuita de introducción a HTML y CSS

Si bien puede usar cualquiera de estos valores, no se recomiendan los nombres de color. Son difíciles de recordar más allá del arcoíris estándar, pero también introducen imprecisión. Por ejemplo, el fucsia de una persona puede ser el magenta de otra, el rosa intenso de otra, etc.

En su lugar, use códigos de color hexadecimales o valores RGB para asegurarse de que el esquema de color de su sitio web se vea como usted desea. Le permiten elegir el tono exacto del color deseado. En los ejemplos a continuación, usaremos códigos de color hexadecimales, ya que son más fáciles de usar para principiantes.

Ahora veamos cómo cambiar el color y el color de fondo del texto integrado en CSS.

Quizás se pregunte qué sucederá si no establece la propiedad de color en su CSS. Esta es una buena pregunta. El color de texto predeterminado en la página se define en el selector de contenido. Este es un ejemplo de un selector de contenido que configura el texto en azul:

Consejo para profesionales: Este código es interactivo, intente cambiarlo para ver la diferencia.

 
 
   body {
  color: blue;
}
 

Si no se define ningún selector de contenido o color en el selector de contenido, lo más probable es que el color predeterminado sea el negro.

Así que digamos que quiero cambiar el color de mis párrafos a azul marino como se menciona en el ejemplo anterior y todos los enlaces en mi sitio web a aguamarina. Entonces usaría el selector p del selector de atributos a[href] y establezca la propiedad de color en # 000080 y # 00FFFF respectivamente.

Aquí está el CSS:

Consejo para profesionales: Este código es interactivo, intente cambiarlo para ver la diferencia.

 
 
   p {
  color: #000080;
}
a[href] {
  color: #00FFFF;
}
 

Aquí está el código HTML:

Consejo para profesionales: Este código es interactivo, intente cambiarlo para ver la diferencia.

 
 
   <p>This is a  paragraph. The default text color was black, but I added a paragraph selector and defined the color property so it's navy.You'll see that the paragraph below is also navy, except for the link. Using a separate selector, the color of links has been changed to aqua.</p>
<p>Another paragraph that has <b><a href="https://blog.hubspot.com/website/default.asp" target="_blank">a link.</a></b></p>
 

Aquí está el resultado:

ver la pluma Cambiar el color del texto en una fila en CSS por HubSpot (@hubspot) en CódigoPen.

Puede utilizar el mismo proceso para cambiar el color de los encabezados, los marcadores de intervalo, las copias de los botones y cualquier otro texto de la página. Ahora echemos un vistazo a cómo cambiar el color de fondo de su texto.

Cambiar el color de fondo del texto en CSS

Para cambiar el color de fondo del texto en línea, vaya a. Solo agrega el apropiado Selector de CSS y defina las propiedades de color y color de fondo con los valores deseados. Suponga que desea cambiar el color de fondo de los enlaces a amarillo. Luego agregue el siguiente código:

Consejo para profesionales: Este código es interactivo, intente cambiarlo para ver la diferencia.

 
 
  a[href] {
   color: #000000;
   background-color: #FFFF00;
}
 

color de fondo css

La propiedad CSS background-color le permite: cambiar el color de fondo de un elemento HTML. Puede establecer el color de fondo para muchos elementos, incluidos la tabla, el div, el encabezado y el intervalo.

Al definir una propiedad de color, también debe definir un color de fondo. El cumplimiento de W3C CSS y otros marcos es imprescindible, y de lo contrario no le hará daño.

Comprobación del contraste de color

También es necesario cambiar el color de fondo y el color de su texto para evitar problemas con disponibilidad de la red De tu lado.

Echa un vistazo a la demostración anterior de nuevo.

Si bien los colores utilizados pueden ser demasiado similares para las personas que no pueden ver diferentes tonos de color, el subrayado ayudará a indicar que se trata de un enlace.

Pero, ¿qué pasa si elimino el subrayado de los enlaces en mi sitio? Entonces confiaría en el color mismo para transmitir que es una conexión. Entonces tendría que identificar y utilizar los colores disponibles en la web en mi sitio web.

Tomará tiempo e investigación. Sin embargo, si recién está comenzando a investigar el daltonismo, esta herramienta es como controlador de contraste puede ayudarlo a elegir opciones disponibles al cambiar el color del texto en su sitio.

Puede ingresar un color de fondo y un color, y si el par tiene una relación de contraste de 4.5: 1, se le notificará un «aprobado». Todo lo inferior fallará. Usaremos esta herramienta de identificación de colores en el siguiente ejemplo.

Digamos que quiero que el texto sea rojo y el fondo gris. Puedo empezar conectando el #FF0000 y el #808080 a un Contrast Controller y ver que solo tiene una relación de contraste 1:1. Esto no está bien.

Para ajustar la relación de aspecto, moveré el control deslizante de color de primer plano hacia la izquierda y el control deslizante de color de fondo hacia la derecha hasta que alcance un mínimo de 4,5: 1.

Como quiero que mi diseño sea lo más limpio posible, elegiré el color #940000 y el color de fondo #E0E0E0, que tiene una proporción de 7:1.

Los usaré para diseñar el enlace para que realmente se destaque del resto del párrafo.

Aquí está el CSS:

Consejo para profesionales: Este código es interactivo, intente cambiarlo para ver la diferencia.

 
 
   a[href] {
  color: #940000;
  background-color: #E0E0E0;
  text-decoration: none;
}

Aquí está el código HTML:

Consejo para profesionales: Este código es interactivo, intente cambiarlo para ver la diferencia.

 
 
   <p>This is a  paragraph. The default text color is black. You'll see that the paragraph below is also black, except for the link. Using an attribute selector, I've set the color, background color, and text decoration property so that it appears with a reddish font color, gray background, and no underline.</p>
<p>Another paragraph that has <b><a href="https://blog.hubspot.com/website/default.asp" target="_blank">a link</a></b>.</p>

Aquí está el resultado:

ver la pluma Cambiar el color de fondo del texto en CSS por HubSpot (@hubspot) en CódigoPen.

Agregando color a tu sitio web

Es fácil cambiar el color y el color de fondo del texto en su sitio web. Con un poco de conocimiento de CSS y HTML, será más fácil para usted construir o crear su propio sitio web.

Sin embargo, llevará tiempo aprender los nombres y los códigos de color y cómo combinarlos para alojar su sitio web y otro material de marketing, lo que le brinda otra razón para comenzar a agregar colores a su sitio web hoy.

Nota del editor: esta publicación se publicó originalmente en abril de 2021 y se actualizó para que sea completa.