Un espacio para los entusiastas del web

76 com comentarios en total.
8 Nov 2003
153,393 Lecturas
Tags: CSS,

¿Qué es CSS?

CSS (Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación.

CSS
(Cascading Style Sheets, u Hojas de Estilo en Cascada) es la tecnología
desarrollada por el World Wide Web Consortium (W3C) con el fin de separar la estructura de la presentación. A pesar de que la recomendación
oficial del grupo de trabajo de la W3C ya había alcanzado la estabilidad requerida para que fuera soportada por los
principales navegadores comerciales, como Netscape e Internet Explorer, tan
tempranamente como en el año 1998, la situación de entonces, comúnmente conocida
como la “guerra de los navegadores”, hacía que los intereses comerciales de
las dos compañías en lucha por el mercado de usuarios de Internet se interpusieran
en el camino de las CSS.

Netscape 4 e Internet Explorer 4 incorporaron
parcialmente un soporte a esta recomendación, pero éste dejaba mucho que desear,
especialmente en Netscape 4, por lo que no era plausible la incorporación de
las CSS en el diseño
de sitios salvo en un muy mínimo número de características, y esto aún con reservas,
puesto que la manera de tratar los estándares era muy diferente y por eso ni
aún así se podía asegurar una visualización correcta de la misma hoja de estilos.
El uso más amplio de las posibilidades de las CSS en Netscape 4, por ejemplo, podía llegar a causar un"crash" en el browser sin
explicación alguna. Internet Explorer 4 tenía una mejor implementación de la
recomendación CSS nivel 1,
pero, de nuevo, parcial -aunque permitía el uso de un mayor número de características,
como aquéllas que exceden a la tipografía (la parte de las reglas de las CSS pensada para reemplazar al tradicional uso de tablas en el diseño de "layouts").

La situación, hoy, es muy diferente. Netscape
4 acaparaba, según estadísticas, el 80% de usuarios, al menos en Estados Unidos.
Desde el lanzamiento de Internet Explorer 5 -que tuvo problemas al principio,
luego solucionados mayormente con la versión 5.5-, esta situación cambió radicalmente
y hoy es éste el navegador más usado.

No obstante no incorporaba el soporte
completo de las CSS nivel 1.
Habría que esperar a las recientes versiones 6, para esto, e incluso para un
soporte parcial de las CSS nivel 2.
Otros navegadores, como Opera (el tercer navegador más usado), cuya última y
también reciente versión es la 6, incluye el mismo soporte.

A diferencia de entonces, hoy, CSS ya no es una novedad, pero ahora ya no hay pretextos para no usarla. Y es posible
utilizar ciertas posibilidades más amplias de las CSS,
como el control de otras características gráficas tales como imágenes y colores
de fondo, márgenes exactos y bordes, para evitar el trabajoso y a veces poco
gratificante diseño de tablas complejas para un "layout", que incluye frecuentemente
tablas anidadas y complicados algoritmos de combinación de celdas (me refiero
a la forma en la que los navegadores resuelven esto para su graficación), características
que hacen al archivo muy pesado para descargar, porque inundan el código con
la extensa serie de etiquetas requeridas. Y también, hoy, la "guerra de los
navegadores" ha terminado, y la W3C y los estándares empiezan a liderar el camino, por lo que ya no hay tantas trabas para un uso más extendido, aunque medido, de las CSS.

En vista de esta breve recapitulación,
entonces, podríamos decir que los beneficios de usar CSS son dobles. Por un lado, evitamos hacer a los archivos demasiado pesados (excluyendo
el largo código requerido para las tablas anidadas y el añadido de características
gráficas), y definimos el "estilo visual" de un sitio entero sin necesidad de
hacerlo etiqueta por etiqueta, para cada una de las páginas. Por otro, trabajamos
con estándares, y separamos hasta cierto punto la estructura (vale decir, el
código) de la presentación, logrando una manera más nítida de trabajar, y lo
que es más: en un sencillo documento CSS,
definimos lo que yo llamaría una "plantilla gráfica" para todo un sitio. Vale
decir, que cualquier cambio hecho a un estilo CSS,
se reflejará en todos los elementos que sean referidos a éste, automáticamente,
con sólo editar un sencillo documento CSS.

Este tutorial se centra en el diseño de
un documento CSS pensado
para un sitio web entero, y sobretodo con el uso medido de las características
de CSS nivel 1, aunque
recomendando un uso medido de tablas para el "esqueleto" del "layout" de las
páginas (no obstante, el tutorial no cubre este aspecto; sólo el de creación,
sintaxis y edición de un documento CSS
externo enlazado a los documentos HTML).
Esto implica, por una parte, un "target" de navegador que no sea exclusivo de
la "última generación" (la cual comprende: IE 5, 5.5, 6, Netscape 6, y Opera
6). Por lo tanto, se intenta una correcta visualización de la página también
en Internet Explorer 4. Es posible que Netscape 4 muestre la página más o menos
correctamente, pero esto no debe preocuparnos ya que es un navegador que no
soporta estándares.

Capitulo
Siguiente

Diego BarciaDiego Barcia para Maestros del Web.
Agrega tu comentario | Enlace permanente al artículo

Síguenos en: @maestros | Fan page

Comentarios

  1. Unregistered

    Muy buen artículo, deberían ampliar más este tema…

    Responder
    1. Sin duda, hay que darle más caña a este tema.

  2. David

    Bravo Diego, he captado la potencia de CSS y su facilidad en 5 minutos.

    Responder
  3. Unregistered

    muy bien

    Responder
  4. PatomaS

    Hola

    Bueno, el artículo está bastante bien, aunque algo superficial. Pero bien.

    Con lo que definitivamente no estoy de acuerdo, es a demeritar métodos de maquetación en beneficio de otros, sobre todo si la valoración no es justa y ecuánime.

    Por ejemplo se considera que maquetar una página sin tablas es más complicado que con ellas. Eso suele ser verdad debido a que usualmente hemos empezado con las tablas en vez de con otras etiquetas, pero no es cierto si empezamos nuestras andanzas en el diseño usando las otras etiquetas.

    Por otro lado, el artículo habla de estándares, pues bien, el W3C, dice claramente que las tablas son para información tabular, no para maquetar.

    Respecto al ejemplo de los códigos, está bastante bien nuevamente.

    :)

    Pero hay algo de lo que suelen adolecer esos ejemplos y es algo muy importante, la DTD, documentos sin la DTD correcta hacen que los navegadores interpreten de forma inexacta los documentos que diseñamos, por lo que es más probable que no se vean iguales en diferentes navegadores.

    Bueno, creo que la valoración final del artículo por mi parte es que está muy bien para quien quiera iniciarse en este tema.

    :)

    Felicidad

    Responder
  5. Aisengard

    simplemente son Hojas de Estilo en Cascada, ya lo explicaron en el articulo que para ser de introduccion a las css esta bueno. :arriba:

    Responder
  6. Zerjillo

    Hola, solo quería comentar que el tutorial de CSS me parece un poco simplista y además sufre varios “problemas”.

    El primero es que no estra a fondo en el tema, solo de manera muy superficial.

    No se hace suficiente incapie en la utilidad de hojas de estilo externas frente a redefiniciones dentro del codigo de la propia página (obviamente en ocasiones puntuales se puede usar, pero la separación entre el contenido y su vista debe ser muy alta).

    Ya se ha comentado anteriormente que no se hace incapié ni explicación de como se puede maquetar una web con css en vez de tablas, y esto es de lo más importante.

    Los ejemplos contienen errores que supongo que a los novatos puede traerlos por la calle de la amargura (faltan cerrar comentarios HTML, posibles problemas con mayúsculas / minúsculas)…

    Puede ser cuestión de gustos, pero establecer algunas reglas de escritura puede ayudar a ver claramente el código (indentaciones, etc). Poner varias definiciones de estilos en una sola linea, pese a que es factible y perfectamente válido, no ayuda precisamente a la comprensión.

    Para la mayoría de los estilos no se especifican todos los posibles valores que pueden aplicarse, ni tampoco su significado. Ya me explicarás como alguien vaa saber si no se lo dices que vertical-align puede tomar, por ejemplo, los valores top, bottom y middle (y que no vale center).

    En algunos puntos que pueden ser confusos se podrían haber añadido enlaces a otros tutoriales. Por ejemplo cuando se especifica que los colores se recomienda usarlos con su codigo hexadecimal: [color=#00ff00]#00ff00[/color] no se comenta que significa eso, y un novato ciertamente no lo tiene por que intuir. Hay muchos tutoriales al respecto en la web, por ejempo: http://www.w3schools.com/html/html_colors.asp . Y ya que se recomienda que los colores se usen con su código hexadecimal, mejor no poner ejemplos como

    Texto aquí

    Se aconseja utilizar un software que en principio no solo no es software libre, es que ni siquiera es gratuito. Existiendo editores bastante buenos que no cuestan nada, me parece o bien ridículo o muy partidista.

    Pero lo que verdaderamente me ha hecho escribir este comentario es que hay que aplicarse el cuento. No vale decir que una tecnología es buena, permite hacer muchas cosas de manera eficiente, que es estandar, que en el futuro todo webmaster debe usarla, y en una web especializada como esta podamos ver cosas como esto (extraido del propio tutorial de css):

    En su estructura, a los fines de la brevedad utilizaremos sólo dos opciones de estilos CSS: redefiniciones de etiquetas HTML y estilos personales, llamados clases (class). Las redefiniciones se aplican de manera automática a todo elemento homónimo en el HTML, sin necesidad de una referencia especial. Las clases, en cambio, requieren de un atributo class que identifique al elemento individualmente. Si definimos una clase llamada .especial, y la queremos aplicar a un elemento específico <span> dentro del código html, deberemos definir un atributo class para <span> de la siguiente forma:

    ¿Que clase de codigo con estilos es ese? No se la herramienta de edición de HTML que se usará, pero desde luego, o no es muy buena o no se sabe usar. Llama la atención el uso continuo de la etiqueta FONT (en el mismo tutorial se dice queesta “deprecated”, es decir “desaprobada”), la anidación constante de , y , cuando se podría haberse hecho una clase CSS asi de facil:

    code:

    .resaltado {
    color: #0099ff;
    font-weight: bold;
    font-style: italic;
    }


    y aplicarlo con un simple

    code:


    Por cierto, esto:

    …. de estilos …

    también es como para plantearse lo que se está haciendo.

    En fin, que alabo la iniciativa de crear tutoriales asequibles para gente que se quiera iniciar en esto, pero tampoco hay que hacer cosas simplistas y mediocres. Por lo demás seguiré consultando vuestra web, que siempre se pueden aprender cosillas.

    Un enlace a un buen tutorial y referencia de CSS (aunque en ingles):

    http://www.w3schools.com/css/default.asp

    Gracias por el tiempo dedicado y un saludo

    Zerjillo

    Responder
  7. DragonX

    Creo que el documento es bastante bueno, pero conincido mucho con PatomaS, creo que es bastante superficial e incompleto.

    Responder
  8. cvander

    Interesante comentario que se agradece. Solo hace falta notar que el tutorial ya es de hace varios años. Se están realizando cambios al sitio de MDW basándose en estándares y uso de CSS que espero pronto estén disponibles.

    Responder
  9. Zerjillo

    Llevas razón, es un tutorial antiguo.

    Esperaré con ganas las modificaciones a la web y cualquier otro tutorial más actualizado

    Zerjillo

    Responder
  10. No Registrado

    No tengo ni idea de si el tutorial es bueno o malo, supongo que por lo que tu dices….. pues bueno.

    Tampoco es que yo tenga idea de css, estoy empezando pero agradezco que gente como tu se detenga unos minutos para que otros no estemos horas y horas rompiendonos la cabeza con tutoriales que no valen.

    De todos modos no creo que Diego García pretenda crear la biblia del css, lo coges, lo miras y agradeces su esfuerzo, tambien.

    Responder
  11. enma belen

    bueno este espacio me gusta mucho ya que nos ayuda a saber mas sobre css como de html que mas que nada se utiliza en linux,fuera mejor si pusieran ejemplos para ver como se utilizan.

    muchas gracias,enma belen

    Responder
  12. enma belen

    por favor dejen ejemplos sobre como utilizarlos!!

    Responder
  13. enma belen

    por favor dejen ejemplos sobre como utilizarlos!!

    Responder
  14. jim

    entonces esto conecta mysql con php?

    Responder
  15. No Registrado

    no, esto es como el C pero más tipo pascal, es que no te enteras

    Responder
  16. ThOnDeR5

    Una consulta como hacer que le css le de a un link la target??? gracias

    Responder
  17. Jesus

    Hola, estoy estudiando el módulo medio de informática y la verdad HTML y CSS (el cual voy a empezar) no me van muy bien. ¿Me podeis echar una manita? Decirme si podeis alguna página o manual.

    Gracias

    Responder
  18. Me parece muy claro, estoy iniciando y ya tengo una idea, pero podrian incluir ejemplos.

    Responder
  19. Puedes bajarte plantillas de Web 2 y allí verás perfectamente el ejemplo que necesitas

    Responder
  20. trabajar con css requiere mas de experiencia propia que de seguir/copiar tutoriales

    Responder
  21. jamp

    Podrian deja el codigo para sacr el pie de pagina y el encabezado??

    desde ya muchas gracias

    Responder
  22. Trabajar con css puede simplificar mucho el diseño pero no es nada sencillo

    Responder
  23. Efectivamente, con un simple tutorial no funciona

    Responder
  24. Es complicado, pero con un poco de paciencia se consiguen grandes resultados

    Responder
  25. Sin duda, los css son practicamente obligatorios, sino son un lio el diseño

    Responder
  26. El uso de CSS esta cada vez mas extendido, sus ventajas son enormes. Las tablas ya se estan dejando de usar para maquetar una web. Con un poco de practica enseguida te das cuenta que las posibilidades con CSS son mas amplias.

    Responder
  27. Queda horrible la web pero igual =P=P

    Responder
  28. quisiera empezar una pagina, pero la verdad no se absolutamente nada de computaccion habra un lugar donde me digan paso a paso y en palabras de a centavo, como elaborar una existe algo asi, algo como websites for dummies o algo asi?? les agradeceria que me informaran por favor

    Responder
    1. hombre empieza con un libro o leyendo todo lo que hay en esta web. Facil. ;)

  29. leonardo

    muchisimas gracias por este aporte, espero que sigan con este animo de ayudar a las nuevas generaciones con aportes como este, me considero como uno de las nuevas generaciones en desarrollo de programas y diseño de pag webs muchas gracias

    Responder
  30. Gracias por el aporte, a los que empezamos nos ayuda mucho.
    No siemrpe se encuentran entradas en blogs o manuales que ayuden a un novato.

    Responder
  31. Queria preguntar una duda:
    He escuchado hablar de css3 y css4, pero no entiendo cual es la diferencia al crearlos.
    Se que la compatibilidad con los navegadores es diferente, pero yo siempre hago el css igual, aunque sea basico…

    Responder
  32. Excelente articulo, los felicito. Esta explicado de una forma muy clara que cualquiera puede entender.

    Responder
  33. Totalmente de acuerdo con los comentarios de escorts barcelona

    Responder
    1. Muy Buen aporte. un saludo

  34. Para lupita, te recomiendo que empieces con lo basico, html basico, te puede ayudar mucho utilizar dreamweaver.
    Despues el tema de css, php y demas ya lo iras viendo conforme vayas necesitando

    Responder
    1. Sin duda lo más recomendable es dreamweaver, aunque si quieres hacer algo más fuerte tipo paginas dinamicas tendrás que aprender lenguaje script tipo php.
      Animo!!!

  35. A ki va un consejo:

    Reemplazo de texto por imagen vía CSS

    Para que el documento xhtml no pierda la estructura semántica lo ideal es que si queremos colocar una imagen como título lo hagamos desde CSS

    Título

    h1 {
    text-indent:-9999px;
    width:100px;
    height:100px;
    background: url(imagen.gif) no-repeat
    }

    (Además así hacemos que los buscadores den más importancia a nuestro título)

    Responder
  36. El css es como todo, hay que ponerse poco a poco, practicar, estudiar, equivocarse, buscar soluciones, volver a empezar… esto dia tras día hasta que al final lo veras tan sencillo que lo haras con la gorra.

    Responder
  37. Así es, hay que practicar mucho, como en cualquier otro trabajo, con paciencia todo se consigue.

    El css es una herramienta fundamental hoy en día que facilita enormemente el trabajo de maquetación de una Web.

    Un saludo.

    Responder
  38. Muchas gracias por el aporte. Excelente informción.

    Responder
  39. Muy buena información.

    Para mi también es fundamental el CSS, sin el no se que haría… bueno, esta claro, echar el doble de horas en cada trabajo :-)
    Un saludo.

    Responder
  40. Hace tiempo que uso CSS en sus diferentes versiones, y creo que es de lo mejor que la texnologia web nos ha podido ofrecer.

    Responder
  41. oiie s wuenisima zta pag :D m nknta muxiximooohhh..!!!! hahah shhiii
    :P oiie nunk c ls ocurra crrarla ok xq m morire hahahaha tngo 13 año y m interesa todo esto de esta pag km la hicieron ah? wueh eso es prble d ustd :D nunk cls olvide aki tienen una amix xsi la mosks jajaj muak ls amo bsos

    Responder
  42. Lo deseable es que hubiera un standard, unico y generico. Es muy irritante tener que hacer ficheros CSS para explorer…

    Responder

Trackbacks

  1. Pixelco Blog » Blog Archive » Tutoriales - CSS
  2. ..::wWw.TigreBlanco.Net::..
  3. Herramientas adecuadas para el diseño y desarrollo de un sitio web « Design Jasso
  4. GarrobitoProgramador » Cómo estructurar una hoja de estilos
  5. Zoombau » WordPress: herramienta para manejo de contenidos y blogs
  6. Neuquén Blogs » Algunos consejos para tu blog
  7. Desarrollo multinivel para aplicaciones basadas en el web
  8. Firefox y las extensiones esenciales para un desarrollador « Historias de un Webmaster
  9. Extensiones de Firefox específicas para desarrollo Web
  10.   Ventajas de usar CSS by Stardust XS
  11. Perez Rio » Blog Archive » Hacks en CSS que te evitarán dolores de cabeza en Internet Explorer
  12. CSS Conceptos, Tips!!! « San Sivar Graphics
  13. Malisi.us » Blog Archive » Una lista de 9 puntos para determinar que no entiendes el diseño web
  14. El mundo de la programación y el diseño web » Blog Archive » Hacks en CSS que te evitarán dolores de cabeza
  15. TodoLinks » Blog Archive » El framework Symfony, una introducción práctica (I parte)
  16. TodoLinks » Blog Archive » Smarty: requerimientos, instalación y aprende a programar
  17. zou temas de diseño » Blog Archive » Sobre Wordpress
  18. Recursos para aprender más sobre CSS « Code Impludt
  19. Cómo estructurar una hoja de estilos - BBBlog
  20. Tu sitio web en dispositivos móviles - BBBlog
  21. Hacks en CSS que te evitarán dolores de cabeza en Internet Explorer - BBBlog
  22. Opciones para crear páginas web amigables de impresión - BBBlog
  23. Recursos para aprender más sobre CSS - BBBlog
  24. CSS 3: las nuevas propiedades · BBBlog
  25. Comparación de Frameworks en Javascript · BBBlog
  26. MANTENIMIENTO DE SITIOS WEB
  27. CSS, XSL and CiteUlike « >>din<<
  28. Tips para usuarios de dreamweaver CS3 | delaPC.com
  29. Maquetando con hojas de estilo | delaPC.com
  30. CSS – Una introducción! | MI Schools

Deja tu Comentario

Maestros del Web se reserva el derecho de moderación de los comentarios. Evita utilizar palabras soeces, ataques directos, descalificativos, insultos, de lo contrario tu comentario será eliminado.



Acerca de
Maestros del Web nace cuando intentamos traducir Webmaster al Español. Nacimos orientados al diseño y desarrollo web. Hoy somos un espacio de apoyo para los entusiastas que participan en proyectos en la red.
Leer más de Maestros del Web