Propiedades básicas de CSS

Reglas CSS y color de texto

Una regla CSS se compone de un selector que indica a qué elementos se aplica y un bloque de propiedades con sus valores entre llaves.

h1 {
    color: #2563eb;
    font-size: 24px;
}

La propiedad color establece el color del texto, mientras que background-color cambia el color de fondo del elemento. Los colores se pueden definir con nombres (red, blue), códigos hexadecimales (#ff0000) o la función rgb().

p {
    color: #333333;
    background-color: #f5f5f5;
    font-size: 16px;
}

El selector indica "a qué elemento" se aplica el estilo, y las propiedades dentro de las llaves definen "cómo se ve". Esta separación entre HTML (estructura) y CSS (presentación) es fundamental en el desarrollo web.

Espaciado con padding y margin

Las propiedades padding y margin controlan el espaciado de los elementos. La diferencia es que padding genera espacio interior (entre el contenido y el borde) y margin genera espacio exterior (entre el elemento y sus vecinos).

.tarjeta {
    padding: 20px;
    margin: 16px;
    background-color: #ffffff;
    border: 1px solid #e0e0e0;
}

Se pueden definir valores individuales para cada lado: padding-top, padding-right, padding-bottom y padding-left. La notación abreviada con dos valores aplica el primero arriba/abajo y el segundo a los lados.

.boton {
    padding: 8px 16px;
    margin: 12px 0;
}

padding es espacio dentro del elemento, margin es espacio fuera del elemento. Recordar esta diferencia es clave para controlar la disposición del contenido.

Disposición con display flex

La propiedad display: flex permite organizar elementos en fila o columna de forma sencilla. Es la forma más práctica de crear distribuciones horizontales.

.contenedor {
    display: flex;
    gap: 16px;
    align-items: center;
}

• display: flex activa el modo de disposición flexible
• gap define el espacio entre los elementos hijos
• align-items: center alinea los elementos verticalmente al centro

<div class="contenedor">
    <span>Elemento 1</span>
    <span>Elemento 2</span>
    <span>Elemento 3</span>
</div>