CSS desde cero: Aprende a dar estilo a una página HTML paso a paso

CSS desde cero: Aprende a dar estilo a una página HTML paso a paso

CSS desde cero: Aprende a dar estilo a una página HTML paso a paso

Si ya conoces los fundamentos de HTML, el siguiente paso para comenzar a crear páginas web visualmente atractivas es aprender CSS.

HTML se encarga de definir la estructura y el contenido de una página web, mientras que CSS nos permite controlar su apariencia: colores, tamaños, espacios, tipografías, posiciones y prácticamente todo lo relacionado con el diseño.

En este tutorial aprenderás CSS desde cero, utilizando ejemplos sencillos que puedes copiar, modificar y probar directamente en tu navegador.

¿Qué es CSS?

CSS significa Cascading Style Sheets, o Hojas de Estilo en Cascada.

Su función es definir cómo deben mostrarse los elementos HTML dentro del navegador.

Por ejemplo, tenemos este encabezado:

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

Por defecto, el navegador decidirá cómo mostrarlo.

Pero podemos utilizar CSS para cambiar completamente su apariencia:

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

Ahora estamos indicando que todos los elementos <h1> deberán mostrarse en color azul, con un tamaño de 40 píxeles y centrados.

Sintaxis básica de CSS

Una regla CSS normalmente tiene esta estructura:

selector {
    propiedad: valor;
}

Por ejemplo:

p {
    color: #333;
}

En este caso:

  • p es el selector.

  • color es la propiedad.

  • #333 es el valor.

Esto aplicará el color indicado a todos los párrafos de nuestra página.

Formas de agregar CSS a HTML

Existen tres formas principales de utilizar CSS.

CSS en línea

Podemos utilizar el atributo style directamente en un elemento:

<p style="color: red;">
    Este texto será rojo.
</p>

Funciona, pero no es recomendable utilizarlo para diseñar sitios completos porque rápidamente vuelve difícil mantener el código.

CSS interno

También podemos agregar estilos dentro de <head> utilizando la etiqueta <style>:

<head>

    <style>
        body {
            background-color: #f5f5f5;
        }

        h1 {
            color: #222;
        }
    </style>

</head>

Puede ser útil para ejemplos pequeños.

CSS externo

Para proyectos reales normalmente utilizaremos un archivo independiente.

Creamos:

styles.css

Y lo conectamos desde nuestro HTML:

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

Nuestra estructura podría quedar así:

mi-proyecto/
│
├── index.html
└── styles.css

Esta es la forma que utilizaremos en los siguientes ejemplos.

Nuestro primer diseño con HTML y CSS

Comencemos con un HTML sencillo:

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Aprendiendo CSS</title>

    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <div class="contenedor">

        <h1>Aprendiendo CSS</h1>

        <p>
            Mi primera página utilizando HTML y CSS.
        </p>

        <a href="#" class="boton">
            Comenzar
        </a>

    </div>

</body>

</html>

Ahora vamos a darle estilo.

Cambiar el fondo de la página

Dentro de styles.css podemos escribir:

body {
    background-color: #f4f4f4;
}

También podemos modificar la fuente:

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

Con unas cuantas propiedades la página comienza a verse diferente.

Selectores CSS

Los selectores permiten indicar qué elementos queremos modificar.

Selector por etiqueta

p {
    color: #555;
}

Afectará a todos los elementos <p>.

Selector por clase

En HTML:

<p class="destacado">
    Texto importante
</p>

En CSS utilizamos un punto:

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

Las clases pueden reutilizarse en múltiples elementos.

Selector por ID

En HTML:

<div id="principal">
    Contenido
</div>

En CSS utilizamos #:

#principal {
    background-color: white;
}

Un ID debería identificar un elemento único dentro de la página.

Colores en CSS

Podemos especificar colores de diferentes maneras.

Por nombre:

color: red;

Utilizando hexadecimal:

color: #ff0000;

Con RGB:

color: rgb(255, 0, 0);

También podemos utilizar transparencia con RGBA:

background-color: rgba(0, 0, 0, 0.5);

Actualmente hexadecimal, RGB y HSL son opciones muy utilizadas.

Margin y padding

Dos conceptos fundamentales de CSS son margin y padding.

Margin controla el espacio exterior de un elemento.

.contenedor {
    margin: 30px;
}

Padding controla el espacio interior:

.contenedor {
    padding: 30px;
}

Podemos combinarlos:

.contenedor {
    margin: 40px auto;
    padding: 30px;
}

El valor auto puede utilizarse para centrar horizontalmente elementos que tengan un ancho definido.

El modelo de caja

Prácticamente todos los elementos HTML pueden imaginarse como una caja formada por:

Margin
 └── Border
      └── Padding
           └── Contenido

Por ejemplo:

.tarjeta {
    width: 300px;
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
}

Una propiedad especialmente útil es:

box-sizing: border-box;

Por eso es común comenzar un archivo CSS con:

* {
    box-sizing: border-box;
}

Esto hace que los tamaños de los elementos sean mucho más fáciles de controlar.

Crear un botón con CSS

Tenemos este enlace:

<a href="#" class="boton">
    Comenzar
</a>

Podemos convertirlo visualmente en un botón:

.boton {
    display: inline-block;

    padding: 12px 24px;

    background-color: #007bff;
    color: white;

    text-decoration: none;

    border-radius: 6px;
}

También podemos cambiar su apariencia cuando colocamos el cursor encima.

.boton:hover {
    background-color: #0056b3;
}

:hover es una pseudoclase que permite aplicar estilos cuando el usuario coloca el cursor sobre un elemento.

Crear una tarjeta sencilla

Vamos a crear un componente muy común en páginas web.

HTML:

<div class="tarjeta">

    <h2>Curso de CSS</h2>

    <p>
        Aprende los fundamentos de CSS paso a paso.
    </p>

    <a href="#" class="boton">
        Ver curso
    </a>

</div>

CSS:

.tarjeta {
    width: 320px;

    padding: 25px;
    margin: 40px auto;

    background-color: white;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tarjeta h2 {
    margin-top: 0;
}

.tarjeta p {
    color: #555;
    line-height: 1.6;
}

Ya tenemos un componente mucho más parecido a lo que encontraríamos en una página moderna.

Introducción a Flexbox

Flexbox es una de las herramientas más importantes para crear layouts modernos con CSS.

Por ejemplo:

<div class="productos">

    <div class="tarjeta">Producto 1</div>

    <div class="tarjeta">Producto 2</div>

    <div class="tarjeta">Producto 3</div>

</div>

Podemos colocar las tarjetas horizontalmente:

.productos {
    display: flex;

    gap: 20px;

    justify-content: center;
}

También podemos permitir que bajen automáticamente cuando no exista suficiente espacio:

.productos {
    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;
}

Flexbox facilita muchísimo la creación de menús, tarjetas, barras de navegación y diferentes distribuciones de contenido.

Diseño responsive

Actualmente una página web debe funcionar correctamente tanto en computadoras como en celulares.

Para ello podemos utilizar Media Queries.

Por ejemplo:

.contenedor {
    width: 900px;
    margin: 0 auto;
}

En una pantalla pequeña podríamos cambiar su tamaño:

@media (max-width: 768px) {

    .contenedor {
        width: 100%;
        padding: 20px;
    }

}

Sin embargo, una alternativa todavía mejor para muchos casos es utilizar:

.contenedor {
    width: 90%;
    max-width: 900px;

    margin: 0 auto;
}

De esta manera nuestro diseño puede adaptarse automáticamente a diferentes tamaños de pantalla.

Ejemplo completo

Podemos juntar lo aprendido y crear una página sencilla.

* {
    box-sizing: border-box;
}

body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f4f4f4;
    color: #222;
}

.contenedor {
    width: 90%;
    max-width: 900px;

    margin: 60px auto;

    text-align: center;
}

.tarjeta {
    max-width: 400px;

    margin: 30px auto;
    padding: 30px;

    background-color: white;

    border-radius: 10px;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.tarjeta p {
    color: #555;
    line-height: 1.6;
}

.boton {
    display: inline-block;

    margin-top: 10px;
    padding: 12px 24px;

    background-color: #007bff;
    color: white;

    text-decoration: none;

    border-radius: 6px;
}

.boton:hover {
    background-color: #0056b3;
}

Con unas cuantas líneas de CSS hemos pasado de tener un documento HTML básico a una página con una apariencia mucho más agradable.

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

Una vez que domines estos fundamentos, puedes profundizar en temas como:

  • Flexbox

  • CSS Grid

  • Variables CSS

  • Transiciones

  • Animaciones

  • Pseudoclases

  • Pseudoelementos

  • Diseño responsive

  • Bootstrap

No intentes memorizar todas las propiedades CSS.

Lo importante es comprender cómo funcionan los selectores, el modelo de caja y la distribución de los elementos. Las propiedades específicas puedes consultarlas conforme las necesites.

Conclusión

CSS es lo que transforma la estructura creada con HTML en una página visualmente atractiva.

Con HTML construimos el contenido y con CSS controlamos cómo se presenta al usuario.

En este tutorial vimos los fundamentos necesarios para comenzar: selectores, colores, margin, padding, modelo de caja, botones, tarjetas, Flexbox y una pequeña introducción al diseño responsive.

El siguiente paso es practicar.

Toma una página HTML sencilla e intenta modificar completamente su apariencia utilizando únicamente CSS. Cambia colores, tamaños, espacios y distribuciones.

No importa si al principio queda horrible.

De hecho, probablemente quedará horrible.

Así empezamos todos.

Leer post anterior

Comentarios