CSS (hojas de estilo en cascada)

5.3. Unidades

Hay unidades absolutas y relativas.

Unidades absolutas

Definen el tamaño en términos generales: “esta capa mide 500 píxeles de ancho (500px)” o “este texto tiene un tamaño de 15 puntos (15pt)”.

La unidad absoluta más habitual son los píxeles (px), aunque también existen otras (in, pt...) con las que tal vez os encontréis en alguna ocasión.

Unidades relativas

Usamos unidades relativas para definir el tamaño de un elemento en función del tamaño del que lo contiene.

Por ejemplo: si todo el contenido de mi página en una capa que tiene un ancho del 50%, esa capa ocupará la mitad de la página. Si dentro de esa capa tengo otra capa que tiene un ancho del 50%, esa capa ocupará la mitad de la primera (es decir: el 25% de mi página). Su tamaño depende del tamaño de la anterior.

Las unidades relativas se utilizan para hacer diseños flexibles (una web que ocupa, por ejemplo, el 100% de la pantalla, con independencia de la resolución de pantalla que tenga el usuario).

También se utilizan muy a menudo en los textos: se define un tamaño de texto para todo el documento, y a continuación, se especifica el tamaño cada elemento. Por ejemplo: los títulos de primer nivel son un 150% más grandes que el texto normal:

h1{
    font-size:150%;
} 

Las dos unidades relativas más habituales son % (ya la hemos comentado) y em (hace referencia al tamaño de la letra M: “mide veinte emes de ancho”. Depende, por tanto, del tamaño de letra del documento: si amplío el tamaño de letra desde el navegador, el tamaño del elemento aumentará).

Hay que tener cuidado a la hora de utilizar unidades relativas, porque unos elementos afectan a otros, pero es recomendable utilizarlas; sobre todo en los textos, para facilitar al usuario su ampliación.