Si estás empezando en el desarrollo web, probablemente ya hayas oído hablar de CSS, uno de los lenguajes fundamentales para crear páginas atractivas y bien estructuradas. Mientras que HTML se encarga principalmente de definir el contenido y la estructura de una página, CSS permite controlar su apariencia.

Con unas pocas reglas podemos cambiar colores, tamaños, fuentes, márgenes, posiciones y prácticamente cualquier aspecto visual de una página web.

¿Qué es CSS?

CSS, cuyas siglas corresponden a Cascading Style Sheets o Hojas de Estilo en Cascada, es un lenguaje utilizado para definir la presentación de los documentos HTML.

Por ejemplo, HTML puede indicar que tenemos un título:

<h1>Mi página web</h1>

Mientras que CSS puede determinar cómo queremos que aparezca:

h1 {
    color: blue;
    font-size: 40px;
}

El resultado será un título azul y de mayor tamaño.

Si quieres consultar todas las posibilidades del lenguaje, puedes recurrir a la documentación de CSS de MDN, que incluye referencias y ejemplos de sus propiedades.

¿Cómo se utiliza CSS?

Existen diferentes formas de añadir CSS a una página HTML. Una de las más sencillas cuando estamos aprendiendo es utilizar una etiqueta <style> dentro del documento:

<!DOCTYPE html>
<html>
<head>
    <style>
        h1 {
            color: red;
        }
    </style>
</head>
<body>

<h1>Hola mundo</h1>

</body>
</html>

También podemos utilizar CSS directamente dentro de un elemento mediante el atributo style:

<p style="color: red;">Este texto es rojo</p>

Sin embargo, en proyectos reales suele ser más recomendable utilizar una hoja de estilos externa:

<link rel="stylesheet" href="estilos.css">

Y dentro de estilos.css podemos escribir las reglas que queremos aplicar.

La estructura básica de una regla CSS

Una regla CSS está formada normalmente por un selector, una o varias propiedades y sus correspondientes valores.

Por ejemplo:

p {
    color: green;
    font-size: 18px;
}

En este caso:

• p es el selector.
• color es una propiedad.
• green es el valor de la propiedad.
• font-size es otra propiedad.
• 18px es su valor.

Las propiedades se escriben dentro de unas llaves { } y normalmente terminan con un punto y coma.

Cambiar el color del texto

Una de las primeras cosas que podemos aprender con CSS es modificar los colores.

La propiedad color permite establecer el color del texto:

p {
    color: red;
}

También podemos utilizar diferentes formatos de color:

p {
    color: #ff0000;
}

O mediante valores RGB:

p {
    color: rgb(255, 0, 0);
}

Esto proporciona muchas posibilidades para personalizar el aspecto de una página.

Cambiar el color de fondo

Para modificar el fondo podemos utilizar background-color.

body {
    background-color: lightgray;
}

También podemos aplicar un fondo a un elemento concreto:

div {
    background-color: yellow;
}

De esta forma podemos crear tarjetas, bloques, menús y diferentes zonas visuales dentro de una página.

Cambiar el tamaño y tipo de letra

CSS también permite controlar la tipografía.

Por ejemplo:

p {
    font-size: 18px;
    font-family: Arial, sans-serif;
}

font-size establece el tamaño de la letra, mientras que font-family permite indicar qué tipo de fuente queremos utilizar.

También podemos modificar el grosor:

p {
    font-weight: bold;
}

Y utilizar diferentes estilos:

p {
    font-style: italic;
}

Estas propiedades permiten adaptar la apariencia del texto a las necesidades de cada diseño.

Trabajar con márgenes y espacios

Uno de los conceptos fundamentales de CSS es el modelo de caja. Cada elemento puede tener contenido, relleno, borde y margen.

Por ejemplo:

div {
    margin: 20px;
    padding: 15px;
    border: 1px solid black;
}

margin establece el espacio exterior del elemento, mientras que padding crea espacio entre el contenido y el borde.

Podemos especificar valores diferentes para cada lado:

div {
    margin-top: 10px;
    margin-right: 20px;
    margin-bottom: 30px;
    margin-left: 40px;
}

También existe la posibilidad de utilizar una notación abreviada.

div {
    margin: 10px 20px;
}

En este caso, el primer valor corresponde a los márgenes verticales y el segundo a los horizontales.

Cómo utilizar clases en CSS

Las clases permiten aplicar un mismo estilo a diferentes elementos.

En HTML podemos escribir:

<p class="destacado">Primer texto</p>
<p class="destacado">Segundo texto</p>

Y en CSS:

.destacado {
    color: blue;
    font-weight: bold;
}

El punto situado delante de destacado indica que estamos seleccionando una clase.

Las clases son especialmente importantes porque permiten reutilizar estilos en diferentes partes de una página.

Los identificadores o ID

También podemos seleccionar elementos mediante un identificador:

<div id="cabecera">
    Mi página web
</div>

En CSS se utiliza #:

#cabecera {
    background-color: black;
    color: white;
}

Mientras que una clase puede utilizarse normalmente en varios elementos, un id debe identificar de forma única un elemento dentro del documento.

Cambiar el tamaño de los elementos

CSS permite controlar la anchura y altura de diferentes elementos.

Por ejemplo:

.caja {
    width: 300px;
    height: 150px;
}

También podemos utilizar porcentajes:

.caja {
    width: 50%;
}

Y otras unidades relativas como em, rem, vw o vh.

La elección de la unidad dependerá de cómo queramos que se comporte el diseño en diferentes tamaños de pantalla.

Alinear elementos con CSS

Para alinear texto podemos utilizar text-align.

h1 {
    text-align: center;
}

También podemos utilizar herramientas más modernas para organizar elementos, como Flexbox.

Por ejemplo:

.contenedor {
    display: flex;
    justify-content: center;
    align-items: center;
}

Flexbox resulta especialmente útil para distribuir elementos horizontal o verticalmente.

Para diseños más complejos también existe CSS Grid, que permite organizar los elementos mediante filas y columnas.

Crear botones con CSS

Con CSS podemos transformar un enlace o botón básico en un elemento mucho más atractivo.

HTML:

<button class="boton">Comprar</button>

CSS:

.boton {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}

Podemos añadir además un efecto cuando el usuario coloca el cursor encima:

.boton:hover {
    opacity: 0.8;
}

La pseudoclase :hover permite modificar el estilo cuando el puntero pasa sobre el elemento.

CSS y diseño responsive

Una página moderna debe poder visualizarse correctamente tanto en un ordenador como en un teléfono móvil.

CSS permite adaptar los estilos utilizando media queries.

Por ejemplo:

@media (max-width: 600px) {
    h1 {
        font-size: 28px;
    }
}

En este ejemplo, el tamaño del título cambiará cuando la pantalla tenga una anchura máxima de 600 píxeles.

Las media queries son una de las herramientas fundamentales para crear diseños adaptables.

Un ejemplo completo de CSS básico

Podemos juntar varios conceptos en un pequeño ejemplo.

HTML:

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="estilos.css">
</head>
<body>

    <div class="tarjeta">
        <h1>Mi página web</h1>
        <p>Este es mi primer diseño con CSS.</p>
        <button>Continuar</button>
    </div>

</body>
</html>

CSS:

body {
    background-color: #f2f2f2;
    font-family: Arial, sans-serif;
}

.tarjeta {
    width: 300px;
    margin: 50px auto;
    padding: 20px;
    background-color: white;
    text-align: center;
    border-radius: 10px;
}

.tarjeta h1 {
    color: blue;
}

.tarjeta p {
    font-size: 16px;
}

.tarjeta button {
    padding: 10px 20px;
    background-color: blue;
    color: white;
    border: none;
    border-radius: 5px;
}

Con unas pocas reglas hemos creado una pequeña tarjeta con fondo, tipografía, espacios, colores, bordes redondeados y un botón.

¿Qué aprender después de CSS básico?

Una vez que domines los conceptos fundamentales, puedes continuar aprendiendo propiedades y técnicas más avanzadas.

Entre los siguientes pasos más interesantes están Flexbox, CSS Grid, las transiciones y animaciones, las variables CSS, las media queries y el diseño responsive.

También es recomendable aprender a utilizar correctamente el modelo de caja de CSS, ya que ayuda a comprender por qué los elementos ocupan determinado espacio y cómo funcionan los márgenes, bordes y rellenos.

En resumen

CSS es el lenguaje que permite transformar una página HTML básica en una interfaz visual mucho más completa.

Con sus propiedades podemos controlar colores, fuentes, tamaños, espacios, bordes, fondos, posiciones y distribución de elementos, además de adaptar el diseño a diferentes dispositivos.

Para empezar no es necesario aprender cientos de propiedades. Lo más importante es comprender cómo funcionan los selectores, las clases, el modelo de caja y las propiedades fundamentales.

A partir de ahí, conceptos como Flexbox, Grid y el diseño responsive permitirán crear páginas web cada vez más completas y profesionales.