Hojas de estilo. Para que sirven.
  • Sirven para maquetar un sitio web, a partir de un diseño gráfico, e independiente de la programación. Definen como se muestran los elementos HTML en la página.
  • Una página consta de diferentes elementos (cabecera, menú, contenido, pie, etc) . Estas son las estructuras que se maquetan. Puedo tener 4 estructuras y 400 páginas, y a cada página le asocio una estructura.
  • Para plantear el esquema de una página web antes se usaban tablas, ahora deben usarse <div>, que marcan los bloques o cajas. Los <div>pueden estar anidados. Hay un <div>que los abarca a todos, para alinearlo al centro, izquierda o derecha.
  • En las hojas de estilo separamos
    • Estructura (posicionamiento de los bloques)
    • Estilo (colores, tipo de letra, etc.)

Como se indica un estilo a una página HTML <div id = "header"> se utiliza en un solo elemento >> para ESTRUCTURA.CSS (En esta hoja de estilos definimos el posicionamiento de cada DIV)<div class = "header"> se utiliza en varios elementos en diferentes sitios >> para ESTILO (En esta hoja de estilos definimos los colores, tipografía, etc.)
  • externamente (indicando un fichero aparte)
    • <link rel="stylesheet" href="/css/styles.css" type="text/css" media="all" />
    • <link rel="stylesheet" href="/css/structure.css" type="text/css" media="all" />
  • internamente (en el HEAD de la página)¡
  • Inline (en el 'tag').




Uso de CSS Float y Clear para obtener 3 columnas + cabecera + pié

  • Header
  • Left + Middle + Right
  • Footer

<body>
<div id="header">
    <h1>Header</h1>
</div>
<div id="left">
    Port side text...
</div>
<div id="right">
    Starboard side text...
</div>
<div id="middle">
    Middle column text...
</div>
<div id="footer">
    Footer text...
</div>
</body>
And here's the CSS code:
body {
    margin: 0px;
    padding: 0px;
}
div#header {
    clear: both;
    height: 50px;
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px;
    background-color: red;
}
div#right {
    float: right;
    width: 150px;
    background-color: green;
}
div#middle {
    padding: 0px 160px 5px 160px;
    margin: 0px;
    background-color: silver;
}
div#footer {
    clear: both;
    background-color: yellow;
}
A tener en cuenta
  • son 5 divs
  • el middle debe ir despues del left y right
  • clear: both en header y footer sirve para que estén independientes de los que llevan float

Mas info: http://www.techrepublic.com/article/use-css-floats-to-create-a-three-column-page-layout/5160911



Mas info en