Si quieres comenzar en el mundo del diseño web hay tres tecnologías que vas a manejar continuamente: HTML, CSS y JavaScript. Hoy le dedicamos un artículo («metaartículo») al segundo, para aprender CSS y conocer sus aspectos básicos, qué significa, para qué sirve… pero, también, para ofrecerte una serie de artículos donde puedes profundizar en cada uno de los temas.

¿Qué significa CSS?

CSS son las siglas de Cascading Style Sheets, traducido, hojas de estilo en cascada.

¿Para qué sirve CSS?

Los estilos CSS sirven para dar forma visual a las etiquetas HTML de las páginas web. Normalmente estas declaraciones se insertan en un archivo de extensión .css, pero también pueden ir declaradas dentro del HTML dentro de etiquetas <style> o como propiedad de un elemento HTML.


<style type="text/css">
   .fondo-oscuro {
      background:#000;

      color:#fff;
   }
   h1 {
      margin-bottom: 15rem
   }
</style>

<h1 style="font-size:2rem" class="fondo-oscuro">Título</h1>

¿Qué versiones hay?

Aunque coloquialmente las nombramos como versiones, realmente deberíamos llamarlos niveles. Actualmente disponemos de CSS3, y es posible que sea la última, ya que se ha construido mediante un sistema de módulos que permite que se le vayan añadiendo nuevas funcionalidades, como flexbox o css grid.

Te lo contamos en este artículo:

Novedades de las nuevas versiones

Como hemos explicado en otros artículos, CSS3 está en desarrollo constante. Desde su lanzamiento ya se solventaron limitaciones en las alineaciones verticales o declaraciones sobre columnas. Estas novedades hacen que, continuamente, haya que estar aprendiendo nuevos métodos y recursos.

Para ampliar información, te dejamos dos artículos, uno sobre las novedades de CSS para 2024 y otro sobre dos de los módulos más exitosos, una comparativa entre flexbox y CSS grid ¿cuál usar?

Flexbox VS CSS Grid - Qué son y en qué se diferencian

Los frameworks

Ahora bien, no confundamos las versiones con los frameworks. Hay una serie de bibliotecas muy populares que usan el CSS para crear conjuntos de reglas predefinidas. De esta manera podemos tener, por ejemplo, un botón prediseñado con varias reglas que luego podemos pisar y modificar. Estos frameworks facilitan mucho la creación de páginas web, no solo en cuanto a la velocidad a la que se puede dar forma a la página, sino, también, en cuanto a legibilidad, armonía y funcionalidad.

Algunos de los más famosos son Bootstrap o Materialize.

¿Como funciona?

Básicamente funciona creando una serie de reglas para los diferentes elementos. Es decir, por un lado seleccionamos el elemento y, por otro, le decimos qué hacer.

Selectores

Tenemos varias maneras básicas de encontrar los elementos:

Mediante la etiqueta HTML
Mediante una clase
Mediante el ID
Mediante atributos
…

Vamos a ver los tres más sencillos:

Selector HTML

Se trata de crear una regla buscando una etiqueta HTML sobre la que se aplicará. Estas son reglas muy genéricas, normalmente se usan para definir elementos muy básicos de inicio, como los enlaces.

Se identifica escribiendo, directamente, la etiqueta HTML correspondiente.

a{
   color: #f00;
}

Selector de clase

Podemos crear una regla llamando a una clase. Es la manera más habitual de trabajar el CSS. Una clase es un identificador con la que etiquetamos ciertos elementos para «agruparlos» bajo un mismo estilo visual. La clase no es única, por lo que podemos usarla para denominar elementos que se repiten dentro de la página.

Se identifica con un punto delante del nombre.

En el siguiente ejemplo podemos ver que a todos los elementos etiquetados con la clase «resaltado» les hemos aplicado una negrita y un color.

.resaltado{
   font-weight:bold;
   color:#ff0;
}

Selector ID

Finalmente, podemos realizar un selector que busque un ID. Estos identificadores deben ser únicos dentro de la página mostrada, por tanto se trata de reglas muy específicas para elementos muy puntuales.

Se identifica con la almohadilla (#) delante del nombre.

#menu-principal{
   font-size:1.4rem;
}

Otros selectores y mezclas

Hemos visto sólo tres formas básicas de hacer un selector, pero también está el selector universal, por atributos… La cosa no acaba ahí, puedes conocer más sobre los selectores CSS en este artículo de selectores avanzados. La cuestión es que, una vez conocidos todos ellos, se pueden mezclar para realizar selectores compuestos o pisar reglas con otras de más autoridad.

Te dejamos enlace a ambos artículos sobre selectores CSS:

Propiedades

El otro elemento básico de la regla es el qué hacer. Para ello hay toda una serie de propiedades que debemos conocer para cambiar el tamaño de letra, color, fondo, alineación, márgenes, etc.

a.btn{
   background-color:#3300ff;
   padding: 2rem;
   border-radius: 5px;
   margin-bottom:0.5rem;
   width:100%;
}

En este artículo puedes encontrar una lista de propiedades CSS:

CSS según dispositivos

Actualmente, con la importancia de la navegación a través de los móviles, es básico que una web se adapte a los diferentes tamaños de pantalla. Esto se consigue, principalmente, con el diseño responsive, y para ello son clave las media queries, una serie de indicaciones en nuestro CSS para condicionar las diferentes reglas a diferentes anchuras de pantalla.

Aquí puedes leer más sobre el diseño responsive y adaptativo:

CSS Minificado

Minificar el CSS implica eliminar todo aquello que no aporta información relevante. Básicamente es eliminar lo que no aporta información, los espacios en blanco y comentarios del CSS y presentar todo el código en una sola línea. Puedes consultar nuestro artículo donde desarrollamos este tema.

Minificar CSS y JS: Acelerar tu página web

Efectos CSS y mezclas

Con todo lo visto podemos ver el potencial del CSS. No solo es capaz de dar un aspecto agradable a nuestra página web, sino que, cada vez más, dispone de funcionalidades y efectos que harán de la navegación toda una experiencia: Adaptabilidad, diseños personalizados, animación, transiciones, efectos de superposición… Puedes ver, por ejemplo, este tutorial de cómo crear un efecto cristal.

Con la interacción que ofrece JavaScript, puedes añadir, por ejemplo, un botón para alternar entre modo normal y modo oscuro. Te lo contamos en su día en un tutorial:

Los bordes redondeados pueden dar un estilo más informal y flexible a tu sitio web. Se asignan con la propiedad ‘border-radius’, a la que se le asigna un valor en píxeles, porcentaje, rem… Si eres fan de las esquinas redondeadas en CSS, te dejamos un artículo donde profundizar en el tema.

Conclusión

Con estos bonitos efectos de CSS cerramos esta recopilación. Esperamos que te sirva para aprender las bases del diseño web. Si necesitas ayuda para aprender, también impartimos un curso CSS avanzado.