Es fácil cambiar el color del texto en su sitio web con HTML

Es fácil cambiar el color del texto en su sitio web con HTML

Es fácil cambiar el color del texto en su sitio web con HTML

VALORACIÓN DEL ARTÍCULO:
5/5


En un momento en que el desarrollo web es más popular que nunca, vale la pena saber cómo doblar el HTML a su voluntad. En este tutorial, aprenderá un truco simple de ese conjunto de habilidades: cambiar el color del texto.

Índice de contenidos

3 maneras de configurar las pantallas de color

Como lenguaje con todas las funciones, HTML le ofrece una variedad de formas de infundirle a su HTML prácticamente cualquier aspecto. Para establecer el color del texto, esta guía cubrirá los tres métodos principales de estilismo.

La primera es alterar directamente la etiqueta que envuelve el texto designado para el cambio de color. Si sólo necesita colorear uno o dos trozos de texto, es probable que sea así como quiera hacerlo.

La segunda es añadir una sección de estilo en la parte superior de su documento HTML. Esto puede ser lo mejor si sus necesidades de estilo son un poco más complicadas, pero aún así restringidas a una sola página HTML.

Por último, está la creación de una hoja de estilo CSS separada y el enlace a ella en el documento HTML. Esto es ideal si tiene necesidades exigentes de color, especialmente aquellas que abarcan múltiples documentos HTML.

3 maneras de especificar colores

En HTML, los colores se pueden especificar de varias maneras, cualquiera de las cuales se puede proporcionar junto con la palabra clave «color» en las siguientes direcciones.

La más simple es usar un nombre de color inglés como «verde» o «cian». Una vez más, si su tarea es lo suficientemente sencilla, esto puede hacer el truco, pero sepa que el vocabulario de HTML a este respecto es limitado.

Otro enfoque es establecer un valor de color RGB, donde se dan tres magnitudes, una para la intensidad del color compuesto de rojo, verde y azul, respectivamente. Si desea ajustar el sombreado en un color estándar, o conocer el valor exacto del tono que desea, esto es para usted.

Por último, puede proporcionar un valor de color hexadecimal, que es un signo de libra separado por un número hexadecimal de seis dígitos. Si quieres ser preciso con tus colores, haz esta ruta.

Programas que necesitará para configurar los colores HTML

El kit de herramientas mínimo para ajustar el color de las palabras en HTML es un programa para editar el propio HTML, y un navegador para probarlo. Puede editar HTML en un editor de texto, un programa simple como el Bloc de notas que escribe texto puro o un editor de código optimizado para procesar la sintaxis de programación. No se puede utilizar un procesador de textos como Microsoft Word, LibreOffice o Google Docs porque estos programas insertan un formato invisible llamado «caracteres de control» que son incompatibles con HTML.

Cualquier navegador web mostrará el archivo HTML que desee examinar. Para comprobar su trabajo, cualquier navegador web lo hará – sólo tiene que ir a la carpeta que contiene su archivo HTML y hacer clic en él, y su navegador debería renderizarlo. Si no es así, haga clic con el botón derecho del ratón sobre el archivo y ábralo explícitamente con su navegador.

Método 1: Envolver el texto en etiquetas con estilo de color

La técnica más sencilla para colorear el texto es añadir el atributo «style» y el valor deseado, compuestos conjuntamente por la palabra clave «color» y la especificación de color (el código hexadecimal, el código RGB o el nombre), a la etiqueta HTML que envuelve el texto de destino. Si desea ajustar el texto que ya está envuelto en una etiqueta, como una etiqueta

, sólo tiene que ir a la etiqueta de apertura e insertar lo siguiente antes del ángulo de cierre (es decir, el signo «menos que»): un espacio, la palabra «estilo» (sin comillas), un signo igual y, a continuación, todo dentro de un conjunto de comillas, la palabra clave «color», dos puntos, espacio y la especificación de color que desee.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Si el texto que está alterando no está encajado entre las etiquetas -quizás sólo quiera ajustar parte del texto que habita en un elemento -simplemente puede envolverlo en una etiqueta y añadir el atributo de estilo con la palabra clave de valor de color y la especificación como se indica arriba.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Método 2: Añadir una sección de estilo en el encabezado del documento HTML

En la sección de su documento HTML (es decir, antes del HTML que muestra el navegador), añada un elemento que incluya una etiqueta HTML o nombres de clase y la configuración de color correspondiente que consista en la palabra clave «color» y la especificación de color.

Los nombres de las etiquetas HTML aquí son los mismos que los especificados dentro de la sección pero sin los corchetes angulares. Por ejemplo, la

especificada en es sólo «p» (no citada). Después de cada etiqueta a estilizar, y un espacio, hay una subsección encerrada por llaves rizadas que contienen la palabra clave «color» y la especificación del color.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Sin embargo, también puede cambiar el estilo de HTML por clase, que es como una etiqueta que puede aplicar para seleccionar instancias de una etiqueta dentro de la sección . Por ejemplo, si sólo desea que una etiqueta en particular sea colorida, puede crear una clase con un nombre personalizado preparado para el período en la sección , con la misma palabra clave de color y especificación que usaría al diseñar una etiqueta, y luego establecer la etiqueta de destino con «class» (sin comillas) como el atributo y ese nombre de clase, sin el punto pero entre comillas, como el valor.

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha

Método 3: Creación y enlace de un documento CSS separado

La manera más organizada de establecer el color del texto y una gama infinita de otros estilos es crear una hoja de estilo CSS separada y enlazarla a ella en la sección del documento HTML. Esto funciona igual que el enfoque de la sección excepto que en lugar de hacer etiquetas y declaraciones de clase dentro de dentro del propio documento HTML, se declara en un documento CSS dedicado. Esto no sólo agrega todos sus estilos en un solo lugar, sino que permite que múltiples documentos HTML incorporen las mismas convenciones de estilo sin duplicación.

Simplemente ponga sus estilos, formateados como lo haría en una sección anidada en la sección de su HTML, en un documento separado con un nombre terminado en «.css». A continuación, añada una etiqueta independiente (se cierra automáticamente, sin ninguna contrapartida dentro del de su documento HTML con un atributo «href» sin comillas cuyo valor adjunto se establece al nombre de su documento CSS, y un atributo «rel» (de nuevo, sin comillas) con un valor «hoja de estilos» (sí, comillas).

Editor de código con secciones HTML y resaltadas a la izquierda y una vista previa HTML y resultados resaltados a la derecha, y un panel de edición CSS con secciones resaltadas en la parte inferior

TAMBIÉN TE INTERESA

ordenador sobremesa Deep Gaming

Deep Gaming, la marca española confiable para personalizar un PC

Como en casi todos los ámbitos, en el mundo del gaming hay dos tipos de personas: los que apuestan un por un PC ya configurado o los que quieren personalizar su PC. Para estos últimos, Deep Gaming es una gran opción para empezar a poner a punto su setup. Hablamos de una marca española con

Qué es un CDN y por qué es relevante

Cómo mejorar la experiencia web con un CDN

Imagínate visitar un sitio web y tener que esperar largos segundos para que se cargue cada página o imagen. Esta experiencia frustrante no solo afecta nuestra paciencia, sino que también puede influir negativamente en la percepción de una marca o empresa. Aquí es donde entra en juego el CDN, o Content Delivery Network, una tecnología

como detectar ofertas de trabajo falsas

Ojo con las ofertas de trabajo falsas: aprende a detectarlas

Las ofertas de trabajo falsas están a la orden del día. En muchos casos parecen reales porque coinciden en un momento en el que estamos en búsqueda activa de empleo. Puede que nos hallamos inscrito a un proceso de selección en LinkedIn y, de repente, alguien intenta contactar con nosotros por mail o WhatsApp. A

portatil gaming HP OMEN 17

Nuevo HP OMEN 17: un portátil gaming grande en todos los sentidos

HP ha lanzado una nueva línea de dispositivos OMEN y HyperX diseñados para ofrecer una experiencia de juego más inmersiva y fluida. Esta nueva gama incluye ordenadores, accesorios, periféricos y software que se adaptan a todo tipo de jugadores, desde profesionales hasta aquellos que están eligiendo su primer PC. Entre las nuevas incorporaciones se encuentran