Qu es CSS?

y con qu se come.

Qu es CSS? | algunas definiciones

La w3c nos dice:
Cascading Style Sheets (CSS) es un mecanismo simple para
aadir estilo a los documentos web.

Wikipedia.org complementa:
CSS es usado para definir la presentacin de un documento
estructurado escrito en HTML o XML (Xhtml por extensin)

La idea que se encuentra detrs del desarrollo de CSS

es separar la estructura de un documento de su
presentacin.

PeroPor qu ??? | Por qu separar estructura y presentacin?

semntica
El trmino semntica se refiere a los aspectos del significado,
sentido o interpretacin del significado de un determinado
elemento, smbolo, palabra, expresin o representacin formal.

Y la semntica a qu nos lleva?

a las bsquedas!
La semntica 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.

Un Ejemplo por favor!

En un documento comn y corriente encontramos elementos
como:

Titulo
Subttulo
Prrafo

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 cmo van a arrojar
informacin lo suficientemente acertada o relevante a tus
consultas?

Seguimos con el Ejemplo:

Es por eso que la W3c define estndares para la estructura de los
documentos escritos en HTML y XML asi como lo hace para la
presentacin con CSS
De tal modo que en cdigo html:

<h1>Titulo</h1>
<h2>Subttulo</h2>
<p>Prrafo</p>

Pero esto ya no es CSS. (bueno pa all

vamos :)
Una vez definidas ciertas reglas de estructura con la semntica
como base, esta el problema del estilovemos otro ejemplo
pero ms grfico:

Este es facebook.
ya estructurado y semnticamente amigable a los buscadores pero
sin estilo (con el CSS deshabilitado) apesta verdad?

Un vez definida la estructura del Html

(XHtml, etc), debemos definir su estilo

y es ah DONDE entra el CSS.

(Perfil de facebook con CSS activo)

Ventajas que tiene usar CSS:

Separacin de forma y contenido: diseador y programador
pueden trabajar independientemente.
Trfico en el servidor. Las pginas pueden reducir su tamao
entre un 40% y un 60%, y los navegadores guardan la hoja de
estilos en la cach, sto reduce los costos de envo de
informacin.
Tiempos de carga. Por la gran reduccin en el peso de las
pginas, mejora la experiencia del usuario, que valora de un sitio el
menor tiempo en la descarga.
Precisin. La utilizacin de CSS permite un control mucho mayor
sobre el diseo,.

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 pginas diseadas con CSS tienen un
cdigo ms limpio porque no llevan diseo, slo contenido. Esto es
semnticamente ms correcto y la pgina aparecer mejor
posicionada en los buscadores. Google navega obviando el
diseo.

Cmo funciona? | Lo ms bsico

Las hojas de estilo estn compuestas por una o ms reglas.
Las regla tiene dos partes: un selector y la declaracin.
A su vez la declaracin est compuesta por una propiedad y el
valor que se le asigne:
h1 {color: red;}
h1 es el selector
{color: red;} es la declaracin

Cmo funciona? | Lo ms bsico

Una hoja de estilos puede estar llena de cientos de reglas como la anterior, y se
aplican a lo documentos HTML bajo los siguientes mtodos:

Una hoja de estilo externa, que es una hoja de estilo que est
almacenada en un archivo diferente al archivo donde se almacena el
cdigo HTML de la pgina Web
Una hoja de estilo interna, que es una hoja de estilo que est incrustada
dentro de un documento HTML.
Un estilo en lnea, que es un mtodo para insertar el lenguaje de estilo
de pgina, directamente, dentro de una etiqueta HTML. Esta manera de
proceder no es excesivamente adecuada.
Fcil, verdad?

bueno, no tanto (desventajas)

Navegadores como ie6 interpretan los
estndares a su manera por lo que hay que
recurrir a CSS hacks.
Tiempo, es ms fcil por ejemplo disear con
tablas y valerse de las herramientas de estilo
inline, sin embargo esto hace ms pesado
el sitio y definitivamente unfriendly a los
buscadores.

Que puedo hacer si aprendo CSS?

Manejar el estilo a tu antojo de los ms importantes CMS:
Wordpress, Joomla, Drupal etc.
Hacer volar tus paginas web pues cargaran ms rpido.
Al separar la presentacin de su estructura tu pgina ser ms
amigable a los motores de bsqueda como Google
Podrs mantener tu sito Web y hacerle cambio ms
fcilmente: de hecho puedes cambiarle ellook and feel completo al sitio
con tan solo modificar el archivo css

Algunos tips si quieres basar la

presentacin 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

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

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)