Ya compañeros, pa que todos nos saquemos puros siete mañana en la prueba de html, la carta de hoy en su expendio de conocimiento favorito es una buena dosis de CSS a la vena... o aprenden o masoterapia es una buena opción.

No voy a desarrollar tooooda la teoría de CSS en este post, lo que si voy a hacer es explicarles como funcionan y dejarles al final del post una lista con los mejores tutoriales que encontré en la wers... obviamente, y como caché la cara de constantini cuando supo que el documento de estudio que mandó nuestro querido profesor estaba en inglés, todos los vínculos dan a páginas en francés... jejeje.

¿qué cresta es CSS?... es la forma pajera de decir Cascading Style Sheets, lo que en chileno poblacional vendría a ser Hojas de estilo en cascadas. Es un método para armar el layout de una página web. No es un programa especial, no es un lenguaje especial, es sólo un conjunto de atributos, etiquetas y valores. Se puede poner al principio del código, en cualquier parte dentro del HEAD de la página. Si la ocupas dentro del HEAD, sólo tendrá efecto en el estilo de la misma página, si por el contrario, quieres definir un estilo para un sitio (varias páginas, o varios archivos HTML), debes armar un archivo de hojas de estilo al que llamas cada vez que quieras ocuparlo... eso no lo han enseñado aún asi que olvídenlo...

La gracia de usar CSS es que estandarizas el estilo de la página, ahorras tiempo en la mantención y actualización de contenidos y usas un ancho de banda mucho menor al cargarla en un servidor. Lo principal es que te aseguras de que tu página se verá como tu la diseñaste, independiente del navegador que el usuario visitante a tu sitio esté usando. Por esto último hay que poner ojo en la compatibilidad, no todos los atributos sirven para todos los navegadores... pero eso por ahora no importa.

Que es lo que se puede y no se puede hacer con una hoja de estilo... configurar la apariencia de textos, fondos de página, colores, tamaños y en general, todo lo que aparezca en la pantalla. Incluso es posible hacer lo mismo pero para configurar una posible impresión de la página web. En este tema anterior hay algo que puede servir para saber que se puede y que no se puede con CSS.

Ya metamosle mano a esta cosa. La forma de usarlas es muy sencilla, como siempre digo, no es necesario aprenderse los nombres, pero debes saber para que sirven y como se usan. Hay dos conceptos claves: Selector, o lo que va a intervenir el estilo; y Declaración, que son las formas en como vamos a intervenir. Ya les voy a mostrar un ejemplo para que quede más claro, antes debo explicarles que para que una hoja de estilo tenga efecto, tal y como nos tiene acostumbrado el HTML, es necesario decirle al burro del navegador que vamos a usar una hoja de estilo, eso lo hacemos con la etiqueta style. Ahora si el ejemplo:

H1     {      text-decoration: underline;      text-align:center     }   P     {      font-Family:arial,verdana;      color: white;      background-color: black     }   BODY     {      color:black;      background-color: #cccccc;      text-indent:1cm     }

Lo que se ve ahí es una declaración de los estílos de 3 selectores: el selector H1, que es el de encabezados más grandes; el selector body que le da formato a la página completa; y el selector p que da formato a los párrafos.

Veamos ahora más en detalle. La declaración para el selector H1 dice que todo encabezado del tipo H1, estará subrayado (text-decoration: underline) y centrado (text-align:center. El selector p, está declarando que cada párrafo marcado con el estilo tendrá el fondo negro, letras blancas y tipografía arial o verdana. El selector body se declara como fondo gris oscuro, letras negras y margen de 1 centímetro. En este caso, cuando un párrafo no sea marcado por el style p, ocupará el style body. En esta página se puede ver el resultado (yo no la hice).

Así es como funciona el asunto, lo que queda es ver los listados de selectores que se pueden utilizar, cuales son las declaraciones que se pueden hacer para cada uno y que valor pueden tomar esas declaraciones. Como yo se que a varios les gusta que les entreguen la papilla molida, les dejo un listado de sitios donde podrán encontrar todo eso, cachureenlos harto que son de lo mejorcito que hay en la red:

• Desarrollo web, desde hace años es mi sitio de cabecera cuando tengo dudas sobre como hacer cosas en internet, es una muy buena fuente de tutoriales (y códigos jejeje).


• Tema anterior, aunque sea egocentrico, me autocito para recordarles de la hojita con el listado de los selectores, declaraciones y valores que se pueden usar. Ojo que no todas sirven para todos los navegadores, más adelante la complemento con esa información que en próximos ramos nos será muy útil.


• conclase.net, no sólo es nuestro amigo en C, también en HTML y CSS. Ojo que este un documento muy parecido al que envió el profesor pero en español.


• W3C, Este es el organismo oficial donde validabamos nuestras páginas. También tiene muy buena información sobre como usar las CSS.


• todo dreamweaver, clarito de que trata este sitio. No deberían perder esta dirección, tiene muy buenos tutoriales, aunque me parece que se pegaron el versión MX, lo que para efectos prácticos da lo mismo.


• CSS en dreamweaver CS3, si está jugando con la última versión del drimguiver, este tutorial (con fotitos incluidas) le explica como trabajar con CSS sin marearse.


• curso de Dreamweaver, a través de un blog, el autor postea temas específicos sobre como realizar ciertas tareas en el programa. En el título tiene la imagen de la versión 4 (de hace más de 10 años) pero los temas son para las versiones MX.

Ya, creo que con eso es suficiente... buen provecho!!!