Usando CSS: CSS estructural 1

Si hiciste todo como te dije en el post anterior, deberías tener una más o menos estructura definida con el HTML —y más importante: bien definida en tu cabeza—.

Selectores

Para que el navegador sepa a qué elementos aplicar un estilo, tiene que saber cómo encontrarlo.

Para hacer referencia los elementos mediante sus ids, usamos el prefijo #. Un elemento con id header recibe sus estilos de reglas con el nombre #header.

Si queremos hacer referencia a todos los tags de un cierto tipo (por ejemplo, todos los links), usamos simplemente su nombre (en este caso, a).

Y para hacer referencia a todos los descendientes¹ de un elemento, separamos los selectores correspondientes con un espacio. Para elegir a todos los links del menú, usaríamos #menu a.

Y ahora podemos aplicar…

Tamaños

Un elemento de bloque, como div, por defecto, es tan ancho como pueda para llenar su contenedor (su padre), y tan alto como para que todo su contenido quepa.

Para hacer que el cuerpo de nuestro diseño sea más angosto, aplicamos una regla como

#cuerpo {
    width: 500px;
}

Si quisieramos definir la altura de un elemento, usaríamos la propiedad height.

Ahora, si quisieramos que nuestra cabecera aparezca centrada, primero le definimos un ancho como antes (el alto no es necesario, por ahora), y para centrar usamos márgenes automáticos. Agregamos las reglas margin-left: auto; margin-right: auto; a las anteriores, y, magia —excepto en IE—, ahora tenemos un lindo div centrado.

Pero aunque el div está centrado, el texto en su interior, no. Si quisiéramos eso, bastaría con text-align: center;.

Si usaste un CSS reset, como recomendé, ahora verás que las cosas están muy pegadas. La solución es fácil: márgenes.

La propiedad margin puede tomar entre 1 y 4 argumentos, aunque para hacerlo fácil, vamos con los dos casos extremos: un argumento aplica el mismo margen a los cuatro bordes, y 4 argumentos permiten especificar un valor para cada uno. Igual que antes, simplemente ponemos el selector, seguido por las reglas encerradas entre llaves.

Un par de detalles, antes de dejarlos a la espera del próximo post:

CSS significa “Hojas de Estilo en Cascada”, y lo de Cascada significa que si dos reglas se aplican dos veces a un mismo elemento, la última sobreescribe a las anteriores.

Además, hay otras unidades que podemos usar: el em, que (en teoría) es igual al ancho de una M, y a la altura de la fuente es la más común (por ejemplo, para separar los párrafos, lo normal es agregarle un margin-bottom: 1em;). El problema del em es que este depende del tamaño del texto del elemento (que definimos con font-size). Es decir, si le damos un margen de 1em a un texto de 10px de alto, este medirá el doble que un margen de 1em en un texto de 5px de alto.

Y, finalmente, la separación entre cada línea del texto definimos line-height, que no necesita una unidad (si no la tiene, su valor se multiplica por el tamaño del texto). (Valores que quedan bien son entre 1.2 y 1.5 para fuentes sans-serif —como Verdana—, y entre 1.4 y 1.7 para fuentes serif —como Times New Roman—.)