Fuera del mundo de los sueños, la vida puede ser dura, incluso cruel. Pero es vida.
Final Fantasy X. Auron, guardián legendario.
En la parte de XHTML hemos comentado muchas veces que podemos cambiar el aspecto de una página web mediante CSS (Cascading Style Sheets). Ahora es el momento de aprender cómo hacerlo.
Me ha costado decidirme sobre cómo explicar las diferentes propiedades del CSS, pero creo que la mejor manera de aprender sin que se haga muy pesado es poniendo ejemplos de problemas comunes con los que nos topamos, junto con la manera de solucionarlo en CSS. Después de todo, esto no pretende ser una guía de referencia con todas las propiedades y todos sus posibles valores
Googleando un poco, podrás encontrar muchas. Y siempre te queda consultar las especificaciones oficiales en la web del W3C. Es un PDF muy majo de 359 páginas..
¿Dónde escribo el código CSS?
Hay dos opciones para insertar CSS en un documento XHTML. Lo más normal es hacerlo en un archivo externo (que se llama "hoja de estilos") y enlazarlo desde nuestro documento XHTML. Esto tiene una ventaja enorme, y es que podemos tener muchas páginas enlazando a la misma hoja de estilos. Si más adelante queremos cambiar algo, sólo tenemos que modificar un único archivo (la hoja de estilos) y afectará a todas las páginas. Podemos enlazar una o más hojas poniendo esto dentro de la cabecera (<head>):
<link href="hoja_estilos.css" rel="stylesheet" type="text/css" />
La otra opción es escribir la información referente a los estilos incrustada en el mismo archivo XHTML. Lo podemos hacer escribiendo entre las etiquetas <style> y </style>, que también deben ir en la cabecera.
Si hacemos las dos cosas a la vez, siempre tienen prioridad las reglas que estén dentro de <style>.
Vale, ¿pero cómo funciona?
En una hoja de estilos utilizamos reglas que consisten en elegir selectores a los que asignamos una serie de propiedades. Por ejemplo, si queremos que nuestra página web tenga el fondo blanco, las letras grises, y una fuente Arial de 10 puntos de tamaño, escribimos esta regla:
body { background-color: #fff; color: #666; font-family: Arial, sans-serif; font-size: 10pt; }
Como ves, las líneas terminan en un punto y coma. Es muy importante que no se nos olvide. Ah, y si te lo estás preguntando, #fff representa al color blanco, y #666 a un gris oscuro.
¿Selectores?
Los selectores los utilizamos para elegir a qué elementos se aplican las propiedades que escribimos. Hay diferentes tipos de selectores, los más importantes son los que veremos ahora.
Si queremos elegir una etiqueta, simplemente escribimos su nombre. Por ejemplo, si queremos establecer las propiedades para los enlaces:
a { ... }
También podemos elegir un elemento único utilizando su atributo id. Para ello, empleamos la almohadilla:
#menu { ... }
Otra cosa que podemos hacer es definir una clase y hacer que muchos elementos la utilicen, escribiendo un punto antes del nombre. Por ejemplo, si queremos destacar algo:
.importante { ... }
Luego podríamos emplear esa clase en los párrafos que queramos (o cualquier otro elemento), usando el atributo class de este modo:
<p class="importante">Bla bla bla</p>
También podemos seleccionar ciertos elementos, pero sólo cuando estén contenidos dentro de otros. Por ejemplo, si queremos seleccionar los <li>, pero sólo de las listas sin ordenar:
ul li { ... }
¿Qué significa eso de "cascading"?
Cascading significa cascada, y tiene que ver con la herencia. En CSS, los elementos hijos heredan todas las propiedades de sus padres. Por ejemplo, si establecemos una regla para el elemento table, sus hijos (td entre otros) también tendrán esas mismas reglas.
Es por esto que si, por ejemplo, queremos establecer un tipo de fuente para todo el documento, debemos indicarlo en el elemento body para que se propague por toda nuestra página.
¿Puedo poner comentarios?
Claro, pero son distintos a los de XHTML, que van entre <!-- y -->.
/* Esto es un comentario */
¿Por qué #fff significa blanco?
En CSS hay varias maneras de indicar un color. Podemos hacerlo en inglés, por ejemplo. En lugar de #fff escribimos white y lo solucionamos. El problema es que así es muy incómodo porque tenemos que aprendernos los nombres de cada color, y puede que exista algún color que queramos poner y que no tenga nombre\ldots además de que supone una falta de precisión absoluta. Así que normalmente se usa la notación en hexadecimal.
¿Recuerdas esas discusiones en parvulario sobre si cierto color era lila, morado, o fucsia? ¿Quién te dice que tu concepto de morado sea el mismo que el de tu navegador?
Los colores en nuestro monitor está formado por tres haces de luz: rojo, verde y azul. Se llama sistema RGB (Red Green Blue). Si cogemos un programa de dibujo, vemos que podemos eleigr un color indicando el valor de sus componentes rojo, verde y azul por separado. Este valor puede variar de 0 a 255 (se usan 8 bits para representar este rango). Por ejemplo, si queremos amarillo puro, ponemos 255 para el rojo, 255 para el verde y 0 para el azul.
¿Qué tiene que ver esto con el sistema hexadecimal? Pues que este rango de valores (0..255) puede ser representado con dos dígitos hexadecimales, que van desde el 00 hasta el FF. La forma de escribir un color completo es #RRGGBB, donde la almohadilla indica que se trata de un color hexadecimal, y RR, GG y BB son los dígitos correspondientes al rojo, verde y azul, respectivamente. Entonces el amarillo sería #ffff00.
La mayoría de los colores que usaremos tendrán por cada componente los mismos dígitos. Por ejemplo: #ff0000 (rojo), #0000aa (azul marino) o #000000 (negro). Estos colores los podemos abreviar y dejarlos en tres cifras. Por ejemplo, #f00 es completamente equivalente a #ff0000. Sin embargo, colores como #a0a0a0 no pueden ser abreviados.
Por tanto, para conseguir el color blanco, debemos poner poner todas las componentes a 255, que en hexadecimal nos quedaría #ffffff, y abreviado en #fff.
La mayoría de editores de código (X)HTML o de programas de dibujo nos mostrarán en la paleta el valor del color en hexadecimal. En cualquier caso, siempre podemos obtener el valor de sus componentes por separado y convertirlo a hexadecimal con una calculadora.
Información adicional
Contenido publicado bajo licencia Creative Commons. Belén Albeza (BenKo)
Si tienes alguna pregunta de este ejemplo; puedes hacerla aqui en los foros.