Curso de Estándares Web - Día #2 Ejemplos de las distintas maneras de agregar el CSS al HTML que estoy editando.

3. Style Element Una de las formas de agregar CSS a su documento es utilizando el elemento de HTML style. El mismo debe llevar siempre el atributo type con su valor text/css. También podemos aplicarle al elemento style el atributo de media, si queremos especificar que los estilos son para pantalla, print, handheld, etc.

6. Link Tag Llamando a un archivo CSS externo al HTML.A estos archivos que son externos al HTML, se les llama external style sheets. Para poder llamarlos exitosamente, el elemento link debe estar dentro del elemento head al comienzo del documento.

10. Link Tag Alternate Style Sheets <link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” /> <link rel=”stylesheet” type=”text/css” href=”printer.css” media=”print” /> <link rel=”stylesheet” type=”text/css” href=”cell.css” media=”handheld” />

11. Link Tag Alternate Style Sheets <link rel=”stylesheet” type=”text/css” href=”estilos.css” media=”screen” title=”Normal” /> <link rel=”stylesheet” type=”text/css” href=”grande.css” media=”screen” title=”Texto Grande” /> <link rel=”stylesheet” type=”text/css” href=”chico.css” media=”screen” title=”Texto Chico” />

14. Anatomía de una regla (rule set)

15. Anatomía de una regla Un rule set es un enunciado que le indica al browser cómo desplegar un elemento determinado dentro del HTML.

16. ¿Qué es un rule set? Una regla (rule set) está compuesta por un selector, seguido de un “declaration block”.

18. Selector Un selector selecciona los elementos dentro de la página HTML que son afectados por el rule set. Incluye todo lo que viene antes de los brackets {.

19. Declaration block El declaration block es un contenedor que incluye todo lo que está dentro de los brackets {} (incluyéndolos). Los espacios en blanco dentro del declaration block son ignorados y se pueden utilizar para darle el formato visual a la regla que les sea más cómoda.

20. Declaration block a { color: red; font-family: verdana; } a { color: red; font-family: verdana; }

21. Declaration El declaration le indica al browser cómo desplegar un elemento determinado en la página, luego de ser seleccionado. Está compuesto de una propiedad y un valor, separados por dos puntos “:”.

22. Comentarios

23. Comentarios Se pueden insertar comentarios en el CSS para explicar el código. Al igual que los comentarios en HTML, son ignorados por los browsers.

27. Bibliografía CSS: The Definitive Guide Amazon: http://tinyurl.com/5hs7jf Eric Meyer

28. Bibliografía CSS 2.1 Specification http://www.w3.org/TR/CSS21/ World Wide Web Consortium