gallery/banner-html5-css3
VIDEOS
https://farm8.staticflickr.com/7194/6906828287_22d774f529_o
https://farm9.staticflickr.com/8329/8075812559_391d5ba2a3_o

Hoja de estilos en cascada

Hoja de estilo en cascada o CSS (siglas en inglés de cascading style sheets) es un lenguaje usado para definir y crear la presentación de un documento estructurado escrito en HTML o XML2 (y por extensión en XHTML). El World Wide Web Consortium (W3C) es el encargado de formular la especificación de las hojas de estilo que servirán de estándar para los agentes de usuario o navegadores.

La idea que se encuentra detrás del desarrollo de CSS es separar la estructura de un documento de su presentación.

La información de estilo puede ser definida en un documento separado o en el mismo documento HTML. En este último caso podrían definirse estilos generales en la cabecera del documento o en cada etiqueta particular mediante el atributo

IMAGENES
https://farm9.staticflickr.com/8492/8293861540_d72ba009cc_h
https://farm4.staticflickr.com/3083/2570266920_156cdf8859_z
gallery/css2

Formas de usar CSS

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:

Mediante CSS introducido por el autor del HTML

Un estilo en línea (inline) es un método para insertar el lenguaje de estilo de página directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente adecuada. El incrustar la descripción del formateo dentro del documento de la página Web, a nivel de código, se convierte en una manera larga, tediosa y poco elegante de resolver el problema de la programación de la página. Este modo de trabajo se podría usar de manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro o estructurado que debería ser, pero funciona.

 

gallery/css1

Estructura o layout

Diseño a 2 columnas con cabecera y pie de página

El objetivo de este diseño es definir una estructura de página con cabecera y pie, un menú lateral de navegación y una zona de contenidos. La anchura de la página se fija en 700px, la anchura del menú es de 150px y la anchura de los contenidos es de 550px:

gallery/f1207

 

Esquema del diseño a 2 columnas con cabecera y pie de página

La solución CSS se basa en el uso de la propiedad float para los elementos posicionados como el menú y los contenidos y el uso de la propiedad clear en el pie de página para evitar los solapamientos ocasionados por los elementos posicionados con float.

gallery/f1208

Propiedades CSS necesarias en el diseño a dos columnas con cabecera y pie de página

El código HTML y CSS mínimos para definir la estructura de la página sin aplicar ningún estilo adicional son los siguientes:


#contenedor { width: 700px; }

#cabecera { }

#menu { float: left; width: 150px; }

#contenido { float: left; width: 550px; }

#pie { clear: both; }  

<body> <div id="contenedor">

<div id="cabecera"> </div>

  <div id="menu"> </div>  

<div id="contenido">

</div>   <div id="pie">

</div>

</div>

</body>

gallery/f1209

Sitios web de inspiración

Muchas veces resulta útil disponer de buenos ejemplos de páginas diseñadas completamente con CSS para tomarlas como referencia y posible inspiración de los diseños propios:

Web Creme: incluye diariamente varios ejemplos de las mejores páginas diseñadas con CSS y permite realizar búsquedas a partir del color utilizado en la página.
CSS Remix: muestra centenares de páginas diseñadas exclusivamente con CSS y con la posibilidad de puntuar su diseño.
CSS Zen Garden: es una galería diferente a las tradicionales, pero se ha convertido en una referencia en cuanto a diseños complejos realizados mediante CSS.
Open Source Web Design: sitio web que ofrece cientos de plantillas gratuitas con posibilidad de utilizarlas libremente en aplicaciones personales y comerciales.