Unidades de medida en CSS

Cuando diseñamos una página web, usamos unidades para definir el tamaño de los elementos (como textos, cuadros o márgenes). Las más comunes son:

• px (píxeles): Es la unidad más usada. Un píxel es como un punto pequeñito en la pantalla. Su tamaño real puede cambiar según el aparato (celular, computador o televisor), pero en el diseño web usamos px como si fueran medidas estándar.


• % (porcentaje): Representa un valor relativo al tamaño de su contenedor. Por ejemplo, si un cuadro mide el 50%, ocupará la mitad del espacio donde está.

A partir de ahora, usaremos px para la mayoría de nuestros ejercicios.

Editor: cambia tamaños usando distintas unidades

<p style="font-size: 5px;">Texto con 5px</p> <p style="font-size: 10px;">Texto con 10px</p> <p style="font-size: 20px;">Texto con 20px</p> <p style="font-size: 50%;">Texto con 50%</p> <p style="font-size: 200%;">Texto con 200%</p>
Ver resultado

---

Colores digitales

Los colores en CSS se pueden definir de diferentes formas:

• Por nombre: red, blue, green
• Por código hexadecimal: #ff0000
• Por valores RGB: rgb(255,0,0)

Consulta esta guía visual en el Bloque de colores digitales.

Editor: cambia los colores de fondo y texto

<h2 style="color: red;">Texto rojo</h2> <p style="color: #0000ff;">Texto azul (hexadecimal)</p> <p style="color: rgb(0, 128, 0);">Texto verde (RGB)</p>
Ver resultado

---

Modelo de caja (Box Model)

Todo elemento en HTML tiene una "caja" con 4 partes:

• Content: el contenido (texto, imagen, etc.)
• Padding: espacio interno
• Border: borde que rodea el contenido
• Margin: espacio hacia afuera

Editor: modifica padding, border y margin

<style> #e1 { background-color: lightblue; padding: 5px 5px 5px 50px; margin: 20px 20px 20px 20px; color:black; border: 2px solid black; } </style> <div id="e1">Ejercicio 1</div>
Ver resultado

---