CSS
Hojas de Estilo en Cascada (del inglés Cascading Style Sheets) o CSS es el lenguaje de estilos utilizado para describir la presentación de documentos HTML o XML (en-US). CSS describe como debe ser renderizado el elemento estructurado en la pantalla, en papel, en el habla o en otros medios.
FUNDAMENTOS DE CSS | developer.mozilla.org
¿Qué encontrarás aquí?
El propósito de esta pagina es describir las funciones de la tecnología CSS, su historia, frameworks, copiladores y agrupar las direcciones URL de documentación oficial como de otras webbApps.
- Qué es CSS
- Historia de CSS
- Compatibilidades con los navegadores web
- Frameworks y Copiladores
- Herramientas web
- Referencias
Qué es CSS
El CSS (Cascading Style Sheets) Hojas de Estilos en Cascada llamada en castellano, se llama asi porque las características se aplican de arriba a abajo mediante reglas que poseen un esquema prioritario.
Esta especificación es un lenguaje de diseño gráfico que se escribe dentro del código HTML del sitio web y, permite crear páginas de una manera más exacta y aplicarles estilos (colores, márgenes, formas, tipos de letras, etc.) por lo que se tiene mayor control de los resultados finales.
¿Para qué sirve?
La tecnología CSS está diseñada para marcar la separación del contenido de las páginas web y la forma de presentación de estas. Lo que genera múltiples beneficios, como:
- Presentar el documento final en diferentes estilos (pantalla, voz, impresión).
- Tener un sitio web responsivo.
- Evitar hacer archivos demasiado pesados.
- Definir el estilo visual de todo un sitio web. Así, si cambiamos una página, cambiarán todas automáticamente.
- Trabajar con estándares y separar (hasta cierto punto) la estructura de la presentación logrando un trabajo más definido.
- Provee más flexibilidad y control en las especificaciones del sitio web.
- Simplifica la creación de la página.
El código CSS hace la vida más fácil al desarrollador front-end al separar las estructura de un documento HTML de su presentación. Dicho de otro modo el HTML actuaría como es esqueleto de la web, definiendo su estructura básica, y el CSS añadiría toda la capa de personalización sobre el que la web define su aspecto final.
Siguiendo este fundamento resulta muy fácil para un diseñador web realizar cambios en la apariencia de una web sin afectar de manera dramática a su contenido.
Los navegadores Web al aplicar las reglas CSS a un documento modifican la manera en que este nos es presentado. Todo se produce de manera transparente al usuario. Estas reglas se componen de dos elementos clave. El primero es un conjunto de propiedades con valores establecidos para actualizar la presentación del contenido HTML. El segundo elemento son los selectores. Estos nos ayudan a seleccionar los elementos afectados por el nuevo valor de la propiedad. De esta manera evitamos que el CSS afecte a todos los elementos del HTML y solo aquellos que queramos. Por ejemplo a los elementos contenidos en primer párrafo de nuestro documento o seleccionar de manera alterna las filas de una tabla.
Historia de CSS
Las hojas de estilos aparecieron poco después que el lenguaje de etiquetas SGML, alrededor del año 1970. Desde la creación de SGML, se observó la necesidad de definir un mecanismo que permitiera aplicar de forma consistente diferentes estilos a los documentos electrónicos.
El gran impulso de los lenguajes de hojas de estilos se produjo con el boom de Internet y el crecimiento exponencial del lenguaje HTML para la creación de documentos electrónicos.
El organismo W3C (World Wide Web Consortium), encargado de crear todos los estándares relacionados con la web, propuso la creación de un lenguaje de hojas de estilos específico para el lenguaje HTML y se presentaron nueve propuestas. Las dos propuestas que se tuvieron en cuenta fueron la CHSS (Cascading HTML Style Sheets) y la SSP (Stream-based Style Sheet Proposal).
En 1995, el W3C decidió apostar por el desarrollo y estandarización de CSS y lo añadió a su grupo de trabajo de HTML. A finales de 1996, el W3C publicó la primera recomendación oficial, conocida como “CSS nivel 1”.
A principios de 1997, el W3C decide separar los trabajos del grupo de HTML en tres secciones: el grupo de trabajo de HTML, el grupo de trabajo de DOM y el grupo de trabajo de CSS.
La adopción de CSS por parte de los navegadores ha requerido un largo periodo de tiempo. El mismo año que se publicó CSS 1, Microsoft lanzaba su navegador Internet Explorer 3.0, que disponía de un soporte bastante reducido de CSS. El primer navegador con soporte completo de CSS 1 fue la versión para Mac de Internet Explorer 5, que se publicó en el año 2000.
La primera revisión de CSS2, usualmente conocida como “CSS 2.1”, corrige algunos errores encontrados en CSS2, elimina funcionalidades poco soportadas o inoperables en los navegadores y añade alguna nueva especificación.
De acuerdo al sistema de estandarización técnica de las especificaciones, CSS2.1 tuvo el estado de “candidato” (candidate recommendation) durante varios años, pero la propuesta fue rechazada en junio de 2005. En junio de 2007 fue propuesta una nueva versión candidata, y está actualizada en 2009, pero en diciembre de 2010 fue nuevamente rechazada.
En abril de 2011, CSS 2.1 volvió a ser propuesta como candidata, y después de ser revisada por el W3C Advisory Committee, fue finalmente publicada como recomendación oficial el 7 de junio de 2011.
CSS3
A diferencia de CSS2, que fue una única especificación que definía varias funcionalidades, CSS3 está dividida en varios documentos separados, llamados “módulos”.
Cada módulo añade nuevas funcionalidades a las definidas en CSS2, de manera que se preservan las anteriores para mantener la compatibilidad.
Los trabajos en el CSS3, comenzaron a la vez que se publicó la recomendación oficial de CSS2, y los primeros borradores de CSS3 fueron liberados en junio de 1999.
Debido a la modularización del CSS3, diferentes módulos pueden encontrarse en diferentes estados de su desarrollo, de forma que a fechas de noviembre de 2011, havia alrededor de cincuenta módulos publicados, tres de ellos se convirtieron en recomendaciones oficiales de la W3C en 2011: “Selectores”, “Espacios de nombres” y “Color”.
Compatibilidades con los navegadores web
Debido a los desacuerdos por parte de las empresas detrás de los navegadores web existen distintas propiedades o funciones CSS que no se adaptan correctamente entre los distintos navegadores.
Un ejemplo y por ser de los que mas falla, Internet Explorer o Microsoft Edge, al ser parte del mundo corporativo presenta varios problemas al querer reproducir los estilos mas modernos y no tan estandarizados, dando problemas en cache por ejemplo en las animaciones. Pero no son los unicos!
Por suerte para la comunidad tenemos CanIUse, en este portal podremos siempre confirmar que nuestro CSS se adapta a nuestras necesidades por lo que lograremos la eficiencia deseada al momento de maquetar una web.
Un consejo: “Los efectos siempre para el final”.
Frameworks y preprocesadores
Los framework CSS llevan con nosotros más de una década, pero en la actualidad pocos son los frameworks que pueden competir en el mercado, ya que este tipo de herramientas ha evolucionado mucho.
Existen otros Frameworks de CSS y nada indica que no dejen de salir de nuevos, aqui he mencionado solo 3 de los mas populares, pero si buscáis, encontrareis mas.
FRAMEWORKS:
Por otro lado están los preprocesadores CSS, unas herramientas que nos permite escrivir nuestro CSS de manera mas eficiente, permitiendo usar variables y ecuaciones para al compilar crearnos los estilos adecuados a nuestras necesidades.
Preprocessadores:
Herramientas Web
Existen cientos de aplicaciones web y extensiones en los navegadores web que nos permiten trabajar con CSS, desde copiar el valor de un color ha generar botones, animaciones o estilos concretos.
Algunas de las paginas que recomiendo:
Puede interesarte:
Javascript
JavaScript es el lenguaje de programación que debes usar para añadir características interactivas a tu sitio web
HTML
HTML (Lenguaje de Marcas de Hipertexto, del inglés HyperText Markup Language) es el componente más básico de la Web. Define el significado y la estructura del contenido web.