S5 es una forma de realizar presentaciones de diapositivas (slide) basandose en 3 tecnologías:

• XHTML
• CSS
• JavaScript

Gracias a estas sólo necesitamos de un browser para poder exponer la presentación, aumentando enormemente la portabilidad, pudiendo lograr que la presentación se pueda reproducir en casi cualquier parte.

JavaScript es el encargado de efectuar el efecto de pasar las diapositivas. No va a ser de sorprenderse que dentro de poco salgan script que hagan incontable efectos en nuestras presentaciones, dejando atrás a cualquier efecto que nos pueda brindar un paquete ofimático de presentaciones.

Algo de mucha utilidad es que al trabajar con CSS, se pueden diseñar distintos CSS según el medio para tener una visualización acorde, por ejemplo una CSS diseñada para un medio como la impresora facilitaría su visualización porque no se imprime como se muestra en la pantalla del monitor, o sea en forma de diapositivas; esto abre un gran abanico de posibilidades, por citar algunas es posible portar nuestras presentaciones a medios como dispositivos táctiles para braille o impresoras braille.

Una contra que se le puede encontrar (pero no por mucho, supongo) es que para poder elaborar las presentaciones debemos contar con conocimientos en HTML, para el contenido y en CSS para poder diseñar el estilo de nuestra presentación. Es sólo cuestión de tiempo para que salgan interfaces que faciliten el proceso de desarrollo, además ya se encuentrar varios temas para aplicar estilos a las presentaciones.

En el blog del autor de S5 hay basta documentación del mismo.

Una de las confusiones que se suele presentarse a la hora de diseñar CSS es saber la diferencia entre los distintos selectores. CSS cuenta con los siguientes

• Selectores de tipo
• Selectores descendentes
• Selectores de clase
• Selectores de ID

Veamos exactamente que es un selector:
[css]p { font-size: 12px; }[/css]

Esto se denomina una regla CSS. p es un selector y lo que se encuentra dentro de los paréntesis es una declaración (puede haber más de una declaración). Una declaración está formada por dos elementos: propiedad y valor; la propiedad en éste caso sería font-size y el valor sería 12px.

El selector de tipo, índica que se apliquen las declaraciones a todas las etiquetas del documento. Este selector es el menos restrictivo
Por ejemplo:
[css]h4 { color: blue; }[/css]

Aplicado al siguiente código html
[html]

soy un h4

soy otro h4

¡Somos todos del mismo color!

[/html]
Salida

Como se puede ver en la salida sólo se aplico el estilo a todas las etiquetas que coincidieron con el selector.
En el siguiente ejemplo aplicaremos el mismo estilo a dos etiquetas, CSS nos ayuda a simplificar la notación, para no definir dos veces las mismas declaraciones.
[css]strong, em{color:green;}[/css]

Notar que los selectores están separados por coma

que lo aplicaremos a
[html]

Soy un strong verde

soy em verde y también un strong verde

[/html]
Salida:

Con esto logramos que todas las etiquetas strong y em en la página tengan el mismo estilo.

Los selectores descendentes sólo aplica las declaraciones cuando coincide el selector y el anidamiento de etiquetas especificado. Veamos un ejemplo para aclarar las cosas
[css]p strong {color:red;}[/css]

Notar que los selectores están separados por espacios

Y tengamos el siguiente código HTML
[html]

Tengo una parte strongpero ¡no es rojo!

Sólo dentro de mi es rojo

[/html]
Salida

No se aplico el estilo en h5, porque el selector descendente especifica que el estilo se aplique dentro de p, o sea se aplica el estilo al selector más a la izquierda y que se encuentre contenido en el selector de la derecha. Sólo dentro p cumple con el anidamiento especificado en el selector de descendencia.

A través de los selectores de clase podemos referenciar etiquetas especificas de la página que no lo podríamos lograr con los anteriores selectores. Una situación sería la siguiente:

Marcar con amarillos 3 etiquetas strong. Donde por lo menos una deben encontrarse dentro de cualquier etiqueta.

En está situación no podemos usar los selectores de tipo, ya que nos indica que sólo marquemos 3 strong, ni los selectores de descendencia porque los encabezados se pueden encontrar dentro de cualquier etiqueta.
Para solucionar dicha situación deberemos definir un selector de clase, estos se aplican a todas las etiquetas con el valor del atributo class igual al selector. Un mismo elemento puede tener una o más class.
[css].amarillo{color:yellow;}[/css]

Notar el signo punto al inicio del selector

Que aplicaremos al siguiente código
[html]

Tengo un strong pero no es amarillo

Tengo un strong y es amarillo

puedo ser amarillo en cualquier parte

Falta un ultimo strong

[/html]
La salida sería

Con el selector de clase podemos aplicar el estilo a una o más etiquetas determinadas.

Y por último tenemos el selector de ID, cumple la misma función que el selector de clase. Pero para aplicar dicho estilo se utiliza el atributo id de las etiquetas. Veamos como se define
[css]#unico{color:#6947a7}[/css]

Notar el signo almohadilla al inicio del selector

Y lo aplicamos en el siguiente código
[html]

soy el único strong de la página con este color

No puedo ser de ese color

Tampoco lo puedo ser

[/html]
Salida

Como se puede ver, estos dos selectores se comportan de manera muy parecida ¿Cuál es entonces la diferencia entre un selector de clase y uno de id? La diferencia es sútil y radica en que un selector de clase puede aparecer una o más veces en una misma página, en cambio un selector de ID sólo puede aparecer una sóla vez en la página, debido a que se utiliza el atributo id de la etiqueta, y en una misma página no pueden haber dos etiquetas con el mismo valor de id. Por lo tanto el selector de ID se utiliza para que aparezca una vez en la página, por ejemplo definir el estilo de la etiqueta body; por el contrario el selector de clase aparece varias veces en la misma página, como vimos en el ejemplo de los tres encabezados.

Esto cuatros selectores pueden combinarse entre sí y dar una amplia variedad de forma de especificar elementos en los documentos. Les dejo un último ejemplo para mostrarles lo muy complejo que se puede volver una notación de selectores
[css]
p#directo strong.especial em a#video { … }
[/css]
Las declaraciones se aplicarán sólo a un link que tenga el valor id igual a video y que se encuentre dentro de un elemento em, que a su vez se encuentre dentro de un elemento strong con el atributo class igual a especial, el cual se encuentra dentro de un elemento p con el atributo id igual a directo.