Es el requisito de cualquier diseñador de webs (aunque no sepa HTML).
Hasta ahora he explicado que el HTML sirve para estructurar el texto: ya tenemos la página dividida en secciones: párrafos, enlaces, cabeceras, citas, imágenes, etc.
Queda aplicarles un estilo. Eso consiste en decir, por
ejemplo, que las cabeceras van en rojo y subrayadas, las
imágenes tienen 2 cm. de margen y un borde de 1
píxel, la primera línea de cada párrafo
está indentada, el interlineado es de 1'5, y la primera
fila de cada tabla tiene el fondo azul
. Todo eso se puede
hacer con CSS sin necesidad de tocar el HTML.
En general, el CSS sirve para aplicar un estilo a todos los elementos del mismo tipo a la vez. Bueno, permite hacer muchas más cosas, pero lo mejor para descubrirlo es verlo en acción.
Lo más normal es escribir todo el código CSS en
un fichero externo, de extensión css, y luego
incluir en el <head> de cada página el
código:
<link rel="stylesheet" href="archivo.css"
type="text/css">
Esto permite usar el mismo estilo para varias páginas HTML distintas. No sólo eso: haciendo esto te llevas por completo el diseño a otro archivo, de forma los navegadores sencillos, que no soportan hojas de estilo, no tendrán que cargar código innecesario (por eso van tan rápido).
Si prefieres dejar el código CSS en la misma
página (sin usar archivos externos), se hace desde dentro
del <head> con la etiqueta
<style>:
<style type="text/css">
/* Aquí va el código CSS */
/* Recuerda que esto va dentro del <head>
*/
</style>
También se puede definir un estilo para un solo
elemento, escribiendo el código dentro de su atributo
style, aunque no lo recomiendo porque complica el
código. Ah, y también se pueden incluir archivos
CSS externos con la orden @import de CSS, pero eso
ya es más complicado.
Si definieras un estilo usando todas las formas a la vez, la prioridad que se seguiría es:
style del elemento (estilo
específico para un solo elemento)<style><link>Un ejemplo de código CSS es:
h1 { color: red; text-decoration: underline; }
p { text-indent: 20px; border: 1px dotted gray; line-height:
200%; }
Esto define estilos para lo que va entre etiquetas
<h1> </h1> (que son cabeceras), y lo que
va entre etiquetas <p> </p> (que son
párrafos). Hace que las cabeceras salgan en rojo y
subrayadas, y los párrafos con interlineado doble, con la
primera línea un poquito más para la derecha, y con
un borde gris y a puntitos alrededor de cada párrafo.
El formato general es:
etiqueta {propiedad1:valor; propiedad2:valor;
propiedadn:valor;}
y así para cada etiqueta a la que quieras dar estilo.
Hay muchos tutoriales de CSS en todos los idiomas, pero en mi opinión, las mejores formas de aprender son:
Sitios donde puedes ver la potencia de CSS y aprender cosas nuevas: Zen Garden, sea mus n squirrel, Position is everything, y muchos blogs como el de minid o el tutorial CSS de Toad. Recuerda que necesitarás un navegador moderno para ver las páginas tal como ha querido el autor (no vale Internet Explorer).
También puedes empezar mirando el código de esta página, que no es muy complicado.
Una muestra muy variada de cosas que se pueden hacer con CSS:
/* Las cabeceras h1, en un color azulado y en
mayúsculas */
h1 {color: #0077ff; text-transform: uppercase;}
/* El p que está metido dentro de un div, con imagen de
fondo */
div p {background: url(fondo.png);}
/* El li que es hijo directo del ol, con borde azul */
ol > li {border: 1px solid blue;}
/* Los enlaces, un poco más grandes al pasar el
ratón */
a:hover {font-size: 120%;}
/* Párrafos y listas, con indentación */
p, li {text-indent: 15px;}
/* Justo después de una imagen, no indentar */
img + p {text-indent: 0;}
/* Las imágenes con class="separa", con un poco de
margen */
img.separa {margin: 20px;}
/* El bloque div con id="tabla" tiene el fondo rojo, la letra
blanca,
ocupa el 75% de la pantalla (centrado), y tiene un
margen interno */
div#tabla {background: red; color: white;
width: 75%; margin: 0
auto; padding: 20px;}
Mucha gente entra a mi web buscando cómo cambiar el
color de las barras de desplazamiento
con HTML o CSS. Pues
no se puede, al menos con las versiones de CSS
que hay al escribir esto (2004).
Como mi navegador soporta temas y personalización, las barras de scroll las modifico yo a mi gusto, no las páginas. Una página controla el trozo de ventana en el que se muestra, no los iconitos, la disposición de los botones, o los menús. Todos estos elementos de navegación han de ser reconocibles por el usuario.
Hace tiempo escribí el cómo no debe hacerse, en este documento: cambiar el color de las barras de desplazamiento sin CSS. Que quede claro que no es CSS, sino algo que ha inventado únicamente Microsoft sin pedir consejo a nadie, y le ha llamado con el mismo nombre.