CSS Color del Texto

En este tutorial rápido nosotros le enseñaremos cómo utilizar CSS para cualquier texto HTML color elemento mediante una etiqueta HTML, ID o clase. Si no está familiarizado con estilos CSS, vea a nuestro tutorial de introducción a CSS colores aquí.

CSS color de texto con una etiqueta HTML

Para empezar, el estilo algún texto básico. Utilizaremos la etiqueta <h1> en este ejemplo, pero se puede aplicar estilos a casi cualquier elemento de texto mediante CSS. A continuación se muestra el ejemplo documento HTML, que es muy sencilla página con sólo un título y un breve párrafo. 

HTML

<head>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>

Color de la <h1> elemento rojo. En el <head> de nuestro documento HTML añadiremos un estilo CSS para la <h1> elemento, lo que cambia el color de la forma predeterminada negro al rojo. 

HTML

<head>
  <style>
    h1 { color: #FF0000; }
  </style>
</head>
<body>
  <h1>Title</h1>
  <p>Some paragraph text.</p>
</body>
Demo en CodePen

CSS color de texto utilizando un ID

Otra manera en que podemos moldear el <h1> elemento es por lo que le da la ID en este ejemplo vamos a utilizar el ID de 'heading'. IDs puede ser un estilo mediante CSS en la misma forma que las etiquetas HTML, pero van precedidos de un símbolo '#'. 

HTML

<head>
  <style>
    #heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 id="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
Demo en CodePen

CSS color de texto mediante una clase

Un tercer método para agregar color a los elementos HTML es mediante clases, muy similar a IDs, salvo que van precedidos de un punto '.' en lugar de un '#'. Aquí aplicamos el mismo CSS color a la <h1> elemento pero con una clase denominada 'heading'. 

HTML

<head>
  <style>
    .heading { color: #FF0000; }
  </style>
</head>
<body>
  <h1 class="heading">Title</h1>
  <p>Some paragraph text.</p>
</body>
Demo en CodePen