Un espacio para los entusiastas del web

¿Qué es CSS?

Publicado el 8 de Noviembre, 2003

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

Otros artículos relacionados

Califica esta nota:

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (8 votos, promedio: 3.25 de 5)
Loading ... Loading ...

Comentarios

  1. Unregistered

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


  2. David

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


  3. Unregistered

    muy bien


  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


  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:


  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


  7. DragonX

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


  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.


  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


  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.


  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


  12. enma belen

    por favor dejen ejemplos sobre como utilizarlos!!


  13. enma belen

    por favor dejen ejemplos sobre como utilizarlos!!


  14. jim

    entonces esto conecta mysql con php?


  15. No Registrado

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


  16. ThOnDeR5

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


  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


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


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


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


  21. jamp

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

    desde ya muchas gracias


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


  23. Efectivamente, con un simple tutorial no funciona


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


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


  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.


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


  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


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.


Sobre el Autor

Diego Barcia
Especializado en tecnologías JavaScript, CSS, (X)HTML, estándares, implementaciones de diferentes navegadores, validación, accesibilidad, diseño web, DHTML, RIA, XML.

Más artículos de Diego Barcia

Las Notas en tu correo


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