Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: El Modelo de Cajas para leer este otro.
En la entrada anterior lo último que se explicó fue a utilizar el modelo de cajas para crear una página a dos columnas. Era algo como esto:

Cambiando solo el estilo podemos conseguir cosas muy bonitas, vamos con unos ejemplos simples. Algunas de las instrucciones nuevas que vamos a usar son: background:url(ruta_de_la_imagen); para poner imágenes de fondo,

Una muy poderosa herramienta para comprender y realizar CSS es Firebug para el navegador Firefox. Utilizando la opción Inspeccionar puede verse desde el navegador el código HTML y CSS y como se comportan entre si. No tengas miedo de explorarlo a fondo.

Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: Introducción al CSS para leer este otro.

Una forma muy extendida de maquetar es utilizar el modelo de cajas y hacerlas flotar. El modelo de cajar permite tratar elementos como rectángulos que se van acomodando a su entorno. Para ello debemos darles la propiedad display:block aunque algunos elementos ya la tienen por defecto, por ejemplo <div>. Vamos a utilizar dos propiedades nuevas: border y background para poder visualizar las cajas.

Aqui estamos armando cinco cajas con tamaños y colores de fondos distintos, quedarán una debajo de la otra.
La W3C propone entonces un modelo de cajas para definir tamaños, márgenes y comportamientos:

Vamos a probar entonces el comportamiento de Flotar. Esto es darle a las cajas una especie de "fuerza de gravedad" para que se acomoden segun entren en la página. Por ejemplo, para que las cajas se acomoden en la punta superior izquierda pondremos float:left y para que lo hagan en la esquina superior derecha usaremos float:right.

Haz la prueba de cambiar el float:left; por float:right;

Para determinar el orden en el que caerán los elementos es importante el orden en el que estan puestos en el html. Vamos a ver un ejemplo donde se utiliza con mas claridad, también utilizaremos márgenes (margin) que es la distancia que debe dejar el elemento con los demás y rellenos (padding) que es la distancia entre el borde y el contenido:

Expliquemos un poco los tamaños. En la cabecera hemos dejado 5px de margen, 5px de relleno, 1px de borde (todo esto de cada lado) y un ancho de 375px.
La cuenta da: 5+1+10+375+10+1+5 = 407px.
En las cajas de abajo, en la primera tenemos: 5px de margen, 1px de borde, 5px de relleno (esto de cada lado) y 140px de ancho: 5+1+5+140+5+1+5 = 162px
La segunda caja de abajo es lo mismo pero con 223px de ancho, entonces: 5+1+5+223+5+1+5 = 245px
y 152px + 245px = 407px. Que es lo mismo que mide la caja de la cabecera, asi es como quedan alineadas nuestras columnas

Introducción
En este curso y tutorial de maquetación vamos a aprender en forma intensiva a armar la estructura visual de un sitio web. Para hacerlo se requieren ganas de aprender y conocimientos básicos de informática en Windows (Instalar un programa, usar el bloc de notas, el explorador de windows, etc). Intentaremos evitar conceptos y palabras demasiado técnicas al principio y abusaremos un poco de la metáfora y el lenguaje coloquial.

Un sitio web se compone de una parte de programación (El sistema SiteUp basado en Jaws, en nuestro caso) y un frente visual. Es como si fuera el frente de la casa y el decorado del interior, es lo que se ve cuando la visitas, detrás de ella hay muchísimas cosas que el visitante no ve, cañerías, instalación eléctrica, cimientos que corresponderían a la programación.

XHTML es un lenguaje de con el que pueden armarse estos diseños o estructuras visuales para sitios webs. CSS es un lenguaje que permite definir la estética de un XHTML.
XHTML simplemente dice que cosa es que en una página web.
Vamos a dar unos ejemplos, es la mejor forma de aprender, directo al grano.
Puedes usar el bloc de notas de windows, o si quieres uno un poco mejor te recomendamos notepad++

Comenzando:
Abre un bloc de notas o archivo en notepad++ y comenzamos con la hoja en blanco.
Lo primero que debemos hacer es indicar en el texto que estamos haciendo una página web para que el navegador la entienda cuando la abra.
Comenzamos con algo como esto: (los colores están solo para facilitar la lectura)

No te preocupes mucho por que quiere decir cada palabra del código, lo que importa es que sepas que estamos diciendole al navegador que estamos haciendo un documento de página web.

En XHTML definimos un elemento de la siguiente forma:
<elemento> contenido del elemento </elemento>

Es decir, el nombre del elemento entre signos menor y mayor para comenzar, y luego el nombre del elemento entre signos menor y mayor y una barra (/) para finalizarlo.

En caso de que el elemento no tenga contenido dentro (Por ejemplo, un salto de línea, no tiene nada dentro, es un salto de linea y ya está). Se pone la barra antes del signo mayor.

De forma que ahora pondremos cosas dentro del elemento <html>. A los textos entre signos mayor y menor los llamaremos etiquetas o tags.

Dentro del elemento <html> van dos elementos mas: <head> y <body> . En <head> van datos sobre la página y en <body> el cuerpo de la página propiamente dicha. Luego, cada uno de ellos dos aceptan elementos distintos dentro.

Por ejemplo:

Puedes probar el código con el Espacio de Pruebas. Modifica el código como quieras agregando y quitando párrafos, subrayados, negritas, cursivas, etc, y sigue probando diferentes formas hasta comprender la estructura del XHTML. En el próximo capítulo pondremos un poco de color a los elementos. Para verlo en una página hecha por ti mismo, pon este código o uno que hayas hecho en un bloc de notas o notepad++, guardalo con extensión .html y luego ábrelo con el navegador o hazle doble click.

Nota: Es recomendable haber leido o entender lo publicado en el artículo Tutorial: ¿Que es XHTML? para leer este otro.

En el capítulo pasado pudimos aprender a utilizar XHTML y algunas de sus etiquetas. Hoy vamos aprender la base de las hojas de estilo. Una de las cosas pendientes que teníamos era poner información en la etiqueta asi que retomaremos por ese lado.

Como habíamos dicho en la etiqueta ponemos información extra que no es parte del cuerpo de la página. Por ejemplo para que la barra del navegador muestre el título de nuestra página debemos poner un tag <title>

Haz la prueba en un archivo html en tu propia pc y prueba abrirlo con el navegador, tal como vimos la clase pasada.

Ahora vamos a identificar elementos dentro del html. Podemos hacerlo de dos maneras, poniendo un identificador o una clase. Lo correcto seria que no hubiera dos elementos con el mismo identificador en la misma página, para no confundir, pero si pueden haber varios elementos de la misma clase. Podemos poner identificadores y clases de la siguiente forma:

Aquí estamos diciendo que el parrafo tiene identificado "nombre del parrafo" y es de la clase "bonito" y de la clase "oscuro". Podemos separar varias clases con espacios.

Para poner estilos debemos dentro del usar una etiqueta o tag llamado <style>.

Si pruebas este código en el área de pruebas, verás los resultados.

Que estamos diciendo en el <style>? pues las instrucciones de estilo CSS tienen el siguiente formato:
elemento { propiedad:valor ; propiedad:valor ..... }

el elemento es una forma de identificar a lo que queremos poner propiedades y utilizamos el numeral (#) para identificadores, el punto (.) para las clases y simplemente la palabra para el tipo de etiqueta.

Por ejemplo: p#cabecera identificaria a <p id="cabecera"> a mi me identifica </p>

o también: b.rojo en <b class="rojo">a mi me identifica</b> <b>a mi no</b>

Dentro de la identificación del CSS definiremos las propiedades del elemento, si sabes inglés son muy intuitivas:

font-family: La fuente del texto, puede ser Arial, Verdana. Si lleva espacios debe ir entre comillas, por ejemplo "Times new Roman".
text-decoration: Decoraciones del texto, por ejemplo underline (subrayado), line-through (tachado), none (nada).
color: El color de la fuente, puede ser red (rojo), blue, (azul), etc. También puede ser un código hexadecimal como #ff0000; ya veremos mas adelante como generar esos códigos.
font-weight: El "peso" de la letra, por ejemplo bold (negrita) o normal.
Una lista completa de las propiedades CSS puedes encontrarla aqui: http://www.w3schools.com/Css/css_reference.asp (en inglés).

Veamos un ejemplo mas complejo:

Ahora lo mismo con otros estilos:

Ahora sería una buena idea practicar un poco los estilos y experimentar con la lista completa de estilos de W3Schools