Documentacion y recursos sobre hojas de estilo CSS

Aqui tenemos una buena colección de páginas web, donde podremos encontrar, tutoriales, ejemplos, guias, etc., tanto para iniciarnos, como para seguir aprendiendo.

Guía Breve de CSS ¿Qué es?, ¿Para qué sirve?, ¿Cómo funciona?

modelo-caja-css.jpg

Valid CSS!Revisor (del W3C) para hojas de estilos CSS


Leer el resto de la entrada »

Guia de propiedades de CSS

Conceptos básicos

Agrupación La Agrupacion permite al autor asignar una declaracion a múltiples elementos (selectores).H1, H2, H3, H5 {color: purple;}
Clases
(atributo de etiqueta)
Los selectores de clases pueden ser usados como un atributo de una etiqueta. Un selector de clase es una cadena de caracteres precedida de un punto. No use el punto cuando se esta referenciando a la clase. No comience el nombre de la clase con un número, aunque IE4/5 se lo permita..example {color: red;}<P class=”example”> Esto es un ejemplo en rojo. </P>
ID
(atributo de etiqueta)
Los selectores de ID pueden ser usados como un atributo de una etiqueta. Un selector ID es una cadena de caracteres precedida de un marcador hash (#), y es llamado con el atributo ID=. El marcador hash no aparece en el valor de la ID. Funciona como el selector de clase excepto que el ID solo puede ser usado una vez en el documento.#i5 {color: red;} <P ID=”i5″> Esto es un texto con una ID de ‘i5’. </P>
Selectores contextuales Hechos de uno o mas selectores delimitados por espacios. El ejemplo indica que la negrita sera roja solo cuando se encuente en etiquetas H1.H1 B {color: red;}<H1>Esto es <B> rojo</B>.</H1> <P>Esto <B>no</B>.</P>
Comentarios Es buena idea dejar comentarios. Afecta a lo que hay dentro, incluso entre lineas./* Esto es un comentario. */
Etiquetas DIV y SPAN Estas dos etiquetas HTML fueron introducidas para soportar CSS. Piense en ellas como etiquetas vacias, las cuales puede rellenar con estilos.DIV se usa para estrucura de formato, bloques de texto.<DIV align=”center”><H1>Este encabezado</H1></DIV>SPAN es usado para formateado en linea.<SPAN class=”example”> texto rojo en el parrafo</SPAN>

Leer el resto de la entrada »

Herramientas para facilitar el trabajo con CSS

Plugin para Firefox

Es bastante evidente que trabajar con CSS nos ahorra mucho tiempo, en muchos aspectos de la maquetación, pero también es verdad que muchas veces se convierte en un quebradero de cabeza, cuando por razones que no comprendemos, hay un div que no vemos por ningun lado, aunque lo podamos ver perfectamente en el codigo fuente, o el dichoso div que se empeña en mostrarse en una linea a parte, porque no cabe donde nosotros lo queremos colocar.

Pero ahora, existen herramientas que nos facilitan el trabajo, ya no tendremos que hacer pruebas y pruebas, hasta encontrar que era lo que nos faltaba o lo que sobraba.

Podremos comprobar en el momento, los límites de cada elemento, sus márgenes, bordes, estilos heredados, etc. y todo ello desde un entorno gráfico, facilmente utilizable, solo necesitaremos poner el raton sobre el elemento que queremos visualizar.

Y todo esto gracias a Firebug, un plugin para Firefox , que nos sera de gran ayuda para entender, porque ese div no se muestra como nosotros queremos.

Leer el resto de la entrada »

Introduccion a CSS (Cascading Style Sheets)

Estructura o layout

El diseño tradicional de páginas web se basaba en el uso de tablas para definir las estructuras de las páginas y posicionar cada uno de los bloques que forman las páginas: cabecera, menús, contenidos, columnas laterales, pies de página, etc.

Sin embargo, la estructura basada en tablas es compleja (complica en exceso el código HTML), poco flexible (no permite cambios sencillos en la estructura) y es poco semántica (no es sencillo dotar de significado a la estructura).

Por estos motivos, la estructura basada en tablas ha dado paso a la estructura basada exclusivamente en CSS. Aunque crear la estructura de las páginas sólo con CSS presenta en ocasiones retos importantes, en general es más sencilla y flexible.

En las próximas secciones se muestra cómo crear algunas de las estructuras o layouts más habituales de los diseños web utilizando exclusivamente CSS.

Leer el resto de la entrada »