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