¿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

Aprende más sobre este tema con la guía HTML5.
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.
Unregistered
24/11/2003

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

David
4/12/2003

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

Unregistered
17/05/2004

muy bien

PatomaS
18/05/2004

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

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
8/02/2005

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
8/02/2005

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

cvander
8/02/2005

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
8/02/2005

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

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

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

por favor dejen ejemplos sobre como utilizarlos!!

enma belen
13/09/2006

por favor dejen ejemplos sobre como utilizarlos!!

entonces esto conecta mysql con php?

No Registrado
30/09/2006

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

ThOnDeR5
18/10/2006

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

Jesus
21/11/2006

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

[...] ¿Qué es CSS? – Maestros del Web [...]

[...] del mercado, así que os remito a él para más información. Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional para la programación cliente [...]

[...] del mercado, así que os remito a él para más información. Con ellos crearemos el código HTML/CSS (maquetación), siendo Aptana la opción más profesional para la programación cliente [...]

[...] Hojas de Estilo en Cascada (CSS) son el recubrimiento gráfico de tu documento HTML. Cuando estamos creando una web tenemos [...]

[...] el contenido y el diseño en XHTML y CSS  lo que permite modificar de una manera sencilla el estilo del [...]

[...] como base para la tuya puede ser un inicio, aunque luego hace falta creatividad y manejo de CSS para personalizar tu blog. Si quieres utilizar colores interesantes para tu diseño, te recomiendo [...]

[...] contar con un diseño de interfaz y el producto final es la página vista en el explorador (HTML, CSS, JavaScript). Si nos damos cuenta, existe varias tecnologías involucradas en el producto final. [...]

[...] en HTML puro o en modo visual y agregar o editar elementos. Además es posible, validar HTML, CSS, XML o [...]

[...] en HTML puro o en modo visual y agregar o editar elementos. Además es posible, validar HTML, CSS, XML o RDF. [ Documentación / Descargar [...]

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

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

[...] el momento en que usemos CSS, el tamaño y posicionamiento de los elementos que formen nuestras páginas podrá ser exacto. [...]

[...] continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con [...]

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

jamp
6/08/2008

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

desde ya muchas gracias

[...] botones de XHTML/CSS válido en el pie de página de tu sitio web. Esto te hace sentir como un standarista cuando [...]

[...] continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con [...]

[...] dentro del proyecto. El Alias definido es necesario para que se vean las imágenes, JavaScripts y CSS del propio framework (que se utilizan en el entorno de desarrollo) y debe contener la ruta completa [...]

[...] incluimos código en JavaScript o CSS dentro de la plantilla provocaremos un error. Esto suelen pasar por que este código utiliza [...]

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

Efectivamente, con un simple tutorial no funciona

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

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

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.

Queda horrible la web pero igual =P=P

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

[...] el contenido y el diseño en XHTML y CSS lo que permite modificar de una manera sencilla el estilo del [...]

leonardo
18/08/2009

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

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.

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…

[...] yarov Viernes Diciembre 4, 2009 CSS: (Cascading Style Sheets) hojas de estilo en cascada es un lenguaje de programación artíficial que [...]

[...] Hojas de Estilo en Cascada (CSS) son el recubrimiento gráfico de tu documento HTML. Cuando estamos creando una web tenemos [...]

[...] la cual no soporta imágenes y estilos. Mientras que la tecnología WAP2 soporta imágenes, XHTML y CSS. Además, algunos ofrecen pantalla monocromática o pantallas de alta resolución, soportando CSS y [...]

[...] continuación mostramos algunos hacks útiles, que podremos utilizar en nuestros archivos CSS para solucionar problemas que nos suceden a diario con nuestros diseños web cuando se muestran con [...]

[...] forma ideal de implementar un diseño especial para impresión es utilizando las hojas de estilo agregando una extra y especificando mediante la propiedad media, que es para impresión y no para [...]

[...] CSS: (Cascading Style Sheets) hojas de estilo en cascada es un lenguaje de programación artíficial que permite estructurar un documento desarrollado en HTML o XML. Como todos sabemos el lenguaje CSS permite separar la estructura de un documento de su presentación que fue desarrollado por la W3C. [...]

[...] muy útil. En el primer ejemplo, vemos la implementación de esta opción en la versión actual de CSS. Para este caso, debemos crear dos clases CSS y dos objetos DIV para simular la [...]

[...] pasado de páginas estáticas basadas en solamente HTML y CSS a páginas dinámicas que utilizan motores externos como PHP, ASP y Coldfusion para dar este [...]

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

Totalmente de acuerdo con los comentarios de escorts barcelona

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

    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!!!

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)

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.

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.

Muchas gracias por el aporte. Excelente informción.

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.

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

[...] Separa el contenido y el diseño en XHTML y CSS. [...]

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

[...] CSS maestros de web. Retrieved July 1st, 2010 from http://www.maestrosdelweb.com/editorial/introcss/ [...]

[...] podemos utilizar para crear nuestros sitios web se encuentran (HTML, ColdFusion, PHP, ASP, XSLT, CSS, JavaScript, XML, JSP, ASP [...]

[...] CSS nació de la propuesta de dividir la estructura del documento de su diseño. La problemática que se venía dando en el viejo orden era que los documentos eran muy difíciles de mantener. Si por ejemplo, suponemos un sitio con alrededor de 100 o más documentos el cambiar el diseño a cada uno era muy laborioso. [...]

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

[...] Fuente: Maestros del Web. Intro CSS [...]

El cambio que supuso las CSS a la hora de maquetar webs, fue inmenso.
Y ahora que vamos a poder unir el HTML con CSS, esto va a ser fantástico.

Mis felicitaciones por el artículo.

[...] instrucciones PHP particulares para cada caso, y algunas veces hasta su propia hoja de estilos CSS. Los Módulos están en el directorio /modules/ y los Componentes en/components/. Puedes probar [...]

Excelente aporte

199