Para comprender qué es CSS3, es necesario retroceder en el tiempo por un momento y recordar que hasta hace poco, los equipos de diseño web solían crear exclusivamente para pantallas con resoluciones de 800x600 píxeles y, más adelante, 1024x768 píxeles. Sin embargo, con la llegada de dispositivos de distintos tamaños y, por ende, diferentes resoluciones de pantalla, se ha vuelto prácticamente imposible diseñar teniendo en mente una resolución específica. Es aquí donde cobra relevancia el diseño dinámico y, afortunadamente, entra en escena el CSS.
Si te dedicas al diseño digital, seguramente habrás notado que cada vez es más necesario adquirir habilidades técnicas en programación. Esto no solo enriquece tu perfil profesional, sino que también te brinda nuevas oportunidades laborales, como el diseño de experiencias de usuario (UX), interfaces de usuario (UI) para sitios web, aplicaciones móviles o incluso diseño de aplicaciones nativas para móviles.
¿Qué significa CSS3?
El CSS podría definirse como un tipo de lenguaje que permite definir y crear la presentación visual de un documento ya estructurado y escrito en un lenguaje de marcado como puede ser HTML. Es decir, permite generar el diseño visual de páginas web e interfaces de usuario.
Las siglas CSS corresponden a “Cascading Style Sheets”, cuyo significado es:
- Cascading: Los estilos aplicados a los elementos de una página web se propagan de manera descendente a los elementos contenidos en ellos.
- Style: Mediante las indicaciones CSS lo que hacemos es aplicar estilos visuales a los diferentes elementos de las páginas web.
- Sheets: Cuando se generan los estilos de una página web se añaden en ficheros aparte u hojas con la extensión “.css”
¿Cuándo se creó CSS3?
CSS3 no tiene una fecha de creación, ya que representa una evolución continua del lenguaje de hojas de estilo en cascada que tuvo su inicio con la primera especificación de CSS, conocida como CSS1, lanzada en diciembre de 1996. A esta le siguió CSS2.1, publicada como recomendación en mayo de 1998.
A medida que la web y las tecnologías asociadas evolucionaron, se vio la necesidad de agregar nuevas características y mejoras, lo que condujo a lo que comúnmente llamamos CSS3.
A lo largo del tiempo, se han agregado diversos módulos para abordar diferentes áreas de diseño y presentación web, tales como propiedades para diseños flexibles, sombras y fuentes personalizadas, entre otras características.
Dado que CSS3 se compone más de una colección de características y módulos que de una versión concreta con una fecha de lanzamiento, en la práctica profesional es común referirse a esta tecnología simplemente como "CSS", sin detallar su número de versión.
¿Para qué sirve CSS?
CSS es necesario en el diseño web y la programación frontend para crear experiencias web dinámicas y atractivas. Por ejemplo, CSS ofrece herramientas para aplicar transformaciones y animaciones a elementos. Las transformaciones permiten rotar, escalar y mover elementos en la página. Las animaciones, por otro lado, pueden hacer que los elementos cambien gradualmente de un estado a otro, agregando interactividad y vida a la página.
¿Todavía dudas sobre la importancia del diseño dentro del desarrollo web? Veamos un ejemplo de cómo ha evolucionado este aspecto a lo largo de los años.
Relación entre HTML y CSS
Lo principal que hay que saber es que estos dos lenguajes son la base de cualquier página web. HTML es un lenguaje de marcado de hipertexto que se escribe con elementos, estos pueden ser etiquetas, contenido o atributos. HTML da instrucciones al navegador sobre cómo estructurar el contenido. Por otro lado, CSS da instrucciones sobre los detalles de diseño de dicho contenido en todo el sitio web.
El HTML y el CSS son herramientas complementarias e indispensables para el diseño web adaptable. Por ejemplo, el CSS aporta instrucciones de diferentes diseños y estéticas dependiendo del dispositivo desde el que se acceda al sitio web. Por lo tanto, un sitio web ocultará o enseñará ciertos contenidos dependiendo de si se entra con un móvil o con un ordenador de sobremesa.
¿Y qué pasa entre HTML, CSS y JavaScript?
Es importante destacar que ni HTML ni CSS son lenguajes de programación. Para conseguir que un sitio o página web muestre contenido actualizado en el momento, animaciones 2D o 3D, o permita interactuar con mapas, hace falta dar instrucciones con un lenguaje de programación como JavaScript. Es el lenguaje que permite realizar acciones complejas dentro de una página web.
Este esquema sirve para entender qué aporta cada lenguaje en la construcción de una página web:
Estructura de CSS
Para entender la sintaxis y estructura básica de CSS, primero debemos saber que cada estilo se compone de una propiedad y un valor. Por ejemplo, si deseamos cambiar el color del texto a azul, podemos utilizar la propiedad "color" y el valor "blue". Las reglas de estilo se agrupan dentro de un selector, que apunta a los elementos HTML que deseamos estilizar.
Seguro ya te has dado cuenta que en este tema hay mucho inglés, y es por eso que enseñamos el idioma a nuestro estudiantado, impartiendo clases especializadas para developers. Esta es una oportunidad única en el mercado, disponible dentro de la Boost Academy, el programa exclusivo para el alumnado que termina con éxito cualquiera de nuestros bootcamps.
Selectores y Especificidad
Los selectores en CSS permiten apuntar a elementos específicos en una página web para aplicar estilos. Puedes utilizar selectores de etiqueta, clase, ID, combinadores y pseudo-clases para controlar dónde se aplican los estilos. Además, necesitamos entender el concepto de especificidad, ya que determina qué estilo se aplica cuando hay reglas conflictivas en el código. Por ejemplo, una regla con un selector de ID tiene una especificidad más alta que una regla con un selector de clase.
El Box Model
El modelo de caja (box model) en CSS describe cómo se calculan las dimensiones y los espacios alrededor de un elemento HTML.
- Contenido (Content): Esta es la parte más interna de la caja y guarda el contenido real, como texto o imágenes.
- Relleno (Padding): El relleno es el espacio entre el contenido y el borde del elemento. Proporciona espaciado interno dentro de la caja.
- Borde (Border): El borde es una línea que rodea el contenido y el relleno. Puede tener un ancho, estilo y color que se pueden personalizar.
- Margen (Margin): El margen es el espacio fuera del borde, creando un espaciado entre el elemento y otros elementos en la página. En diseño, el margen permite “darle aire” a la disposición del sitio web.
Tipos más comunes de CSS
En la práctica, se recomienda que en lugar de aplicar estilos directamente a cada elemento dentro del HTML, se use CSS para separar la presentación de la estructura, lo que facilita enormemente la gestión y el mantenimiento de un sitio web. Aun así, es muy útil que conozcas las diferentes formas en que se puede aplicar estilos al código.
CSS en línea (Inline CSS)
Los estilos se aplican directamente a los elementos HTML utilizando el atributo “style”. Es útil cuando se desea aplicar un estilo específico a un solo elemento, pero puede volverse difícil de mantener a medida que aumenta la complejidad del sitio.
CSS interno (Internal CSS o Embedded CSS)
En este caso, los estilos se definen en la sección “<style>” del documento HTML, generalmente en el encabezado “<head>”. Estos estilos se aplican a las páginas específicas y son útiles cuando se necesita un control más amplio sobre el estilo, pero aún se mantiene dentro del mismo documento.
CSS externo (External CSS):
Este es uno de los enfoques más comunes. Los estilos se definen en un archivo de hoja de estilos independiente con extensión ".css". Luego, este archivo se vincula a las páginas HTML utilizando la etiqueta “<link>” en el encabezado. Los estilos externos se pueden reutilizar en múltiples páginas, lo que facilita la consistencia y el mantenimiento.
CSS en línea con JavaScript (CSS in JavaScript)
Los estilos se definen directamente dentro del código JavaScript utilizando bibliotecas como "styled-components" en React.js. Aunque menos común, esta técnica permite crear componentes autónomos y reutilizables.
Frameworks CSS
Los frameworks CSS, como Bootstrap, Foundation y Materialize, ofrecen un conjunto predefinido de estilos y componentes que facilitan el diseño y la estructura de una página web.
CSS en preprocesadores
Los preprocesadores CSS, como Sass y Less, son lenguajes que se compilan en CSS estándar. Ofrecen características como variables, anidamiento y mixins, lo que facilita la escritura y el mantenimiento de hojas de estilos complejas.
CSS en postprocesadores
Los postprocesadores, como PostCSS, se utilizan para realizar transformaciones y optimizaciones en el CSS después de que se ha generado. Pueden agregar prefijos de proveedores, optimizar el rendimiento y realizar otras tareas automáticas.
CSS en diseño responsivo
El diseño responsivo se logra mediante el uso de media queries en hojas de estilos CSS. Las media queries permiten aplicar estilos específicos en función del tamaño de la pantalla, lo que garantiza que el sitio se vea y funcione bien en una gran variedad de dispositivos.
¿Dónde aprender CSS para desarrollo web?
La utilización de estilos CSS3 marca la diferencia en los sitios web de hoy en día. Cada vez tenemos más herramientas a nuestro alcance que hacen más sencillo que cualquier persona con conocimientos básicos pueda construir sitios web. En consecuencia, el volumen de páginas web de diferentes contenidos, tipos y tamaños aumenta cada día de forma considerable, por eso es prácticamente imprescindible diferenciarse de los sitios web de la competencia.
Se puede hacer mediante el contenido o creando comunidad, pero sin duda, un diseño agradable, novedoso y adaptado a diferentes dispositivos suma muchos puntos. Aprender programación te dará las herramientas para poder crear tus proyectos con libertad y añadir valor. Y estás en el lugar indicado, ya que desde el primer módulo, nuestro alumnado aprende sobre la sintaxis de CSS.
¡La combinación de CSS, HTML y JavaScript es la base para iniciarse en el desarrollo web! Los bootcamps de programación de HACK A BOSS están pensados para ayudar a transformar a las personas y que estas puedan, a su vez, transformar su vida profesional.
