Si todavía te quedan muchas dudas en cuanto al diseño con CSS, tal vez con estas claves te quede todo más claro, porque la mayoría del CSS es muy simple y para muchas personas muy fácil de comprender, ya sean tamaños de fuentes, márgenes, rellenos, colores, etc., estas son las 6 claves que debes conocer para entender más fácil el CSS (según Jonathan Snook).

  1. Módelo de caja

    Para entenderlo debemos entender las bases del rectángulo, tal vez entiendas bien el margen y el relleno de los elementos, pero ¿qué pasa cuando estos van junto a otros? los problemas comienzan cuando con cierto navegador todo se muestra correctamente pero con otros no. Aqui es donde debemos comprender más las diferencias entre el modo raro (quirks mode) y el modo estricto.

  2. Las columnas flotantes

    Mientras que el utilizar las posiciones obsolutas es lo que la mayoría de las personas se preocupa por aprender, el contenido flotante tiene más posibilidades, también es importantísimo aprender a limpiar los «floats» para mostrar correctamente los fondos de las cajas.

  3. Tamaños usando EMs

    Existen dos diferentes temas para especificicar medidas con la unidad de medida EM, una para las fuentes y otra para el layout.

    Para las fuentes: en Internet Explorer en sus versiones 6 y menores no se permite cambiar el tamaño del texto cuando se especifica en piexeles, lo vual es muy desagradable para personas que necesitan el texto más grande y no lo pueden cambiar. La importancia de especificar los tamaños de las fuentes con Em radica en la fuente va a lucir bien en todos los navegadores.

    Para el layout: especificar las medidas del layout con EM nos puede dar muchísima flexibilidad en cuanto al diseño ya que si especificas las medidas de las cajas con EM permites que crezcan con el texto especificado en EM también, esto claramente es una ventaja porque no te descompone el diseño cuando un usuario aumenta el tamaño del texto.

  4. El reemplazo de imágenes

    Los textos aburridos no nos gustan, existe una técnica muy utilizada para poder utilizar textos de todos los tipos, con efectos, degradados y colores algo que los estándares y los navegadores no nos ofrecen, el reemplazo de texto por imágenes te permite insertar texto optimizado para motores de búsqueda en imágenes que los motores simplemente no pueden interpretar.

  5. La navegación flotada

    Si ya dominas las columnas flotantes, la otra parte difícil que es muy usada, es la navegación flotada. La moda por los estándares se encuentra en las listas desordenadas para los menús de navegación. y estas son algunas formas de darles estilo:

  6. Sprites

    Los sprites son cómo el los videjuegos paquetes de múltiples imágenes en una imagen simple, en CSS esto se ha convertido en una técnica muy popular pero trae algunos problemas, aunque se ha vuleto muy popular por ejemplo para los rollovers combinar multiples imágenes en una solo para los fondos, lo que nos ahorra peticiones al servidor y ancho de banda.

¿Qué obtienes con todo esto?

Por supuesto, hay siempre más por aprender y si piensas que hay una técnica que es especialmente importante para un principiante, agrégalo a los comentarios.