Que son los CSS (tutorial)




El diseño web ha cambiado, si quieres tener un sitio web impactante y a la vez funcional no puedes seguir utilizando viejas técnicas como el uso de tablas y frames ni menos abusar de las intro flash eternas o otras aberraciones por el estilo que lo único que logran es aburrir a los usuarios y espantarlos, de seguro esa persona probablemente ya nunca más visite tu web.

Como muchos no saben o tienen una remota idea de lo que son las Hojas estilo cascada (CSS), este post es un breve tutorial de como trabajar con esta técnica que últimamente se ha convertido en un estándar del diseño web, logrando que las páginas luzcan aún más increíbles.

Comencemos por el principio:

¿Que son los CSS?
CSS son las siglas de Cascading Style Sheet (Hojas de Estilo en Cascada). Es un lenguaje de programación web, usado para dar mayor personalización a nuestras páginas web y mantener el mismo estilo en múltiples páginas. La idea es separar el diseño del contenido y así lograr una mayor independencia a la hora de cambiar o renovar un diseño web.

¿Desde cuando existen?
La primera iniciativa de separar el contenido de la presentación con la introducción de CSS de nivel 1 fue en Diciembre de 1996 y la especificación de CSS de nivel 2 existe desde 1998. ver www.w3.org

¿Porqué se ha demorado tanto en implementarse?
La principal respuesta tiene un nombre y es Explorer de Microsoft que aparte de sus conocidos problemas de seguridad nunca ha marchado con los estándares.

¿En que se utilizan?
Usando CSS, se puede definir los colores, fondos, bordes, margen, alineaciones, fuentes, tamaño y muchas cosas más para casi todas las partes de una página web. La idea es separar el diseño del contenido de la página web.
Los “Estilos” en cascada ahorran mucho trabajo CSS es un gran adelanto en cuanto a diseño Web se refiere, ya que le permite al diseñador un control total de como se despliega una página Web.
Con el surgimiento de la web 2.0 las hojas de estilo son utilizadas en todos las plantillas de blog, fotolog y empresas que quieren mejorar el aspecto y funcionalidad de sus sitios web.

¿En que parte de la página se encuentran los “Estilos”?
El ideal es que los estilos se encuentren en un archivo externo con extensión .css en donde estarán definidos todos los atributos del sitio web.

¿Que obtenemos como resultado?
El uso de CSS ha desplazado a un segundo plano la tecnología de Flash, hoy es el estándar dentro de lo que se llama la web 2.0 donde todo es dinámico y difundible por la Web. A toda esta revolución es lo que se le llama la Web 2.0, o sea la Web como “plataforma” donde CSS coexisten con tecnologías como AJAX, XHTML, Java entre otros.

Que programas se pueden utilizar para diseñar con CSS
Dreamweaver es un buen programa para comenzar a diseñar sitios web basados en CSS, trae integrada plantillas y recursos en donde crear código CSS es muy sencillo, aunque muchas opciones avanzadas hay que trabajarlas manualmente. También he leido de otro programa llamado CSSVISTA que es una extensión para firefox que ayuda a editar el CSS.



¿Que otra cosa debo saber?
Básicamente trabajar con capas o etiquetas div,(si todavia usas tablas significa que estas muy desactualizado) esto es primordial para posesionar los elementos del diseño en tu documento html, también requiere un buen manejo de creación de imágenes en Photoshop, los mejores diseños comienzan primero en este programa y luego se traslada a Dreamweaver, se crean las capas en donde se colocan las imágenes previamente diseñadas.

Ejemplos de páginas creadas con CSS
Si buscas inspiración, existen muy buenos ejemplos visitando estos links de galerías de sitios creados exclusivamente con CSS.

www.cssmania.com
www.cssbeauty.com

Proyectos CSS
El proyecto Camaleón CSS ha sido inspirado por la idea y concepto original del CSS Zen Garden, creado por Dave Shea, un diseñador web de Vancouver Canadá.
El objetivo de estos proyecto es demostrar como un mismo documento puede ser visualizado de muchas formas diferentes en base a la aplicación de diferentes hojas de estilos. Todos los diseños que puedes ver en esas páginas usan exactamente el mismo documento XHTML como base, lo único que cambia es la hoja de estilos aplicada.

www.csszengarden.com
www.camaleoncss.com

Tutoriales de CSS
Como cualquier otro tema, internet es una fuente inagotable de conocimiento, aquí podemos encontrar buenos tutoriales en línea donde podemos profundizar y conocer más acerca de las hojas de estilo. Estos sitios web me han sido de gran ayuda:

Desarrolloweb
Tejedores del Web
Inconciente Colectivo
Diseñorama
Juque

Estudios formales
Si estas pensando en estudiar esto mas seriamente, te sugiero que revises y preguntes en los institutos acerca del contenido de sus clases, asegurate si incluyen el desarrollo y aprendizaje de CSS en sus materias, recuerda que ofertas de institutos hay muchos, donde enseñen de verdad y en forma actualizada muy pocos.