Blog

16/09/2006

Que son los CSS (tutorial)

cssEl 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.

Escribo esto motivado por lo que me ha sucedido esta semana, donde mi sitio web aparecio nominado por su diseño en CSSmania y ademas en Webcreme como web de inspiración, todo gracias a utilizar CSS. 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 8 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 quees 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.

Cualquier duda no dudes en escribirme.
Saludos

Luis Alarcón Cheuquepal
Diseñador Gráfico Publicitario
Profesor de Diseño Web
Instituto Peruano de Arte y Diseño IPAD

Tutoriales
About Luis Alarcón
16 Comments
  1. Buen post, los CSS ademas hacen que las paginas no sean tan pesadas.
    Algo aparte, cuando vi en perublogs, EL blog de Luis Alarcon pense que era el blog de un un profe de la Facultad e Ingenieria de Sistemas de la Universidad Nacional Mayor de San Marcos, dicho profesor dicta el curso de Base de Datos y es muy apreciado en la facultad, un homonimo suyo no?.

    Saludos

  2. Hola Milagros

    Buen detalle que no habia mencionado. usar estilo o CSS logran que las páginas web sean más livianas, por ende cargan mucho más rápido y el código html es más liviano.
    Gracias por escribir y sobre tu profe de la “San Marcos” es solo el alcance de nombre, ya me he topado con varios personas que compartimos el mismo nombre.

    Saludos

  3. GUAU!
    Esto es justo lo que quería saber acerca de las CSS.
    Se nota que se pueden hacer maravillas.
    Siempre he querido ir un poco más allá, sobre todo en el diseño de mi blog, pero blogger y mi ignorancia me limitan un poco.
    Comenzaré a trabajar en Photoshop, a ver qué sale.
    Saludos Luis 😀

  4. Gracias por el tutorial de Css! hacia tiempo me preguntaba que querian decir esas siglas. En este momento me voy a poner a investigar como utilizar el Dreamweaver, leer los links a tutoriales que dejaste y hacerme un pequeño blog… asi que a trabajar se ha dicho!

  5. La idea que este mini”Tutorial” que más que nada es explicativo como puedes iniciarte en el arte de diseñar correctamente tus páginas y que se vean atractivas, estan los recursos que me han sido utiles más los sitios en donde puedes buscar un poco de inspiración y para que veas lo que se puede llegar a hacer usando los famosillos “CSS”.

    Cuando creen algo me avisan para verlo…
    Saludos.

  6. Gracias por el tutorial, me gustaría cuando tengas un tiempecito que explicaras como hacer algunos efectos interesantes que aparecen en las imágenes de tu página, como por ejemplo la cinta adesiva de las fotos o el clip que está al pie de la página, el papel arrugado, etc.

    Saludos

  7. Que son los CSS (tutorial)…

    Un excelente manual para concoer el uso de hojas de estilo cascada CSS, técnica que últimamente se ha convertido en un estándar del diseño web….

  8. Lo primero darle a autor la enhonarabuena por el artículo. Es claro, conciso y muestra, a través de links, buenos modelos a seguir.

    Últimamente he estado trabajando bastante con el tema de las CSS y poco a poco voy consiguiendo resultados… venía de la tradición “tablista” y me ha costado adaptarme.

    Pero hay una duda que me preocupa hace tiempo y que nadie me acaba de aclarar convenientemente. Al diseñar con css, los divs, las listas, etc. pueden situarse en la pantalla a través de los márgenes, paddings, etc… pero también dando coordenadas con el position, left y right. Yo estoy apostando más por éste último método (veo que muchas de las webs que yo tengo por “potentes” lo hacen de esta forma).

    Mi pregunta es: ¿qué es más recomendable, usar o no usar las coordenadas? y por otro lado ¿qué ventajas/desventajas supone en cuestiones de usabilidad, compatibilidad en navegadores, etc?

    Agradecería muchísimo al autor o a cualquier participante una respuesta a esta duda existencial que me invade (sic). Muchas gracias.

  9. No te imaginas la ayuda que me has brindado con este articulo, he visto algunos tutoriales de CSS y no lograba entender en realidad en que consistia este lenguaje, ahora que ya me enterado mejor de las cosas intentaré mejorar mi página.

    Gracias y muxa Suerte!!!!

  10. […] En septiembre del año pasado (2006) la prestigiosa publicación CSS Mania me agregó como uno de los sitios web destacados que han sido diseñados con hojas de estilo cascada (CSS). Hoy la web Dezigner Folio presento un resumen con lás páginas web mas votadas y con mejor calificación. Para mi sorpresa, me encuentro entre los top de votación, lo que no es menor pues CSS Mania se ha convertido en el showcase de sitios construidos con CSS más grande y actualizado del mundo en donde solo aparecen los mas relevantes. CSS Mania fue creada por Gabriel Segura en marzo de 2004 como una nueva sección dentro de su blog personal. en 2006 comienza una nueva etapa (en inglés) bajo el dominio cssmania.com. Muchas gracias a todos los que han han votado por mi sitio web:) […]

  11. […] CSS Zen Garden Resource Guide Qué son los CSS (tutorial) […]

  12. Que tal Luis, vi por primera vez tu página, me parecio muy interesante, ya que yo nunca he creado una página y me urge realizar una, ya que en la escuela me la estan pidiendo, pero no entendi bien.
    Quisiera saber que Sistema Administrador de Contenidos usaste, ya que me han dicho que Joomla es el mas conocido y utilizado pero quisiera saber cual es el que usas.
    Y quisiera saber como subiría videos a la página
    Mi pregunta es: es lo mismo Joomla que CSS.
    Espero pronto tu contestación, pues me urge realizar una página, y saber en que se programa.
    Saludos.

  13. […] Esta pequeña manito de gato cambia la cara de mi blog aprovechando por supuesto la facilidad que tenemos hoy en día los diseñadores web de usar las hojas de estilo en cascada o CSS donde el diseño y contenido de un sitio web están totalmente separados, así es posible reemplazar una hoja de estilo y tener un web completamente nueva o cambiar el aspecto cuantas veces queramos, sin alterar ni un milímetro el contenido del mismo. Eso es lo genial de trabajar con estándares. […]

  14. hace algun tiempo….que estoy interesado en esto del diseñoweb..miconociminetno es muy general en cunato a ello.por tanto quisiera saber a crietrio tuyo…si IPAD CONTIENE UN DESARROLLO CSSS EN SU CURRICULA…ymejor aun..si estas enseñando ahi…ya que deseo comensara estudiar…tengo algunas ideas…que siempre se me frustran por no saber usar estas herramientas….

  15. Muchas gracias, la verdad que estoy iniciando en el diseño web y tengo una consulta. El CSS se aplica a todo tipo de web? Les explico mejor, tengo en proyecto una web pero es bastante chica (www.mas-colon.tk) Quería saber si es recomendable css. Porque por lo que vi, las paginas que están hechas con css son bastante “largas”…
    Capaz que no tiene nada que ver, pero igual dejo la consulta. muchas gracias

  16. Hola estoy comenzando a aprender divs y css
    quedo encantada con lo que se puede hacer con css quedan paginas muy bonitas
    y ademas ya odio las tablas en los html
    muchas gracias !!!
    besos
    carola
    muack !
    (=^-^=)
    desde Buenos Aires Argentina –

Leave a Reply to Luis alarcón Cancel reply

Su dirección de correo no se hará público. Los campos requeridos están marcados *