CSS es un lenguaje de hojas de estilos el cual fue creado para dar diseño y presentación a documentos HTML y XML. Su finalidad es separar contenidos de la presentación de la página web, lo cual lo hacemos creando un archivo con extensión CSS y vinculándolo a un archivo de extensión HTML mediante la etiqueta link y el atributo href.

Este lenguaje nos ayuda a realizar modificaciones sobre el aspecto de cada etiqueta HTML; para dar diseño lo podemos hacer de dos formas mediante el atributo style o los identificadores id y class. Cuando utilizamos el atributo style se debe agregar el CSS directamente en la etiqueta, ejemplo:

Style

<h1 style="color: yellow;background: silver;padding: 10px;text-align: center;"> Texto Título</h1>

Título

Identificadores Id y Class

<h1 id="titulo-principal" class="titulo">Título Principal</h1>
<h1 id="titulo-secundario" class="titulo">Título Secundario</h1>

El atributo id es para identificar elementos como únicos, y el atributo class es para compartir aspectos entre elementos. Por ejemplo, en el código anterior podemos ver que cada H1 tiene un, id diferente y poseen el mismo class, entonces, vamos a programar el CSS de cada atributo para que ver la diferencia.

/* Para declarar un id se antepone un # y para un class se antepone un . */ 
#titulo-principal{ background: yellow; text-align: left; }
#titulo-secundario{ background: orange; text-align: right; }
.titulo{ color: green; padding: 20px 30px; text-decoration: underline; }

Título Principal

Título Secundario

Hemos podido visualizar que existen aspectos compartidos y otros diferentes entre los títulos, el atributo id de cada etiqueta tiene un color de fondo y una alineación de texto diferente, en cambio el atributo class es el mismo para los dos títulos, por ende el color, el padding y text-decoration son iguales para las dos etiquetas H1.

Al igual que el HTML el CSS también puede ser validado debido a los estándares creados por la W3C.