¿Qué es CSS?

08.11.2003

¿Qué es CSS?

Por Diego Barcia | 97,181 Lecturas
Archivado en: 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

Califica esta nota:

(6 votos, promedio: 3 de 5)

Loading ...

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.

Comentarios

21 comentarios en total.

Unregistered 24.11.2003 - 19:24 - #

Muy buen artículo, deberían ampliar más este tema…
David 04.12.2003 - 14:08 - #

Bravo Diego, he captado la potencia de CSS y su facilidad en 5 minutos.
Unregistered 17.05.2004 - 19:00 - #

muy bien
PatomaS 18.05.2004 - 02:15 - #

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
Aisengard 18.05.2004 - 20:52 - #

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

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
DragonX 08.02.2005 - 08:56 - #

Creo que el documento es bastante bueno, pero conincido mucho con PatomaS, creo que es bastante superficial e incompleto.
cvander 08.02.2005 - 14:40 - #

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.
Zerjillo 08.02.2005 - 17:11 - #

Llevas razón, es un tutorial antiguo.

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

Zerjillo
No Registrado 12.12.2005 - 11:31 - #

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.
enma belen 13.09.2006 - 13:10 - #

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
enma belen 13.09.2006 - 13:20 - #

por favor dejen ejemplos sobre como utilizarlos!!
enma belen 13.09.2006 - 13:24 - #

por favor dejen ejemplos sobre como utilizarlos!!
jim 30.09.2006 - 13:14 - #

entonces esto conecta mysql con php?
No Registrado 30.09.2006 - 13:15 - #

no, esto es como el C pero más tipo pascal, es que no te enteras
ThOnDeR5 18.10.2006 - 19:36 - #

Una consulta como hacer que le css le de a un link la target??? gracias
Jesus 21.11.2006 - 09:40 - #

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
Iniciador 24.01.2008 - 16:11 - #

Me parece muy claro, estoy iniciando y ya tengo una idea, pero podrian incluir ejemplos.
Escorts Barcelona 02.03.2008 - 04:20 - #

Puedes bajarte plantillas de Web 2 y allí verás perfectamente el ejemplo que necesitas
escorts 29.03.2008 - 05:00 - #

trabajar con css requiere mas de experiencia propia que de seguir/copiar tutoriales
jamp 06.08.2008 - 08:25 - #

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

desde ya muchas gracias

Trackbacks

12 trackbacks en total.

¿Qué es CSS?

Sobre el autor

Comentarios

Trackbacks

Editorial

Otras Notas Relacionadas

Boletín