¿Qué es CSS? Introducción a desarrollo web

12min

CSS es un lenguaje que tiene como objetivo definir el aspecto de los documentos HTML, es decir, de las páginas web. Junto con el lenguaje HTML forman un tándem esencial en la web: HTML sirve para especificar el contenido y CSS sirve para indicar cómo debe visualizarse ese contenido en el navegador. El término CSS proviene de las siglas inglés Cascading Style Sheets, que se traduce como Hojas de Estilo en Cascada. 

Índice

¿Qué es CSS en programación?

CSS es un lenguaje para la declaración del aspecto que debe tener un documento. En el mundo de los lenguajes estándares tiene un lugar importante, ya que se usa para el omnipresente HTML, así como para otro lenguaje no tan conocido pero también fundamental como el XML. 

En el mundo del desarrollo es muy importante porque nos sirve para separar las capas de contenido y presentación, permitiendo que los documentos web sean mucho más mantenibles. Esto es porque, con un mismo contenido en HTML podemos cambiar radicalmente el aspecto solamente tocando el CSS. Así, si necesitamos actualizar el contenido, solamente tenemos que hacerlo en el código HTML y si necesitamos depurar el diseño, simplemente tenemos que cambiar el CSS. 

Pero, además, en la actualidad CSS ha ganado todavía más importancia porque nos permite que un mismo documento HTML pueda verse de maneras radicalmente distintas dependiendo del dispositivo con el que accedemos, ya sea un ordenador de escritorio o un móvil.

Fundamentos y principios básicos de CSS

Aunque no pretendemos hacer un curso de CSS en un solo post, vamos a enumerar los puntos más importantes y principios básicos que debemos conocer para usar el lenguaje CSS.

Selectores y reglas CSS

Los selectores son las herramientas que usamos en CSS para determinar los elementos a los que se aplicarán ciertos estilos. Por ejemplo, el selector «p» se refiere a todos los párrafos de un documento o el selector «h1» se refiere al encabezamiento principal.

Una regla CSS se compone de un selector y un conjunto de estilos que queremos aplicar a los elementos seleccionados, que se colocan entre llaves.

p {
    color: red;
}

Aparte del selector de etiqueta existen muchos tipos de selectores con diversas características y utilidad. Queremos mencionar también los selectores de clase, que permiten seleccionar todos los elementos cuyo atributo class tenga un valor determinado. 

Por ejemplo, para el siguiente código HTML

<div class='tarjeta'>Contenido</div>

Se podría seleccionar con:

.tarjeta {
  color: black;
}

Propiedades y valores de estilo

Las propiedades definen qué partes del estilo de los elementos queremos definir. Cuando indicamos una propiedad, por ejemplo el color del fondo, luego tenemos que indicarle el valor que deberá tener, para ello separamos propiedad y valor con dos puntos:

h1 {
  background-color: orange;
}

Cómo se aplica CSS en un documento HTML

Para asociar unas declaraciones de estilos CSS a un documento HTML lo podemos hacer de tres maneras distintas:

Inline

Quiere decir que lo hacemos directamente en el elemento HTML, en la propia etiqueta, usando el atributo style.

<img src='foto.jpg' style='border: 1px solid red;'>

Interno

Este tipo de declaraciones se colocan en el mismo documento HTML, generalmente en la cabecera (head) y afectan a toda la página. Para ello se usa una etiqueta style:

<style>
  body {
    margin: 0 0 32px 0;
  }
}
</style>

Externo

Permite vincular un archivo CSS declarado en un archivo externo utilizando la etiqueta link.

<link rel='stylesheet' href='style.css'>

Este es el mecanismo preferido generalmente, ya que permite definir una vez un estilo que podrán compartirlo todas las páginas de un sitio web.

Estilos básicos con CSS

CSS es un lenguaje extraordinariamente rico, que permite definir cientos de propiedades para alterar el aspecto de casi cualquier cosa que nos podamos imaginar. Vamos a repasar algunas de las más básicas.

Cambio de colores y fondos

Para cambiar el color del texto y el fondo se utilizan las propiedades color y background-color respectivamente.

body {
  color: #ffffff;
  background-color: #223388;
}

Esto hace que el cuerpo de la página tenga el color de texto blanco y el fondo de color azul oscuro.

Ajuste de márgenes y espaciado

Usando las propiedades margin y padding, podemos controlar el espacio alrededor de los elementos y el espacio desde los límites del elemento hacia dentro.

p {
  margin: 0 0 32px 0;
  padding: 5px;
  background-color: #333333;
}

Aquí estamos indicando que los párrafos tengan un márgen de 10 píxeles y un espacio hacia dentro de 5 píxeles, además de un color de fondo gris muy oscuro.

Cambio de fuentes y tamaños de texto

Con las propiedades font-family, font-size, y font-weight nos permiten personalizar la tipografía.

li {
  font-size: 20px;
  font-weight: bold;
  font-family: arial;
}

Ahora hemos indicado que los elementos de listas tengan un tamaño de texto de 20 píxeles, negrita y que la familia tipográfica sea arial.

Existen muchos otros estilos que puedes usar para manejar innumerables aspectos adicionales, para los que te recomendamos leer algún manual o un curso completo. 

Diseño con cajas en CSS

Cuando hablamos de CSS es importante mencionar el modelo de caja, que consiste en la manera en la que definimos los bloques de los elementos. Algunas de las propiedades más importantes para controlar la forma de las cajas son las siguientes.

Ajuste de dimensiones y bordes

Todo elemento de la página tiene unos límites y con CSS podemos definir cómo serán, sus dimensiones, los bordes y espaciados, entre otras cosas. En este sentido son fundamentales las propiedades como width, height, border, padding, y margin, pero hay muchas otras.

.tarjeta {
  background-color: antiquewhite;
  color: black;
  border: 1px solid orange;
  border-radius: 6px;
  padding: 20px;
  margin: 0 0 32px 0;
}

Lo más destacado aquí es que hemos colocado un borde a los elementos de la tarjeta, que tiene un píxel de anchura y es sólido de color naranja. Luego hemos colocado unos bordes redondeados, así como unos márgenes y espaciados.

Posicionamiento y flotado de elementos

El posicionamiento nos sirve para indicar cómo deben colocarse los elementos en la página y con respecto a otros elementos existentes. Así, de manera básica se pueden mencionar los atributos de estilo position y float, con los que podemos controlar el tipo de posicionamiento y el alineamiento de los elementos en la página, para colocarlos a los lados. De todos modos, el tema del posicionamiento es extraordinariamente amplio en el mundo de CSS y puede haber manuales enteros explicando todos los modelos de posicionamiento y sus detalles.

.alert-fixed-top-message {
  position: fixed;
  top: 0;
  left: 0;
  background-color: red;
  padding: 10px;
  color: white;
  width: 100%;
}

En este caso hemos colocado un mensaje fijado en la parte superior izquierda de la página, que se verá siempre, aunque el usuario haga scroll en el documento.

Diseño responsive y media queries con CSS

Actualmente es fundamental el diseño adaptable a los dispositivos, tanto ordenadores de escritorio como móviles o tablets.  Antiguamente los desarrolladores creaban versiones distintas de las páginas web para los distintos tipos de dispositivos. Actualmente en las CSS tenemos las media queries que nos permiten definir estilos para unos determinados tipos de medios.

Uso de media queries para adaptar el diseño a diferentes dispositivos

Las media queries permiten aplicar estilos basados en las características del dispositivo que está accediendo a la web. Lo habitual es que se refiera a la anchura de la pantalla, pero también podemos encontrar media queries para la altura, resolución, si se está imprimiendo un documento, etc.

Un ejemplo lo puedes ver a continuación:

/* Definimos un estilo por defecto */
p {
    font-size: 20px;
    color: blue;
}

/* Ahora un estilo para pantallas con un ancho mínimo de 1200 píxeles */
@media (min-width: 1200px) {
    p {
        font-size: 18px;
        color: green;
    }
}

Diseño fluido vs. diseño adaptativo

En CSS podemos aplicar distintas estrategias para asignar tamaños a los elementos, sobre todo útiles cuando estás diseñando el layout de la página. Dos de las estrategias que podemos encontrar habitualmente son el diseño fluido y adaptativo.

El diseño fluido se suele referir a las páginas que ocupan todo el ancho de la pantalla y a menudo usamos unidades de CSS de tipo porcentaje, para indicar que los elementos deben utilizar un porcentaje del área disponible para pintarse.

Por otra parte, tenemos el diseño adaptativo, que se adapta de manera más personalizada a las necesidades del diseñador y las pantallas, En este caso se suelen usar puntos de ruptura definidos en las media queries, para que el diseño pueda adaptarse de manera estética a los distintos tamaños de pantalla.

A veces se pueden combinar ambos métodos para, por ejemplo, hacer un diseño fluido hasta tamaños de pantallas de 1200 píxeles y a partir de ahí aplicar diseño adaptativo para que la página no se estire demasiado en la horizontal.

Introducción a Flexbox y Grid

En CSS hemos sido espectadores de una evolución muy relevante del lenguaje con dos nuevas especificaciones: Flexbox y CSS Grid Layout.

Anteriormente a estas especificaciones existían diversos problemas para conseguir algunos tipos de diseños y teníamos que acudir a triquiñuelas o frameworks para conseguir cosas como el alineamiento vertical o la disposición de los elementos del layout en rejilla.

Con Grid y Flexbox hemos dado un paso fundamental para facilitar la vida de los diseñadores. Estas especificaciones facilitan el posicionamiento de los elementos en dos sentidos:

  • Flexbox sirve para disponer los elementos de una manera precisa, siempre en la horizontal o la vertical, es decir, colocar los ítem en filas o colocarlos en columnas.
  • CSS Grid Layout nos permite definir rejillas perfectamente personalizadas para establecer los elementos de manera arbitraria en ellas.

Uso de Flexbox para diseños flexibles y alineación de elementos

Como hemos dicho, Flexbox permite la alineación flexible y distribución de espacio en columnas o filas (una u otra).  Esta especificación introduce muchos atributos que nos permiten ser muy detallistas en la disposición y distribución de los elementos de un contenedor. Veamos un ejemplo con este HTML de base:

<div class='flex-container'>
      <div>1</div>
      <div>2</div>
      <div>3</div>
</div>

Podemos posicionar con Flexbox con un CSS como este:

.flex-container {
    display: flex;  
    justify-content: space-between;  
    align-items: center; 
    background-color: #f3f3f3;
    padding: 20px;
}

Con display: flex activamos Flexbox. Luego tenemos justify-content: space-between para distribuir el espacio entre los elementos. y align-items: center para centrarlos en la vertical.

Creación de diseños más complejos con Grid CSS

En el caso que nuestro objetivo sea definir el layout de una página completa o una distribución compleja de los elementos de un bloque nos interesa aplicar CSS Grid, ya que ofrece un método de diseño bidimensional, donde se pueden alinear elementos en columnas y filas a la vez.

Veamos un ejemplo de demostración de las posibilidades de CSS Grid Layout usando el siguiente HTML:

<div class='grid-container'>
      <div class='grid-item'>Item 1 (ocupa las 3 columnas)</div>
      <div class='grid-item'>Item 2</div>
      <div class='grid-item'>Item 3</div>
      <div class='grid-item'>Item 4</div>
</div>

Ahora podemos ajustar los elementos en rejilla con un estilo CSS como este:

.grid-container {
    display: grid; 
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px; 
    padding: 20px;
    background-color: #f3f3f3;
}

Con display: grid activamos CSS Grid Layout. Luego, con grid-template-columns: repeat(2, 1fr) estamos indicando que los elementos se deben distribuir en dos columnas que ocupen de manera proporcional la mitad del espacio del contenedor. Con gap: 20px le estamos diciendo que los elementos se separen entre sí por 20 píxeles.

Transformaciones y animaciones con CSS

Otra de las características más vistosas de CSS son las animaciones y las transformaciones.

Transformaciones 2D y 3D

Con las propiedades transform podemos modificar la posición, tamaño y forma de los elementos.

.inclinado {
    transform: rotate(20deg);  
}

Con el código anterior conseguimos la rotación de los elementos de la clase .inclinado en 20 grados.

Creación de animaciones con keyframes

Pero para trabajos más detallistas y para producir efectos dinámicos con diversos pasos tenemos la posibilidad de crear animaciones con keyframes. Éstas nos permiten crear animaciones complejas definiendo múltiples puntos de transición.

Este es un tema complejo que te recomendamos leer en el post de animaciones CSS de nuestro blog.

Introducción a CSS frameworks

Cuando trabajamos con CSS es normal escribir todo el código a mano, sin embargo, para mejorar la productividad de los desarrolladores es habitual apoyarse en frameworks CSS.

¿Qué son los frameworks CSS?

Los frameworks de CSS son bases de código CSS que solucionan muchas de las demandas habituales a la hora de diseñar una página web, evitando que tengamos que escribir todo el código desde cero.

Ventajas y desventajas de utilizar un framework

La ventaja de usar un framework es, principalmente, una mayor rapidez en el desarrollo. Pero también ayudan en otras áreas:

  • Permite realizar diseños consistentes
  • Solucionan aspectos de compatibilidad entre navegadores.
  • Ayudan a crear esquemas de diseño más usables

Sin embargo, también podemos destacar algunas desventajas importantes:

  • A menudo derivan en una menor personalización del diseño
  • Aumentan innecesariamente el tamaño del CSS
  • Tienen una curva de aprendizaje adicional al lenguaje
  • A veces implica luchar contra el framework para conseguir personalizar los diseños

Finalmente cabe decir que algunos desarrolladores piensan que usar frameworks les ayudarán a diseñar sin ser expertos en CSS y ese es un error frecuente que puede derivar en una mayor frustración en su trabajo de diseño.

Ejemplos de frameworks populares

Existen numerosos frameworks CSS que tienen además distintos enfoques. Los más populares son los siguientes:

  • Bootstrap
  • Tailwind CSS
  • Materialize
  • Foundation
  • Bulma

La mayoría de estos frameworks los hemos abordado en profundidad en nuestro blog. Te recomendamos estudiarlos al menos por encima antes de decantarte por uno u otro.

Fernán García de Zúñiga

Artículos relacionados

Productos relacionados: