¿Qué son las hojas de estilo en cascada o CSS?

Los sitios web se construyen con una serie de lenguajes de códigos. Cada lenguaje tiene un propósito específico. El lenguaje básico de todos los sitios web es HTML, es el lenguaje que configura todo en su lugar. CSS es el lenguaje de código que estiliza lo que el HTML ya ha establecido. Si no tuviéramos CSS, los sitios web serían muy aburridos y todos tendrían el mismo aspecto.

En esta publicación, veremos la función del CSS, cuál es su apariencia y cómo juega un papel importante en el diseño web.

¿Qué significan las siglas CSS?

Corresponden a las siglas en inglés de «Cascading Style Sheets». Una hoja de estilos es una serie de códigos que definen el aspecto o presentación de los elementos de una página. El término «cascada» se refiere a cómo se encuentran distribuidos los elementos en la hoja de estilo, desde el componente primario a los detalles más específicos.

¿Cómo funciona CSS con HTML?

Al crear un sitio web primero se establece el lenguaje HTML, tras esto se configura el CSS. A veces se incluye la hoja de estilo justo al lado del código HTML y otras veces se incluye un enlace a una URL diferente donde se encuentra la hoja de estilo. El uso de una u otra opción radica en las propiedades que queramos incluir. Una hoja de estilo aparte es mejor cuando queramos que todo el texto o el fondo sea el mismo. Las hojas de estilo aparte también se usan para los tema hijo o child themes.

El código HTML tiene etiquetas de ‘selector’ que especifican cada elemento. Por ejemplo, H1 para Heading 1. Body para el cuerpo del texto, head para el encabezado y P para los párrafos. Lo que hace el CSS es añadir el tamaño o color especificado por el selector de HTML.

¿Cómo es el CSS?

Siguiendo el estilo que tiene HTML con las etiquetas selectoras y cómo CSS es una hoja de estilo en cascada, veamos un ejemplo de cómo se vería. Todos los códigos tienen etiquetas de apertura y cierre. La etiqueta para CSS es «style», el fragmento de código a continuación especifica el tamaño, el color y la alineación del encabezado 2. 

<style>

h2 {

font-size: 24px;

color: blue;

text-align: center;

}

</style>

Primero, la etiqueta CSS ‘style’ abre el fragmento, luego es el turno del selector. Justo después, una llave contiene la propiedad y el valor. Primero la propiedad, ‘tamaño de fuente’ y dos puntos. Tras esto viene el valor ’24px’ seguido de un punto y coma. Cuando se muestran todas las propiedades y valores para un selector específico, se cierran las llaves. Si este es el final del estilo para esa sección, entonces se añade la etiqueta de cierre ‘style’.

¿Cómo usar CSS con otras plataformas?

CSS y HTML (junto con otros lenguajes de código para diferentes funcionalidades) son utilizados por los desarrolladores para crear sitios web desde el back-end. Los diseñadores web, por otro lado, usan creadores de sitios web, constructores visuales y temas secundarios para crear sitios web. 

Los diseñadores web usan CSS en módulos especiales donde pueden diseñar diferentes secciones del diseño. También pueden cambiar la hoja de estilo en el tema secundario.

¿Qué otras cosas puede hacer?

Además de hacer que el texto sea rojo y los fondos sean blancos, CSS también puede ayudar con el diseño web adaptable o la animación. CSS puede crear colores de degradado, elementos flotantes, movimiento y efectos 3D. Hay muchas funciones que HTML no puede hacer por sí solo.

Usar CSS es una parte importante del diseño web adaptable. Los fragmentos de CSS proporcionan el tamaño del contenido en porcentajes, asegurándose de que se ajuste a la pantalla en la que se muestra. Con las consultas de medios, el contenido también puede cambiar según el tamaño de la pantalla, moviendo elementos para que se ajusten mejor.

CSS nos puede ayudar con muchas funcionalidades de los sitios web, sin duda, vale la pena aprender y estar actualizado en este sentido.

Dónde aprender más sobre CSS

Si quieres aprender más sobre CSS, hay muchos recursos online donde aprender. W3Schools.com, por ejemplo, es un gran lugar para comenzar a aprender todo sobre CSS y cómo usarlo. FreeCodeCamp es otro recurso en línea que te enseña el código a medida que lo construyes. CSS-Tricks es otro sitio web lleno de artículos, videos y recursos para aprender cómo usar CSS.

Tu turno

Como puedes ver, saber cómo funciona el CSS es igual de importante que saber cómo funciona HTML. Sin CSS, todos los sitios web serían sosos y aburridos. No tendríamos animaciones, degradados ni hovers. ¡Nunca es demasiado tarde para aprender algo de código y crear mejores sitios web!