Introducción a CSS

/* Selector de elemento */
p { color: blue; }

/* Selector de clase */
.tarjeta { background: white; border-radius: 8px; }

/* Selector de ID */
#cabecera { background: #333; color: white; }

/* Selector descendente */
.menu a { text-decoration: none; color: white; }

/* Selector de pseudo-clase */
button:hover { background: #0077ff; }
a:visited { color: purple; }

/* Selector de atributo */
input[type="email"] { border: 2px solid blue; }

/* Combinador hermano */
h2 + p { font-size: 1.1rem; }

/* El Box Model: content + padding + border + margin */
.caja {
  width: 300px;           /* ancho del contenido */
  height: 200px;          /* alto del contenido */
  padding: 20px;          /* espacio interior */
  border: 2px solid #333; /* borde */
  margin: 16px;           /* espacio exterior */

  /* box-sizing: por defecto el width no incluye padding/border */
  box-sizing: border-box; /* width total incluye padding y border */
}

/* Padding y margin individuales */
.elemento {
  padding-top: 10px;
  padding-right: 20px;
  padding-bottom: 10px;
  padding-left: 20px;
  /* Abreviado: arriba derecha abajo izquierda */
  padding: 10px 20px 10px 20px;
  /* Abreviado: vertical horizontal */
  padding: 10px 20px;
}

/* Colores */
.elemento {
  color: red;                    /* nombre */
  color: #FF5733;                /* hexadecimal */
  color: rgb(255, 87, 51);       /* RGB */
  color: rgba(255, 87, 51, 0.5); /* RGBA con opacidad */
  color: hsl(14, 100%, 60%);     /* HSL */
  background-color: #f0f0f0;
}

/* Tipografía */
body {
  font-family: 'Inter', Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: #333;
}

h1 {
  font-size: 2.5rem;   /* relativo al tamaño base */
  font-weight: 700;
  letter-spacing: -0.02em;
}