Cursos CSS Módulo 3

 

Módulo 3: Colores, fuentes y estilos de texto en CSS

En este módulo aprenderás a dar vida al texto en tus páginas web usando CSS. Verás cómo aplicar colores, elegir tipografías y agregar efectos especiales como sombras y subrayados decorativos. Un diseño web atractivo depende mucho de cómo presentas el texto, y CSS te da el control total.

---

🎨 Aplicando colores en CSS

En CSS, los colores se pueden definir de distintas maneras. Aprenderás las 3 más usadas:

• ✔️ Por nombre: como red, blue, green.
• ✔️ Con códigos HEX: como #FF0000 (rojo) o #333333 (gris oscuro).
• ✔️ Con RGB: como rgb(255, 0, 0) (rojo) o rgb(0, 128, 255) (azul).

p { color: #FF5733; /* Color en HEX */ } h1 { color: rgb(0, 128, 255); /* Color en RGB */ }

---

🖋️ Cambiando la tipografía (font-family)

La propiedad font-family define qué fuente usará tu texto. Puedes usar:

• ✅ Fuentes “seguras” que existen en casi todos los dispositivos (ej: Arial, Times New Roman, Verdana).
• ✅ Fuentes externas como Google Fonts para personalizar tu web.

body { font-family: 'Arial', sans-serif; } h1 { font-family: 'Georgia', serif; }

👉 Ejemplo: Si quieres usar una fuente de Google Fonts, debes importarla con un <link> en HTML y luego usarla en CSS.

<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet"> h1 { font-family: 'Roboto', sans-serif; }

---

📏 Tamaño, estilo y peso del texto

CSS también permite definir el tamaño, peso y estilo del texto:

• font-size – cambia el tamaño (px, em, rem).
• font-weight – hace el texto más grueso o fino (normal, bold, 100-900).
• font-style – define si es normal o cursiva.

h2 { font-size: 28px; font-weight: bold; font-style: italic; }

---

✨ Agregando efectos al texto

CSS ofrece propiedades para dar efectos especiales:

• text-transform → cambia a mayúsculas, minúsculas o capitaliza.
• text-decoration → subraya, tacha o elimina decoraciones.
• text-shadow → agrega sombra al texto para destacar títulos.

h1 { text-transform: uppercase; text-shadow: 2px 2px 5px gray; }

---

📥 Preguntas de repaso

Pregunta 1

¿Cuál de estas NO es una forma válida de definir colores en CSS?

• A) HEX (#000000)
• B) Nombre (blue)
• C) HSL()
• D) CMYK()

✅ Respuesta correcta: D) CMYK()

---

Pregunta 2

¿Qué propiedad se usa para cambiar el tipo de letra en CSS?

• A) font-weight
• B) font-size
• C) font-family
• D) text-style

✅ Respuesta correcta: C) font-family

---

Pregunta 3

¿Qué propiedad usarías para poner TODO un título en mayúsculas?

• A) text-transform
• B) font-style
• C) text-shadow
• D) text-align

✅ Respuesta correcta: A) text-transform

---

Esta lección forma parte del curso básico de CSS. En el próximo módulo aprenderás a trabajar con enlaces, botones y navegación.