Estándar de W3C para la presentación de documentos HTML

               • Mejor Control del Layout

               • Menos Trabajo = Menos Tiempo

               • Documentos menos pesados y descargan más rápido

               • Soportado por todos los Navegadores

               • aplicación de diferentes presentaciones a diferentes tipos de medios
                  (pantalla, impresión, etc.)

                

Se podría definir en tres pasos

	    1. Etiquetas de un documento HTML o XHTML

            2. Escribir las reglas de estilo según cómo querría  que se viera un elemento en el HTML.

            3. Agregar los estilos al documento

            

1. Etiquetas de un documento HTML o XHTML

2. Escribir las reglas de estilo según cómo querría que se viera un elemento en el HTML

El selector y la declaración.
  
body {        font-family: Verdana, Arial, Helvetica, sans-serif;
          font-size: 10px;
          color: #000000;
    }
  

3. Agregar los estilos al documento

1. Internas
Se declaran dentro del mismo documento, y se utilizan sólo para ese HTML
2. Externas (o vinculadas)
  Se escriben en un docuemnto externo. Este docuemnto será la hoja de estilos y lleva la extensión ".css".
3. En línea o Inline
  Son los que se describen dentro de las mismas etiquetas del HTML

Modelo de estructura/grilla

              

                
Encabezado
              
              

                
Navegador
                
Contenido principal
              
              

                
pie de página
              
            

Pensando en la caja

Partes del elemento caja
                          

Elementos flotantes (la propiedad float)

Los elementos se pueden hacer flotar a la derecha o a la izquierda usando la propiedad float. Es decir, que la caja con su contenido flota bien a la derecha o la izquierda de un documento (o de la caja contenedora).

Bases del Posicionamiento

CSS proporciona varios métodos de posicionamiento en la página. Se pueden colocar con relación al lugar donde aparecen, o se ubica en un punto específico de la páginaen relación a la ventana del navegador.

relative: el posicionamiento relativo  mueve el cuadro en relación a su ubicación. [ver ejemplo]

absolute: Los elementos con posición absoluta se colocan en relación al documento. [ver ejemplo]

fixed: La característica distintiva de posicionamiento fijo es que el elemento permanece en su posición
en la ventana, incluso cuando se desplaza el documento. [ver ejemplo]

Modelo de estructura/grilla

Ancho del Layout: (width:700px)
            

              

                
Encabezado
height:60px
              
              

                
Navegador
width:160px
                
Contenido principal
width:500px
              
              

                
pie de página