AVISO: Entrada para principiantes.

Esta entrada va dirigida a gente sin conocimientos de CSS. Si ya estás minimamente familiarizado con el uso de hojas de estilo, puede que esto no te interese.

Aún así, quien sabe, quizás aprendas algo que se te había pasado por alto. O, mejor aún, igual puedes aportar algo a través de los comentarios.

1. Qué es CSS

CSS son las siglas de Cascading Style Sheets, que traducido al español sería algo así como Hojas de estilo en cascada. Analicemos ese nombre:

Son hojas de estilo:

CSS son hojas de estilos. Esto quiere decir que son unos documentos (de extensión .css) que contendrán información acerca del estilo de una página web. Por “estilo” se debe entender todo aquello que afecta a la apariencia de lo que se ve en pantalla (colores, tamaños, posiciones, etc…).

p /* Esto da un color gris oscuro a todos los párrafos de una página web */
{
color: #222222;
}

Son en cascada:

Las CSS son hojas de estilo en cascada. Lo de cascada viene por la forma en que se aplican los estilos de forma jerárquica y hereditaria. Basicamente quiere decir que, aprovechando que las páginas web se programan de forma jerárquica, los estilos se irán heredando desde los elementos más importantes hacia los que se van anidando dentro de ellos.

<div id="contenedor" class="estilo">
Esto hereda el estilo del contenedor por estar anidado en él.
</div>

Separar el contenido de su representación

La gran ventaja de las hojas de estilo CSS es que permiten separar el contenido de su apariencia. Esto se puede ver muy claramente en CSS Zen Garden. Ahí podéis ver un mismo archivo html (el contenido) que cambia completamente su apariencia según qué css se le aplique (el estilo).

2. Cómo cargar una hoja de estilos.

Lo primero de todo es saber cómo se carga una hoja de estilos en la página web para que se empiecen a aplicar. Es muy sencillo; solo hay que añadir una línea en el head de la página:

...
<!-- Así cargamos y aplicamos la hoja de estilos 'estilo.css' -->
<link rel="stylesheet" type="text/css" href="estilo.css" />
...

También es posible aplicar diferentes hojas de estilos según el dispositivo que esté accediendo a la página. Por ejemplo, es posible aplicar una hoja de estilo diferente cuando la página vaya a imprimirse:

...
<!-- Este estilo se aplicará al imprimir y al previsualizar para impresión -->
<link rel="stylesheet" type="text/css" media="print" href="print.css" />
...

3. Aplicar un estilo a todos los elementos de un mismo tipo.

El uso más básico que se le puede dar a una hoja de estilos es el de modificar, a lo bestia, todos los elementos de cierto en una página.
Es posible, por ejemplo, hacer que todos los enlaces aparezcan en rojo y sin subrayado en lugar de azules y subrayados. Esto se consigue escribiendo el nombre del tipo y, justo a continuación, las propiedades de estilo encerradas entre llaves:

/* Escribimos una 'a' sin más. Esto identifica todos los enlaces de la página
(recuerda que los enlaces en html se indican con <a href="..."></a>*/
a
{
color: #FF0000; /* #FF0000 es un rojo en formato hexadecimal. */
text-decoration: none; /* Esto elimina el subrayado de los enlaces. */
}

4. Aplicar un estilo a un único elemento.

En el polo opuesto al punto anterior, lo que haremos ahora es aplicar un estilo a un elemento único dentro de la página web. Para esto tendremos que identificarlo usando la propiedad “id” de ese elemento:

...
<p id="parrafoUnico">
Este párrafo será unico en la página y le aplicaremos
un estilo exclusivo.
</p>
...

Una vez lo tenemos identificado, pasamos a escribir el estilo en el archivo css. Para aplicar estilos a elementos identificados a través de “id” usamos la almohadilla (#):

/* Este estilo se aplicará, solamente, al elemento con id="parrafoUnico" */
#parrafoUnico
{
color: red; /* Muchos colores tienen nombre propio. Así no tenemos que saber
su código hexadecimal */
font-size: x-large; /* Hay muchas formas de indicar tamaños de fuente (en píxeles,
relativo, etc...).
En este caso, utilizamos uno de los tamaños predefinidos. */
font-weight: bold; /* Esto lo pone en negrita. */
}

5. Aplicar un estilo a todos los elementos de una clase.

Cuando se escribe el código de una página web, es posible dar una clase a los elementos de la misma. Esto se consigue con la propiedad “class” de los elementos:

<p class="importante">
A este párrafo se le aplicará la clase "importante" del css.
</p>

Después, hacemos algo muy similar a lo de antes, solo que cambiando la almohadilla por un punto (.):

.importante
{
background-color: red; /* Esto le da un color de fondo al elemento. */
color: white;
font-size: 1.5em; /* Así se aplica un tamaño de forma relativa.
Esto suele ser un poquito lioso si no se usa con cuidado.*/
padding: 0.5em; /* La propiedad 'padding' introduce un espacio alrededor del
contenido del elemento, pero "por dentro". Se entiende mejor
al verlo comparado con la propiedad 'margin'. */
}

Conclusión. Seguir aprendiendo.

Con estos cinco pasos ya sabes hacer lo más básico de css, pero notarás que te falta “vocabulario” y seguramente te cueste avanzar porque casi no conoces las propiedades. Por suerte, hay muchísima documentación sobre CSS en internet y no te costará encontrar otras guías y tutoriales que te ayuden a ir avanzando.

Otros enlaces:

1. CSS en la Wikipedia
2. W3Schools: La mejor página para aprender a hacer páginas web.
3. CSS Zen Garden: Una página que muestra el potencial de las hojas de estilo. Es una página que cambia completamente su apariencia (gracias a diferentes hojas de estilo) sin cambiar el código html.

Otras partes de esta serie:

Esta entrada es la última parte de la serie “Cinco cosas que debes sabre sobre CSS”:

1. Cinco cosas básicas que debes sabre sobre CSS (aprende CSS en 5 pasos)
2. Cinco cosas (menos básicas) que debes saber sobre CSS
3. Cinco cosas avanzadas que debes saber sobre CSS