Valores, unidades y colores en CSS

Las propiedades CSS le dicen al navegador qué quieres cambiar. Los valores CSS le dicen al navegador la configuración exacta que debe usar.

Por ejemplo, color es una propiedad y blue es un valor. Juntos forman una declaración CSS completa.

En esta lección aprenderás valores CSS comunes para tamaños y colores.

Qué hace un valor en CSS

Un valor completa una declaración CSS.

Diferentes propiedades necesitan diferentes tipos de valores:

• color necesita un valor de color, como blue o #2563eb.
• width necesita un valor de tamaño, como 200px o 50%.
• font-size necesita un valor de tamaño de texto, como 1rem.

<p class="intro">Los valores CSS controlan cómo se ve este texto.</p>

<style>
  .intro {
    color: blue;
    font-size: 1.25rem;
  }
</style>

El navegador lee cada propiedad junto con su valor.

Unidades absolutas: px

px significa píxeles CSS. Es una unidad absoluta, lo que significa que el tamaño no depende del elemento padre.

<div class="user-card">Hola</div>

<style>
  .user-card {
    width: 300px;
    border: 1px solid black;
    padding: 16px;
  }
</style>

La tarjeta tiene 300px de ancho.

Usa px cuando necesites una medida pequeña y exacta, como un borde, el tamaño de un ícono o un espaciado fijo.

No pongas un espacio entre el número y la unidad. Escribe 300px, no 300 px.

Unidades relativas: %, em y rem

Las unidades relativas se calculan a partir de otra cosa.

• % normalmente se basa en el tamaño del contenedor padre.
• em se basa en el tamaño de fuente del elemento actual.
• rem se basa en el tamaño de fuente raíz de la página.

Las unidades relativas son útiles porque pueden adaptarse cuando cambia la página o el tamaño del texto.

Cuándo usar px

Usa px cuando necesites control estricto sobre una medida pequeña.

Esto es útil para bordes, íconos, avatares y pequeños detalles fijos.

Ten cuidado con anchos grandes de diseño en px. Un diseño de 900px puede verse bien en una laptop, pero desbordarse en un teléfono pequeño.

Cuándo usar %

Los porcentajes son fluidos. Cambian según el elemento padre.

Si un padre mide 800px de ancho, un hijo con width: 50% mide 400px de ancho.

<div class="layout">
  <div class="half-width-card">Mitad del ancho</div>
</div>

<style>
  .layout {
    width: 400px;
    border: 1px solid black;
  }

  .half-width-card {
    width: 50%;
    background-color: lightblue;
    padding: 12px;
  }
</style>

Usa % para diseños flexibles, columnas y elementos que deben responder a su contenedor.

Recuerda que el porcentaje de ancho se basa en el ancho del contenedor padre. El porcentaje de altura es más difícil porque el padre también necesita una altura definida.

Cuándo usar em

em escala con el tamaño de fuente actual.

Si un elemento tiene font-size: 16px, entonces 1em equivale a 16px y 2em equivale a 32px.

<button class="alert-button">Eliminar</button>

<style>
  .alert-button {
    font-size: 16px;
    padding: 0.75em 1.25em;
  }
</style>

Usa em para el espaciado dentro de botones y componentes pequeños. Si el texto del botón aumenta, el padding crece con él.

Ten cuidado al usar em para tamaños de fuente en elementos anidados. Los tamaños pueden acumularse y volverse más pequeños o más grandes de lo esperado.

Cuándo usar rem

rem significa root em. Se basa en el tamaño de fuente raíz de la página, normalmente el elemento html.

En muchos navegadores, el tamaño de fuente raíz predeterminado es 16px, así que 2rem suele ser 32px.

<h2 class="page-heading">Encabezado principal</h2>

<style>
  .page-heading {
    font-size: 2rem;
  }
</style>

Usa rem para tamaños de texto consistentes en todo el sitio.

Si cambia el tamaño de fuente raíz, todos los valores rem escalan a partir de ese tamaño. Esto puede ayudar a usuarios que aumentan el tamaño del texto en el navegador.

Ejemplo ejecutable: mezclar unidades

Este ejemplo mezcla unidades fijas y relativas.

<div class="container">
  <div class="percent-card">
    <p class="rem-text">Este texto usa unidades rem.</p>
  </div>
</div>

<style>
  .container {
    width: 400px;
    background-color: lightgray;
    padding: 20px;
  }

  .percent-card {
    width: 50%;
    background-color: white;
    border: 2px solid black;
  }

  .rem-text {
    font-size: 1.5rem;
    margin: 1em;
  }
</style>

El contenedor tiene un ancho fijo. La tarjeta usa la mitad de ese ancho. El texto usa rem y su margen usa em.

Nombres de colores

CSS tiene colores con nombre como red, blue, black, white y green.

<p class="warning-text">Revisa tu formulario antes de enviarlo.</p>

<style>
  .warning-text {
    color: red;
  }
</style>

Los nombres de colores son útiles para pruebas rápidas y ejemplos simples.

En proyectos reales, normalmente usarás hex, RGB o HSL porque te dan más control.

Colores hex

Los colores hex usan # seguido de seis caracteres.

Los caracteres representan rojo, verde y azul.

<button class="primary-button">Guardar</button>

<style>
  .primary-button {
    background-color: #2563eb;
    color: #ffffff;
  }
</style>

Los colores hex son comunes en herramientas de diseño como Figma.

Incluye siempre el #. Escribe #ffffff, no ffffff.

Colores RGB

RGB significa rojo, verde y azul.

La función rgb() usa tres números de 0 a 255.

<div class="header-box">Caja azul</div>

<style>
  .header-box {
    background-color: rgb(0, 0, 255);
    color: white;
    padding: 16px;
  }
</style>

rgb(0, 0, 0) es negro. rgb(255, 255, 255) es blanco.

RGB puede ser más fácil de entender si piensas en los colores como cantidades de luz roja, verde y azul.

Colores RGBA y transparencia

RGBA es como RGB, pero añade un valor alfa.

El valor alfa controla la opacidad:

• 0 significa completamente transparente.
• 0.5 significa 50% visible.
• 1 significa completamente sólido.

<div class="pattern-background">
  <div class="glass-card">
    <p>Esta caja es 80% visible.</p>
  </div>
</div>

<style>
  .pattern-background {
    background-color: navy;
    padding: 40px;
  }

  .glass-card {
    background-color: rgba(255, 255, 255, 0.8);
    padding: 20px;
    border-radius: 8px;
  }
</style>

Usa rgba() para superposiciones, tarjetas semitransparentes y fondos colocados sobre imágenes o colores fuertes.

No uses valores mayores que 1 para el valor alfa.

Colores HSL

HSL significa tono, saturación y luminosidad.

• Tono es un número de 0 a 360 en la rueda de color.
• Saturación controla qué tan intenso es el color.
• Luminosidad controla qué tan claro u oscuro es el color.

<p class="success-message">Guardado correctamente.</p>

<style>
  .success-message {
    color: hsl(120, 100%, 35%);
  }
</style>

HSL es útil cuando quieres ajustar un color a mano.

Por ejemplo, para hacer un color más oscuro, puedes bajar el porcentaje de luminosidad.

También puedes usar hsla() para transparencia:

Comparar formatos de color

• Nombres de colores son fáciles de leer, pero limitados.
• Colores hex como #ff0000 son comunes en herramientas de diseño.
• RGB como rgb(255, 0, 0) muestra directamente los valores rojo, verde y azul.
• RGBA como rgba(255, 0, 0, 0.5) añade transparencia.
• HSL como hsl(0, 100%, 50%) es útil para ajustar temas de color a mano.

Errores comunes de principiantes

• Escribir espacios dentro de las unidades, como 20 px o 100 %. Usa 20px y 100%.
• Olvidar el # en colores hex. Usa #ffffff, no ffffff.
• Esperar que height: 50% funcione sin una altura en el padre.
• Usar solo px para diseños completos, lo que puede causar desbordamiento en pantallas pequeñas.
• Usar valores alfa como 50 en rgba(). Usa 0.5 para 50% visible.

Mini tarea

Mira esta regla CSS:

¿Qué ancho tendrá esta caja si su contenedor padre mide 800px?

¿Qué efecto visual tiene el color de fondo?

Respuesta: la caja tendrá 400px de ancho. El fondo será negro con 50% de opacidad, así que lo que esté detrás podrá verse.

Quiz corto

Pregunta 1: ¿Qué unidad se basa en el tamaño de fuente raíz de la página?

Respuesta: rem.

Pregunta 2: ¿Qué formato de color usa el símbolo #?

Respuesta: Color hex.

Pregunta 3: ¿Qué hace el valor alfa en rgba()?

Respuesta: Controla la opacidad, o qué tan visible es el color.

Pequeño reto

Intenta dar estilo a la tarjeta de perfil:

• Usa px para añadir un borde.
• Usa rem para hacer más grande el texto del encabezado.
• Usa rgba() para dar al párrafo un fondo semitransparente.
• Usa un color hex para el fondo del botón.

<div class="profile-card">
  <h3 class="profile-name">Jane Doe</h3>
  <p class="profile-bio">Desarrolladora web en formación.</p>
  <button class="profile-button">Seguir</button>
</div>

<style>
  .profile-card {
    /* Añade un borde sólido de 2px */
  }

  .profile-name {
    /* Define el tamaño de fuente en 2rem */
  }

  .profile-bio {
    /* Añade un fondo blanco con 50% de opacidad */
  }

  .profile-button {
    /* Define el color de fondo con un color hex */
  }
</style>

Una posible respuesta:

Resumen

• Los valores son las configuraciones aplicadas a las propiedades CSS.
• px es útil para medidas exactas y fijas.
• % es relativo al contenedor padre.
• em escala desde el tamaño de fuente del elemento actual.
• rem escala desde el tamaño de fuente raíz.
• Los nombres de colores son simples, pero limitados.
• Hex, RGB y HSL son formas comunes de definir colores exactos.
• RGBA y HSLA añaden transparencia con un valor alfa.