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.

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.

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.

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.

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.

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).