🎯 Objetivos de aprendizaje

Entender cómo se definen y aplican colores en CSS usando diferentes formatos.
Aprender a seleccionar y aplicar fuentes tipográficas para mejorar la legibilidad.
Conocer cómo usar bordes para decorar o delimitar elementos.
Dominar el uso del espaciado interno (padding) y externo (margin) para distribuir contenido.

📚 Contenidos teóricos con ejemplos claros y explicativos

Colores en CSS

Podemos definir colores usando distintos formatos:

Nombres de colores: Ejemplo: red, blue, green. Fácil pero limitado.
Hexadecimal (hex): Código de 6 dígitos precedido por #. Ejemplo: #ff0000 para rojo.
RGB: Define rojo, verde y azul con valores de 0 a 255. Ejemplo: rgb(255, 0, 0) para rojo.
RGBA: Igual que RGB pero con transparencia (alfa). Ejemplo: rgba(255, 0, 0, 0.5) es rojo semitransparente.
HSL: Define color con tono (hue), saturación y luminosidad. Ejemplo: hsl(0, 100%, 50%) es rojo.

Fuentes tipográficas

La propiedad font-family define qué fuente usará el texto. Lo ideal es usar una lista de fuentes separadas por comas para que si una no está disponible, use otra:

font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

Además, puedes controlar el tamaño con font-size y el estilo con font-weight (normal, bold) o font-style (normal, italic).

Bordes

El borde se define con tres propiedades juntas:

border-width: grosor (ejemplo: 2px).
border-style: tipo (ejemplo: solid, dashed, dotted, none).
border-color: color del borde.

Ejemplo: border: 3px solid #333;

Espaciado: padding y margin

padding es el espacio interno entre el contenido y el borde.
margin es el espacio externo entre el borde del elemento y otros elementos.

Ambos se pueden definir con valores individuales para cada lado (top, right, bottom, left) o con valores abreviados (hasta 4 valores para definir todos los lados).

💻 Código paso a paso (comentado)

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <title>Colores, fuentes, bordes y espaciado</title>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      background-color: #f9f9f9;
      color: #333333;
      padding: 20px;
    }

    h1 {
      color: #4caf50; /* verde */
      border-bottom: 3px solid #388e3c; /* borde verde oscuro */
      padding-bottom: 10px;
      font-weight: bold;
    }

    p {
      font-size: 18px;
      margin: 15px 0;
      padding: 10px;
      background-color: rgba(200, 230, 201, 0.7); /* verde claro semitransparente */
      border: 2px dashed #81c784; /* borde punteado verde */
      border-radius: 8px;
    }
  </style>
</head>
<body>

  <h1>Estilos básicos con colores, fuentes y bordes</h1>

  <p>Este párrafo tiene un fondo suave y bordes punteados que lo hacen destacar.</p>

  <p>El uso del padding y margin mejora la legibilidad y la separación visual.</p>

</body>
</html>

📝 Resumen de los conceptos aprendidos

Los colores pueden definirse en CSS por nombre, hex, rgb, rgba o hsl.
Las fuentes se especifican con font-family, usando listas para mayor compatibilidad.
Los bordes decoran o delimitan los elementos usando grosor, estilo y color.
padding y margin controlan espacios internos y externos para organizar el contenido.

🛠️ Ejercicio práctico final

Crea un archivo estilos-avanzados.html que contenga:

Un título <h1> con un color verde, un borde sólido y padding abajo.
Tres párrafos con diferentes colores de fondo (usa rgba para uno), bordes distintos y espacios con padding y margin bien definidos.
Cambia la fuente de todo el cuerpo usando una lista de fuentes.

Abre el archivo en tu navegador y prueba cambiar los valores para observar el efecto visual.

💡 Tips adicionales

Cuando uses colores con transparencia (rgba), ten en cuenta el fondo sobre el que se aplican para evitar que el texto se dificulte leer.
Usa herramientas online como Google Fonts para elegir y cargar fuentes atractivas y gratuitas.
Los bordes redondeados (border-radius) aportan un diseño moderno y agradable.
Evita usar mucho padding y margin juntos para no generar espacios demasiado grandes. Usa las herramientas del navegador para inspeccionar y ajustar.
Usa abreviaciones para padding y margin (por ejemplo: margin: 10px 5px;) para controlar varios lados con menos código.

10 - CSS: Colores, fuentes, bordes y espaciado 🎨🔤

Colores en CSS

Fuentes tipográficas

Bordes

Espaciado: padding y margin

Subscribe to my newsletter

Carlos BC

Carlos BC