CSS Sin Dolor de cabeza
Muchos libros sobre css se han escrito y se seguirán escribiendo mientras el continuo cambio en internet este presente y el css no evolucione a otra cosa , CSS tiene la particularidad de pisar los terrenos de arte y ciencia(exageración del autor), si somos diseñadores gráficos podemos hacer muchas cosas  pero si le tenemos miedo a escribir cualquier  línea de código o nos aterramos al verlas nada podremos hacer con css , si somos programadores puede extrañarnos no ver un ”IF” pero la verdad es que css no es un lenguaje, pero para los que programamos ,el código CSS se nos hace muy sencillo.
Te aseguro que será sencillo porque al terminar este libro podrás maquetar adecuadamente una página web.
Dos ideas importantes debes memorizar antes de arrancar la creación de una página web diseñada en css :
La página debe poseer una estructura XHTML adecuada.
En una página en CSS el contenido está contenido en cajas o contenedores.
HTML no ha muerto
Más o menos esta es la historia: (no seré extenso, no hace falta) cuando la red nació era escrita  por y para científicos. El científico no está para nada interesado en la forma si no en el contenido así que el HTML era la verdadera telaraña de texto y link. El HTML tomo mas forma grafica al nacer las tablas y los <font> en Netscape, las tablas estaban enfocadas en cómo se mostraban los datos y  diríamos que en ese momento la red tomo forma y color.
No todo fue color de rosa, Llego el 2000 y al revisar el código fuente de algunas páginas web populares, veíamos un verdadero enredo, tanto  que el documento solo la conocía el diseñador de la pagina. En los 90 y incluso después del 2000 también a los que se no ocurrió la idea de crear y vender páginas web lo hacíamos del siguiente modo:
Instalábamos FrontPage de Microsoft ,Escogíamos una plantilla, le cambiábamos el color ,agregábamos el texto (info sobre la empresa ), arriba le colocábamos el logo de la empresa que quizás maquillábamos con Paint algunos o diseñábamos en Corel otros.
El verdadero dolor de cabeza era llegar a mostrar nuestra página al cliente y encontrarnos con que la pagina no se veía bien en la computadora del cliente ,por una tabla que nosotros creíamos correcta la página estaba deformada o un objeto movido porque la resolución de monitor de nuestro cliente era diferente a la nuestra.  
Fue cuando nacieron las herramientas WYSIMYG (what you see is what: Lo que ves es lo que recibes)  estas herramientas agregaron su propia gota de veneno,  agregaron mas enredo a las  páginas web, a la final temíamos modificarlas manualmente para no romper el código que nos había robado todo un fin de semana.
De todo esto nació una idea difícil de eliminar hasta nuestros tiempos, “Mi pagina Como un Papel”
La mentalidad papel continua hasta nuestros días  y es: pensar que todos esos editores web tan solo son procesadores de palabras y que así como lo veo en mi cabeza (o lo dibujo en un papel el cliente) Así mismo debe verse la pagina web en todos lados.
Mucha paginas podemos escribir sobre el enredo que significo el asunto y MITIFICAR al diseñador web de “genio”. Ok pero empezamos diciendo que el HTML no ha muerto ¿verdad? No murió porque una solidad estructura web diseñada en css depende del HTML.
Acá tenemos una ilustración del Diseño Web:
En la construcción de una casa hay dos personajes claves.

Html significa HyperText  MarkUp Language  esté es el albañil, en español la traduciríamos como Lenguaje para el marcado de hipertexto. la X en la primera mención no fue un error XHTML es el futuro del HTML y esto lo determina quién establece la reglas W3C http://w3c.org
Css significa Cascading Style Sheet este es el Decorador, en español significa “hojas de estilo en cascada“  (w3.org  tenía tiempoen el desarrollo del CSS pero sin fecha de lanzamiento para cuando las tablas nacieron)
Toda casa perdurable necesita bases solidas y el HTML es el creador y un documento web necesita estar bien estructurado y con sentido para el desarrollo en CSS el HTML construye la casa y distribuye las habitaciones se crean los Cuadros Rectangulares (todo en la web a la final es una caja) se define el documento ,se llena el contenido de las paginas.
El diseñador CSS le agrega el estilo a la casa ,da formas a los cuadros o cajas al contenido y define la posición de dichas cajas.
A pesar de este ejemplo el diseñador web no tiene un control total de cómo es el aspecto de la pagina web , en la mentalidad de papel cual arquitecto tipográfico así sea un aviso o una invitación de cumpleaños  como hacemos el original así mismo lo verán los demás y la reproducción del documento  se realiza sin cambios a excepción del tipo de papel y color.
No hay cambios en el aspecto de la pagina en el pensamiento “Mi pagina Como un Papel”

 

¿Porque no hay pleno control del aspecto de una página web?:
Existen para navegar en la web varios Navegadores, Internet Explorer y Mozilla Firefox son solo los dos que predominan en la web.
Y todos los navegadores reciben de los servidores web donde estén alojadas las paginas, el código fuente de la pagina y tienen un interpretación propia y diferente del código según la versión del navegador y la configuración de la maquina que navega (Información importante para nosotros y nuestros clientes)
Después de guardar su documento en su computador o salvarle en su servidor web al navegar en su página tecleando directamente el dominio http://midominio.com
o abriéndolo localmente Archivo –Abrir  archivo- nos encontramos muchas veces con la sorpresa de no verse igual como lo vemos en nuestro editor web favorito
Pues si usamos la opción Ver – Código Fuente del menú Firefox o IE veremos algo como esto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xml:lang="es"
    lang="es"
    dir="ltr">
<head>
<link rel="icon" href="./favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon" />
<title>mi pagina</title>
<meta http-equiv="Content-Type"
    content="text/html; charset=utf-8" /> ...

y este código es el que recibe su navegador e interpreta.
Este siguiente ejemplo de un periódico de un futuro imaginario nos da una idea de las páginas web flexibles: 
Después de comprar el Periodico o descargarlo en nuestro visor de periódico futurista al entrar al metro (no en el de Caracas en la década del 2000) donde viajas con poco espacio el periódico se reduce a tamaño A5 y en camino a tu oficina tu visor se entra en modalidad reproductor mp3 y te reproduce o “lee” el periódico ,al llegar al escritorio de tu oficina se amplía  a tamaño A2 al llegar a tu casa de regreso  tu Abuela te pide el Visor y aumenta el tamaño de la fuente y cambia el tipo de fuente.
Una página web debe ser tan flexible como nuestro periódico del futuro.
Si vienes de diseñar con tablas debes olvidarte de la mayoría de las cosas aprendidas, hoy por hoy el HTML a evolucionado.
Existen palabras claves contra el pensamiento de papel en la actualidad y futuro de la web
que debes aprender tu y que te ayudaran a adoctrinar a tus clientes :
Diseño web Respetando los estándares o Diseño web conforme los estándares
 Designing with Web Standards
Diseño Flexible (bullet proof web design)
Paginas web optimizadas para robot de buscadores
(Search engine Optimization)
Cuando nació el css nadie lo respetaba,  Css establecía posicionamiento de las cajas pero muchos navegadores no interpretaban esto adecuadamente y creaban dolores de cabeza.
Esto, ya paso ,aunque se acusa a Microsoft (para cuando escribo estas  líneas) de no respetar los estándares web en su IE y aparecer varios errores en su interpretación de código, la disparidad no es solo para IE se puede decir que existen diferencias en varios navegadores y esto dio nacimiento a los Hack del cual nos ocuparemos después.
Este es el HTML Básico dentro de un Pagina desarrollada en CSS:
EL primer elemento es DOCTYPE

 Actualmente se define al principio de cualquiera pagina web el tipo de documento o (DTD Document Type Definition)
Determine la carpeta donde trabajara y (con su editor web favorito) cree un documento vacio llamado index.html
Puede examinar el código de su HTML y observar que la mayoría coloca predefinida una estructura básica  XHTML mas o menos como esta:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
</head>

 

<body>
</body>
</html>

Este es el principio de un libro que estoy escribiendo como vez le falta correción de estilo y hasta ortografia.. Te gusta el material ? Escribo mas? http://twitter.com/heislersin