Saltar al contenido

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

febrero 3, 2022
Site owner changing text and background color in CSS.jpgkeepProtocol

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

Antes de ver cómo, es importante comprender las diferentes formas en que puede establecer el valor de la propiedad. Puedes usar:

  • Nombres de colores HTML: Hay 140 nombres de colores admitidos en CSS. Amarillo, fucsia, granate y celeste son solo algunos ejemplos.
  • Códigos hexadecimales de colores: estos códigos están compuestos por tres pares de caracteres que representan la intensidad de los tres colores primarios. Los valores posibles van desde 00 (la intensidad más baja de un color primario) hasta FF (la intensidad más alta de un color primario). El código de color hexadecimal para el negro es #000000, el rojo es #FF0000 y el azul es #0000FF.
  • valores RGB: RGB es otro modelo de color basado en la combinación de los colores primarios rojo, verde y azul. Compuesto por tres números separados por comas, cada uno representa la intensidad del color primario respectivo 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).

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

Si bien puede usar cualquiera de estos valores, no se recomiendan los nombres de colores. No solo son difíciles de recordar más allá del arco iris estándar, sino que también introducen imprecisión. El fucsia de una persona puede ser el magenta de otra, el rosa intenso de otra, y así sucesivamente.

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

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

Quizás se pregunte qué sucede si no establece la propiedad de color en su CSS. Buena pregunta. El color de texto predeterminado para una página se define en el selector de cuerpo. Aquí hay un ejemplo de un selector de cuerpo que establece el color del texto en azul:

 

 

   body {

  color: blue;

}

 

Si no hay ningún selector de cuerpo o color definido en el selector de cuerpo, lo más probable es que el color predeterminado sea el negro.

Entonces, 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 de tipo p y el selector de atributos a[href] y establezca la propiedad de color en #000080 y #00FFFF, respectivamente.

Aquí está el CSS:

 

 

   p {

  color: #000080;

}

a[href] {

  color: #00FFFF;

}

 

Aquí está el HTML:

 

 

   <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="http://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 línea en CSS de Christina Perricone (@hubspot) sobre CódigoPen.

Puede usar este mismo proceso para cambiar el color de los encabezados, las etiquetas de intervalo, la copia de botones y cualquier otro texto en una página. Ahora veamos cómo cambiar el color de fondo del texto.

Cambiar el color de fondo del texto en CSS

Para cambiar el color de fondo del texto en línea, vaya a la sección de su página web. Simplemente agregue el selector de CSS apropiado y defina el color y la propiedad de color de fondo con los valores que desee. Digamos que desea cambiar el color de fondo de los enlaces a amarillo. Entonces agregarías el siguiente código:

 

 

  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 un elemento de tabla, div, encabezado y tramo.

Al definir la propiedad de color, también debe definir el color de fondo. Es necesario cumplir con W3C CSS y otros marcos y de lo contrario no duele.

Comprobación del contraste de color

Cambiar el color y el color de fondo del texto también es importante para evitar problemas de accesibilidad web en su sitio web.

Eche otro vistazo a la demostración de arriba. Si bien los colores utilizados pueden ser demasiado similares para las personas que no pueden ver diferentes tonos de colores, el subrayado ayudaría a indicar que se trata de un enlace. Pero, ¿qué pasa si eliminé el subrayado de los enlaces en mi sitio? Entonces estaría confiando solo en el color para transmitir que era un enlace. En ese caso, necesitaría identificar y usar colores accesibles en la web para mi sitio web.

Esto llevará tiempo e investigación. Si recién está comenzando a investigar el daltonismo, entonces una herramienta como Comprobador de contraste puede ayudarlo a tomar decisiones accesibles al cambiar el color del texto en su sitio.

El uso del verificador de contraste puede ayudarlo a tomar decisiones accesibles al cambiar el color de fondo del texto en CSSPuede ingresar un color y un color de fondo y le dirá «aprobado» si el par tiene una relación de contraste de 4.5:1. Cualquier cosa inferior fallará. Usaremos esta herramienta para identificar los colores en el siguiente ejemplo.

Digamos que quiero que mi texto sea rojo y que el fondo sea gris. Podría comenzar conectando #FF0000 y #808080 en Contrast Checker y ver que solo tiene una relación de contraste de 1:1. Eso no es bueno.

La herramienta Contast Checker muestra una proporción de 1:1 de fondo rojo y gris

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

Mover los controles deslizantes para cambiar el texto y los colores de fondo con la herramienta Contrast Checker hasta que pasen las pautas de WCAGComo quiero asegurarme de que mi diseño sea lo más claro posible, seleccionaré el color #940000 y el color de fondo #E0E0E0, que tiene una proporción de 7:1.

Selección de texto de alto contraste y color de fondo con la herramienta Comprobador de contrasteLos usaré para diseñar el enlace para que realmente se destaque del resto del párrafo.

Aquí está el CSS:

 

 

   a[href] {

  color: #940000;

  background-color: #E0E0E0;

  text-decoration: none;

}

Aquí está el HTML:

 

 

   <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="http://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 de Christina Perricone (@hubspot) sobre CódigoPen.

Agregar color a su sitio web

Cambiar el color y el color de fondo del texto de su sitio web es fácil. Ya sea que esté creando su sitio desde cero o con Bootstrap CSS, solo necesita algunos conocimientos de HTML y CSS. Sin embargo, tomará tiempo aprender los nombres y códigos de los colores y cómo combinarlos para que su sitio web y otras garantías de marketing sean accesibles. Solo otra razón más para comenzar a agregar color a su sitio hoy.

Nueva llamada a la acción