Cómo cambiar el color del texto en HTML

Coescrito por Personal de wikiHow

Aunque es posible cambiar el color del texto usando la etiqueta <font> en HTML, este método ya no es válido en HTML5. En su lugar, se usa el CSS básico para definir el color con el que aparecerá el texto en varios elementos de tu página. Al usar CSS te asegurarás de que tu página web sea compatible con cualquier navegador posible.

Método 1

Método 1 de 2:
Usar CSS

1
Abre el archivo HTML. La mejor manera de cambiar el color del texto es usando CSS. El antiguo atributo <font> de HTML ya no funciona con HTML5. El método preferido es utilizar CSS para definir el estilo de los elementos.
- Este método también funcionará con hojas de estilo externas (archivos CSS independientes). Los ejemplos a continuación son para un archivo HTML usando una hoja de estilo interna.
2
Coloca el cursor dentro de la etiqueta <head>. Dentro de esta etiqueta definirás los estilos en caso de que uses una hoja de estilo interna.
3
Introduce <style> para crear una hoja de estilo interna. Cuando la etiqueta <style> se encuentra dentro de la etiqueta <head>, el CSS dentro de la etiqueta <style> se aplicará a cualquiera de los elementos de la página que puedan soportarlo. Cuando acabes, el comienzo del archivo HTML será similar a esto:^{[1]
X
Fuente de investigación}
```
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
```
4
Introduce el elemento al que quieres cambiar el color del texto. Usarás la sección <style> para definir el aspecto de los diferentes elementos de la página. Por ejemplo, para cambiar el estilo de todo el cuerpo de texto de la página, introduce lo siguiente:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {

}
</style>
</head>
```
5
Introduce el atributo color: en el selector de elemento. El atributo color: le dirá a la página qué color debe usar para ese elemento. En este ejemplo, cambiará el color de todo el cuerpo de texto, el cual es el elemento por defecto para todo el texto de la página:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color:
}
</style>
</head>
```
6
Introduce un color para el texto. Es posible introducir un color de tres formas diferentes: por su nombre, valor hex o el valor RGB. Por ejemplo, para el color azul deberás introducir blue, rgb(0, 0, 255) o #0000FF.
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
</style>
</head>
```
7
Añade otros selectores para cambiar el color de varios elementos. Es posible usar los diferentes selectores para cambiar el color del texto en diferentes partes de la página:
```
<!DOCTYPE html>
<html>
<head>
<style>
body {
	color: red;
}
h1 {
	color: #00FF00;
}
p {
	color: rgb(0,0,255)
}
</style>
</head>
<body>

<h1>Esta cabecera será verde.</h1>

<p>Este párrafo será azul.</p>

Este cuerpo de texto será rojo.
</body>
</html>
```
8
Define una clase CSS en vez de cambiar un elemento. Es posible definir una clase y después aplicarla a cualquier elemento que quieras a lo largo de toda la página para añadir inmediatamente la clase de estilo. Por ejemplo, en el siguiente archivo la clase ".redtext" hará que cualquier elemento al que se aplique use texto rojo:
```
<!DOCTYPE html>
<html>
<head>
<style>
.redtext {
	color: red;
}
</style>
</head>
<body>

<h1 class="redtext">Esta cabecera será roja.</h1>
<p>Este párrafo será normal.</p>
<p class="redtext">Este párrafo será rojo.</p>

</body>
</html>
```
Anuncio

Método 2

Método 2 de 2:
Usar atributos de estilo internos

1
Abre el archivo HTML. Es posible usar los atributos de estilo internos para cambiar el estilo de un único elemento de la página. Es posible que esto sea útil para un cambio rápido o dos del estilo, pero no se recomienda para usos mayores. Para cambios de estilo más amplios, usa el método anterior.^{[2]
X
Fuente de investigación}
2
Busca en el archivo el elemento que quieras cambiar. Es posible usar los atributos de estilo internos para cambiar el color del texto de cualquiera de los elementos. Por ejemplo, en caso de que quieras cambiar el color del texto de una cabecera específica, búscala en el archivo:
```
<!DOCTYPE html>
<html>
<body>

<h1>Esta es la cabecera que quieres cambiar.</h1>

</body>
</html>
```
3
Añade el atributo de estilo al elemento. Introduce style="" dentro de la etiqueta de apertura del elemento que quieras cambiar:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="">Esta es la cabecera que quieres cambiar.</h1>

</body>
</html>
```
4
Introduce el atributo color: dentro de "". Por ejemplo:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:">Esta es la cabecera que quieres cambiar.</h1>

</body>
</html>
```
5
Introduce el color al que quieras cambiar el texto. Es posible expresar el color del texto de tres formas. Introduciendo el nombre del color, su valor RGB o su valor hex. Por ejemplo, para cambiar el color a amarillo, introduce yellow;, rgb(255,255,0); o #FFFF00;:
```
<!DOCTYPE html>
<html>
<body>

<h1 style="color:#FFFF00;">Esta cabecera será amarilla.</h1>

</body>
</html>
```
Anuncio