CSS, o 'Cascading Style Sheets', es un mecanismo que permite añadir estilo a los documentos web, separando la estructura de un documento HTML de su presentación. Su uso mejora la semántica, optimiza la carga de páginas y facilita el mantenimiento, además de mejorar el posicionamiento en los motores de búsqueda. A pesar de sus ventajas, existen desventajas como la compatibilidad con ciertos navegadores antiguos que requieren hacks específicos.

1. Qué es CSS?
y con qué se come.

2. Qué es CSS? | algunas definiciones
La w3c nos dice:
“Cascading Style Sheets (CSS) es un mecanismo simple para
añadir estilo a los documentos web.”
Wikipedia.org complementa:
“CSS es usado para definir la presentación de un documento
estructurado escrito en HTML o XML (Xhtml por extensión)”

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

4. Pero…Por qué ??? | Por qué separar estructura y presentación?
semántica
El término semántica se refiere a los aspectos del significado,
sentido o interpretación del significado de un determinado
elemento, símbolo, palabra, expresión o representación formal.

5. Y la semántica a qué nos lleva?
a las búsquedas!
La semántica aplicada a la Web hace que todo signifique lo que
deba significar y tenga la relevancia que deba tener …. La idea es
que todo tenga sentido.

6. Un Ejemplo por favor!
En un documento común y corriente encontramos elementos
como:
•Titulo
•Subtítulo
•Párrafo

7. Seguimos con el Ejemplo:
Ahora bien, nosotros (los humanos), al ver un documento y con
cierto aprendizaje de fondo, podemos reconocer un titulo al ver
un TITULO
Pero los buscadores no!
Y si los buscadores no pueden hacerlo… cómo van a arrojar
información lo suficientemente acertada o relevante a tus
consultas?

8. Seguimos con el Ejemplo:
Es por eso que la W3c define estándares para la estructura de los
documentos escritos en HTML y XML asi como lo hace para la
presentación con CSS
De tal modo que en código html:
•<h1>Titulo</h1>
•<h2>Subtítulo</h2>
•<p>Párrafo</p>

9. Pero esto ya no es CSS…. (bueno pa’ allá
vamos :)
Una vez definidas ciertas reglas de estructura con la semántica
como base, esta el problema del estilo…veámos otro ejemplo
pero más gráfico:

10. Este es facebook.
ya estructurado y semánticamente amigable a los buscadores pero
sin estilo (con el CSS deshabilitado)… apesta verdad?

11. Un vez definida la estructura del Html
(XHtml, etc), debemos definir su estilo…

12. …y es ahí DONDE entra el CSS.
(Perfil de facebook con CSS activo)

13. Ventajas que tiene usar CSS:
Separación de forma y contenido: diseñador y programador
pueden trabajar independientemente.
Tráfico en el servidor. Las páginas pueden reducir su tamaño
entre un 40% y un 60%, y los navegadores guardan la hoja de
estilos en la caché, ésto reduce los costos de envío de
información.
Tiempos de carga. Por la gran reducción en el peso de las
páginas, mejora la experiencia del usuario, que valora de un sitio el
menor tiempo en la descarga.
Precisión. La utilización de CSS permite un control mucho mayor
sobre el diseño,.

14. Ventajas que tiene usar CSS:
Mantenimiento. Reduce notablemente el tiempo de
mantenimiento cuando es necesario introducir un cambio porque
se modifica un solo archivo.
Posicionamiento. Las páginas diseñadas con CSS tienen un
código más limpio porque no llevan diseño, sólo contenido. Esto es
semánticamente más correcto y la página aparecerá mejor
posicionada en los buscadores. Google navega obviando el
diseño.

15. ¿Cómo funciona? | Lo más básico
Las hojas de estilo están compuestas por una o más reglas.
Las regla tiene dos partes: un selector y la declaración.
A su vez la declaración está compuesta por una propiedad y el
valor que se le asigne:
h1 {color: red;}
h1 es el selector
{color: red;} es la declaración

16. ¿Cómo funciona? | Lo más básico
Una hoja de estilos puede estar llena de cientos de reglas como la anterior, y se
aplican a lo documentos HTML bajo los siguientes métodos:
Una hoja de estilo externa, que es una hoja de estilo que está
almacenada en un archivo diferente al archivo donde se almacena el
código HTML de la página Web
Una hoja de estilo interna, que es una hoja de estilo que está incrustada
dentro de un documento HTML.
Un estilo en línea, que 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 excesivamente adecuada.
Fácil, verdad?

17. …bueno, no tanto (desventajas)
• Navegadores como ie6 interpretan los
estándares a su manera por lo que hay que
recurrir a CSS hacks.
•Tiempo, es más fácil por ejemplo diseñar con
tablas y valerse de las herramientas de estilo
inline, sin embargo esto hace más pesado
el sitio y definitivamente unfriendly a los
buscadores.

18. Que puedo hacer si aprendo CSS?
•Manejar el estilo a tu antojo de los más importantes CMS:
Wordpress, Joomla, Drupal etc.
•Hacer volar tus paginas web pues cargaran más rápido.
•Al separar la presentación de su estructura tu página será más
amigable a los motores de búsqueda como Google
•Podrás mantener tu sito Web y hacerle cambio más
fácilmente: de hecho puedes cambiarle ellook and feel completo al sitio
con tan solo modificar el archivo css

19. Algunos tips si quieres basar la
presentación de tu sitio web en CSS
• Usa el 960.gs o 96 grid system para diagramar.
• Ten en cuenta los distintos navegadores asi como los hacktricks para
ie6 (no queremos olvidar a nadie)
•Lean nettuts+ , Smashing Magazine y alistapart siempre hablan de CSS
entre sus post
• Cualquier ayuda que les pueda brindar: juanrules@gmail.com

20. Preguntas?
Puedes encontrarme en:
http://twitter.com/juanrules
http://facebook.com/juanrules
http://delicious.com/juanrules

21. Fuentes
http://www.w3c.es/divulgacion/guiasbreves/HojasEstilo
(Qué es CSS)
http://www.branded07.com/2009/07/11/ie6-web-design-tricks/
(ie6 Tricks)
http://es.wikipedia.org/wiki/Css (hojas de estilo en
cascada)