SHANUKI · Módulo 2 · Capítulo 2: Introducción a CSS, Tipografía y Color · Ciencias de la Computación

¿Qué es CSS?

El lenguaje que viste a tus páginas

CSS significa Cascading Style Sheets: Hojas de Estilo en Cascada. Es el lenguaje que define cómo se ve una página web.

La analogía central: HTML es el esqueleto de una página — define la estructura y el contenido. CSS es la ropa y el maquillaje — define cómo se ve ese contenido. Sin CSS, toda página web sería texto negro sobre fondo blanco.

Son lenguajes complementarios, no sustitutos: HTML define QUÉ hay; CSS define CÓMO se ve. El navegador actúa como intérprete: lee el HTML, lee el CSS y combina ambos para dibujar (renderizar) la página.

La misma página, con y sin CSS

Mirá la diferencia. El HTML de ambos paneles es exactamente el mismo — lo único que cambia es que el de la derecha tiene CSS:

😐 Sin CSS (solo HTML)

Club de Robótica

Nos reunimos los martes en el laboratorio. Traé tu micro:bit y muchas ganas.

Este mes: sensores de distancia.

Inscribite acá

😎 Con CSS (mismo HTML + estilos)

CLUB DE ROBÓTICA

Nos reunimos los martes en el laboratorio. Traé tu micro:bit y muchas ganas.

Este mes: sensores de distancia.

▶ Inscribite acá

Un poco de historia

CSS no nació de un día para el otro. Evolucionó en tres grandes etapas:

Versión	Año	Qué aportó
CSS1	1996	Lo básico: colores, fuentes, márgenes.
CSS2	1998	Posicionamiento de elementos, estilos para impresión.
CSS3	1999 → hoy	No es una versión única: son módulos independientes (colores, animaciones, flexbox…) que evolucionan por separado.

¿Por qué "en cascada"?

Imaginá una cascada de agua: el agua de arriba cae sobre la de abajo. En CSS, las reglas que vienen después pueden sobreescribir a las que vienen antes, como el agua de arriba tapando la de abajo.

Cuando dos reglas chocan, tres factores deciden cuál "gana":

Origen: estilos del navegador vs. del desarrollador vs. del usuario.
Especificidad: qué tan "específico" es el selector (lo profundizamos en módulos futuros).
Orden: a igual especificidad, gana la regla que viene última.

🌐 Estilos del navegadorla base por defecto (texto negro, links azules)

▼ pueden ser sobreescritos por…

👩‍💻 Estilos del desarrolladorel CSS que vos escribís

▼ pueden ser sobreescritos por…

🙋 Estilos del usuariopreferencias de accesibilidad de quien navega

💡 Por ahora, lo más importante: si escribís dos reglas para el mismo elemento, la segunda sobreescribe a la primera.

Sintaxis básica: la regla CSS

Anatomía de una regla

pselector
¿A quién?

{abre bloque

colorpropiedad
¿Qué?

:dos puntos

redvalor
¿Cómo?

;punto y coma

}cierra bloque

Selector: indica a qué elemento HTML se aplica el estilo.
Bloque de declaración: todo lo que va entre { y }. Las llaves son OBLIGATORIAS.
Declaración: un par propiedad: valor;. Puede haber varias en un bloque.
Propiedad: qué aspecto se modifica (color, tamaño, fondo…).
Valor: cómo se modifica ese aspecto.

⚠️ Olvidar el ; al final de una declaración es uno de los errores más comunes en CSS. Si un estilo no funciona, revisá los puntos y coma.

Los tres selectores fundamentales

Una analogía de aula: el selector de tipo es como decir "todos los alumnos"; el de clase es "todos los alumnos de 3°A"; el de id es "el alumno Juan Pérez, ese específico".

Selector	Sintaxis	Ejemplo	Selecciona
De tipo	etiqueta	`p { }`	Todos los `<p>` de la página
De clase	.nombre	`.destacado { }`	Todos los elementos con `class="destacado"`
De id	#nombre	`#titulo { }`	El elemento único con `id="titulo"`

/* Ejemplo 1: selector de tipo — todos los párrafos */
p {
  color: blue;
}

/* Ejemplo 2: selector de clase — solo class="destacado" */
.destacado {
  background-color: yellow;
}

/* Ejemplo 3: selector de id — el único id="titulo" */
#titulo {
  font-size: 32px;
}

⚠️ El selector de id (#) se usa con moderación: un id solo puede aparecer una vez en la página. Para estilos que se repiten, siempre usá clases (.).

Múltiples declaraciones y reglas

Un bloque puede tener varias declaraciones (una por línea, indentadas) y un archivo puede tener varias reglas, una debajo de la otra. Compará la versión "comprimida" con la "expandida":

/* ❌ Comprimida: funciona, pero cuesta leerla */
p { color: blue; font-size: 16px; text-align: center; }

/* ✅ Expandida: una declaración por línea — siempre recomendada */
p {
  color: blue;
  font-size: 16px;
  text-align: center;
}

Propiedades para empezar a practicar

Propiedad	Qué hace	Valores de ejemplo
`color`	Color del texto	`red` · `rgb(255, 0, 0)` · `rgb(255,0,0)`
`background-color`	Color de fondo del elemento	`yellow` · `rgb(13, 13, 26)`
`font-size`	Tamaño del texto	`16px` · `24px`
`font-family`	Tipografía	`Arial, sans-serif`
`text-align`	Alineación del texto	`left` · `center` · `right`
`border`	Borde del elemento	`1px solid red`

💡 Estas propiedades las vemos en detalle en los próximos módulos. Por ahora usalas para practicar la sintaxis.

🎬 Video de referencia

📺 Video por TodoCode (@TodoCode) · todocodeacademy.com · 273K suscriptores
"Un canal para aprender programación e informática de manera fácil, gratuita y sin complicaciones."

⚙️ Sintaxis en acción

A la izquierda, el código de referencia. A la derecha, tu simulador dual: tiene una pestaña para HTML y otra para CSS, porque a partir de ahora trabajás con los dos lenguajes a la vez. Escribí, tocá ▶ Ejecutar y mirá cómo interactúan.

/* CSS: tres reglas, tres selectores */
h1 {
  color: navy;
  text-align: center;
}

.aviso {
  background-color: yellow;
  border: 2px solid orange;
}

#firma {
  font-size: 12px;
  color: gray;
}

<!-- HTML que acompaña a ese CSS -->
<h1>Mi página</h1>
<p class="aviso">¡Atención!</p>
<p id="firma">Hecho por mí</p>

/ HTML

# CSS

🎮 Actividades de comprensión — tocá para desplegar

1 · Ordenar: armá la regla CSS

Arrastrá las tarjetas hasta dejarlas en el orden correcto de una regla CSS completa. Después tocá Verificar.

2 · Arrastrar y soltar: completá el esquema

Arrastrá cada término del banco al hueco correcto del esquema. ¡Cuidado: hay términos trampa que no van en ningún lado!

{ : }

3 · Completar: escribí lo que falta

Leé el comentario de cada regla y completá la propiedad o el valor que produce ese efecto.

/* Texto centrado */
h1 { text-align: ; }

/* Fondo amarillo */
.aviso { : yellow; }

/* Texto de 20 píxeles */
p { font-size: ; }

/* El elemento único con id="menu" */
 { border: 1px solid black; }

4 · Opción múltiple: sintaxis y selectores

Elegí una opción por pregunta. La respuesta se bloquea al seleccionarla y vas acumulando puntaje.

5a · Reto práctico BÁSICO ✏️ (con código precargado)

El HTML ya está completo. En la pestaña CSS hay una hoja de estilos a medio terminar: los comentarios con ✏️ indican exactamente qué completar. Cuando termines, ejecutá y descargá tu archivo.

/ HTML

<h1 id="titulo">Mi banda favorita</h1>
<p>Escucho su música todos los días.</p>
<p class="destacado">Su último disco es buenísimo.</p>
<p>Algún día los voy a ver en vivo.</p>

# CSS

/* === TÍTULO === */
#titulo {
  text-align: center;
  /* ✏️ COMPLETAR: agregá una declaración color
     con el valor que más te guste */
}

/* === PÁRRAFO DESTACADO === */
.destacado {
  /* ✏️ COMPLETAR: dale un background-color amarillo */
  /* ✏️ COMPLETAR: agregá un border de 2px solid orange */
}

/* === TODOS LOS PÁRRAFOS === */
p {
  /* ✏️ COMPLETAR: poné un font-size de 18px */
}

5b · Reto práctico AVANZADO 🚀 (desde cero)

Desafío: escribí en la pestaña HTML una mini página sobre tu comida favorita (un título con id, dos párrafos y uno de ellos con una class). Después, en la pestaña CSS, estilizala usando los tres tipos de selectores y al menos 4 propiedades diferentes. El editor arranca vacío a propósito: el código sale de tu cabeza.

Usé un selector de tipo, uno de clase y uno de id Usé al menos 4 propiedades CSS diferentes Cada declaración termina con punto y coma Escribí una declaración por línea, indentada

/ HTML

# CSS

Las tres formas de conectar CSS con HTML

Una fiesta, tres parlantes

Podés llevar música a una fiesta de tres maneras: conectar un speaker bluetooth (externo), poner un parlante dentro de la sala (interno), o cantarla en el oído de cada persona (en línea). Cada método tiene su momento — con CSS pasa exactamente lo mismo.

Forma 1 — CSS Externo (la recomendada)

Un archivo .css separado, vinculado con <link> dentro del <head>:

<link rel="stylesheet" href="estilos.css">

rel="stylesheet" es obligatorio: le dice al navegador que el archivo es una hoja de estilo.
href es la ruta al archivo CSS — funciona igual que en <a>.

Ventajas:

Un solo archivo CSS estiliza múltiples páginas
Separación de responsabilidades (HTML para estructura, CSS para estilo)
Más fácil de mantener — cambiás el estilo de todo el sitio en un solo lugar
El navegador guarda el archivo en caché, así la página carga más rápido en las visitas siguientes

Cuándo usarla: siempre que sea posible. Es el método estándar profesional.

Así se ve la estructura de archivos de un sitio con CSS externo (¿te acordás de la organización de carpetas del Módulo 3?):

mi-sitio/
├── index.html
├── contacto.html
└── css/
    └── estilos.css   ← un archivo para todo el sitio

💡 La ruta del href es relativa a la ubicación del HTML. Si el CSS está en la carpeta css/, la ruta es css/estilos.css desde un HTML en la raíz, o ../css/estilos.css desde un HTML en una subcarpeta.

Forma 2 — CSS Interno (para páginas únicas)

Un bloque <style> dentro del <head> del propio HTML:

<head>
  <style>
    p {
      color: blue;
      font-size: 16px;
    }
  </style>
</head>

Ventajas: todo en un solo archivo; útil para páginas únicas o prototipos rápidos.

Desventajas: con múltiples páginas tenés que copiar el CSS en cada una — y si cambiás algo, lo cambiás en todos los archivos.

Cuándo usarla: pruebas rápidas, páginas únicas (como este mismo recurso SHANUKI), emails HTML.

⚠️ El <style> va SIEMPRE en el <head>, nunca en el <body>. Aunque a veces funciona igual, no es válido según los estándares.

Forma 3 — CSS en línea (inline, con moderación)

El atributo style directamente en la etiqueta HTML — ya lo viste en el Módulo 2; ahora entendés mejor por qué existe y cuándo no usarlo:

<p style="color: red; font-size: 20px;">Texto rojo</p>

Ventajas: sobreescribe cualquier otro CSS (tiene la especificidad más alta); útil para una sobrescritura puntual y rápida.

Desventajas: mezcla estructura (HTML) con presentación (CSS); imposible de reutilizar; muy difícil de mantener; rompe la separación de responsabilidades.

Cuándo usarla: emails HTML (que no soportan CSS externo), sobrescrituras muy puntuales y justificadas, estilos generados dinámicamente con JavaScript.

⚠️ Si te encontrás usando style= en muchos elementos, es una señal de que deberías usar clases CSS en su lugar.

Tabla comparativa

	Externo	Interno	En línea
Dónde se escribe	Archivo .css separado	`<style>` en `<head>`	Atributo `style` en la etiqueta
Alcance	Todo el sitio	Una sola página	Un solo elemento
Reutilizable	✅ Sí	⚠️ Solo en esa página	❌ No
Fácil de mantener	✅ Muy fácil	⚠️ Regular	❌ Difícil
Recomendado	✅ Siempre que sea posible	⚠️ Para páginas únicas	❌ Solo casos especiales
Especificidad	Normal	Normal	Alta (sobreescribe todo)

¿Y si las tres chocan? Orden de prioridad

Si el mismo elemento tiene el mismo estilo definido en las tres formas, gana esta jerarquía:

✏️ En línea (style="")la prioridad más alta — sobreescribe a las demás

▼ gana sobre…

📄 Interno (<style> en el head)prioridad media

▼ gana sobre…

🔗 Externo (archivo .css)la base del sitio

💡 Esto no significa que "siempre gana el inline": significa que a igual estilo definido en los tres métodos, el inline es el que se aplica. La especificidad del selector también importa, pero eso lo vemos en módulos futuros.

Comentarios en CSS: /* … */

Un comentario empieza con /* y termina con */. El navegador los ignora completamente — no afectan el estilo. Pueden ocupar una línea o varias.

¿Para qué sirven? Para explicar secciones (/* === HEADER === */), para desactivar temporalmente una regla sin borrarla, y para documentar valores no obvios (/* 16px = 1rem en la mayoría de navegadores */).

Ojo con no mezclarlos: en HTML los comentarios son  y en JavaScript son // o /* */. En CSS, solo existe /* */.

Así se ve una hoja de estilos bien comentada:

/* ============================
   ESTILOS DE MI SITIO PERSONAL
   ============================ */

/* === GENERALES === */
body {
  font-family: Arial, sans-serif;
  font-size: 16px; /* 16px = 1rem en la mayoría de navegadores */
}

/* === HEADER === */
#cabecera {
  background-color: rgb(26, 26, 46);
  color: white;
  text-align: center;
}

/* === AVISOS IMPORTANTES === */
.aviso {
  border: 2px solid gold;
  /* background-color: yellow;  ← desactivada sin borrarla */
}

💡 Los buenos desarrolladores comentan su CSS. Cuando volvés a leer tu código tres semanas después, los comentarios son los que te salvan.

Buenas prácticas de organización

#	Práctica
1	Usá CSS externo para proyectos reales.
2	Organizá el CSS con comentarios de sección: `/* === HEADER === */`
3	Una declaración por línea, indentada.
4	Agrupá las reglas relacionadas juntas.
5	Nombrá las clases por el contenido, no por el estilo: `class="tarjeta-producto"`, no `class="caja-azul"`.
6	Poné el `<link>` del CSS antes de cualquier `<script>` en el `<head>`.

⚙️ Sintaxis en acción

Probá el CSS interno: en este simulador, lo que escribas en la pestaña CSS funciona como si fuera el <style> del <head> de tu página.

/* === TARJETA DE PERFIL === */
.tarjeta {
  background-color: rgb(238, 246, 255);
  border: 2px solid rgb(26, 115, 232);
  text-align: center;
}

/* === NOMBRE === */
#nombre {
  color: rgb(26, 115, 232);
  font-size: 24px;
}

<!-- HTML de la tarjeta -->
<div class="tarjeta">
  <h2 id="nombre">Sofía</h2>
  <p>Fan de la robótica</p>
</div>

/ HTML

# CSS

🎮 Actividades de comprensión — tocá para desplegar

1 · Ordenar: pasos para vincular un CSS externo

Arrastrá los pasos hasta dejarlos en el orden correcto del flujo de trabajo. Después tocá Verificar.

2 · Arrastrar y soltar: ¿qué forma es cada fragmento?

Arrastrá cada fragmento de código al hueco de su forma de incorporación. Hay fragmentos trampa que no corresponden a ninguna.

🔗 Externo →

📄 Interno →

✏️ En línea →

3 · Completar: el <link> y los comentarios

El archivo CSS se llama estilos.css y está dentro de la carpeta css. Completá el código para vincularlo y para abrir y cerrar el comentario.

<link ="" href="">

 Estilos del encabezado

4 · Opción múltiple: formas y cascada

Elegí una opción por pregunta. La respuesta se bloquea al seleccionarla.

5a · Reto práctico BÁSICO ✏️ (reorganizar estilos)

Esta página tiene los estilos desordenados: todo está como inline. Tu trabajo es reorganizarlos: borrá los style="" del HTML y reescribí esos mismos estilos como reglas en la pestaña CSS, usando los selectores que indican los comentarios ✏️.

/ HTML

<h1 id="principal" style="color: purple; text-align: center;">Recetas de mi familia</h1>
<p style="font-size: 18px;">Las pastas de la nona son las mejores.</p>
<p class="nota" style="background-color: lightyellow;">Secreto: la salsa lleva una pizca de azúcar.</p>

# CSS

/* ✏️ COMPLETAR: regla para #principal
   con color purple y text-align center */

/* ✏️ COMPLETAR: regla para p
   con font-size de 18px */

/* ✏️ COMPLETAR: regla para .nota
   con background-color lightyellow */

5b · Reto práctico AVANZADO 🚀 (presentación personal)

Desafío: creá desde cero una página de presentación personal (título, dos o tres párrafos). El editor arranca vacío a propósito.

Revisá que cumpla lo que pide el checklist:

Mi CSS tiene comentarios de sección (/* === … === */) Usé al menos un estilo inline con su justificación en un comentario HTML El resto de los estilos está en la pestaña CSS (como interno) Nombré mis clases por el contenido, no por el estilo Cada declaración termina con punto y coma

/ HTML

# CSS

Darle voz al texto con CSS

El mismo texto puede sentirse formal o relajado, serio o divertido. Las propiedades tipográficas son la ropa de las letras: con seis, transformás cómo se lee tu página.

Toda página web es, antes que nada, texto. Y el mismo texto puede sentirse formal o relajado, serio o divertido, claro o ilegible — todo depende de cómo lo vistas. En CSS, las propiedades tipográficas son la ropa de las letras: con seis propiedades básicas podés transformar por completo cómo se lee tu página.

Pensalo así: la tipografía es el tono de voz de tu sitio. Un título en negrita y centrado grita con seguridad; un texto chiquito y gris al pie susurra una aclaración. Vamos a ver las seis propiedades, una por una.

font-family — ¿qué tipo de letra?

Define la familia tipográfica: la forma de las letras. Se escribe una lista de fuentes separadas por comas, de la preferida a la de respaldo. La última siempre es una familia genérica (serif, sans-serif o monospace) por si ninguna de las anteriores está disponible.

p {
  font-family: Arial, Helvetica, sans-serif;
}
/* Si no hay Arial, prueba Helvetica;
   si tampoco, usa cualquier sans-serif del sistema */

💡 Serif (con remates: Georgia, Times) = clásico y formal. Sans-serif (sin remates: Arial, Inter) = moderno y limpio. Monospace (todas las letras del mismo ancho: Courier) = código y datos.

font-size — ¿qué tan grande?

Controla el tamaño del texto. La unidad más común para empezar es px (píxeles). Un cuerpo de texto cómodo ronda los 16-18px; un título puede ir de 28px para arriba.

h1 { font-size: 32px; }
p  { font-size: 16px; }
small { font-size: 12px; }

⚠️ Texto demasiado chico es un problema de accesibilidad: cuesta leerlo. Para el cuerpo, no bajes de 16px.

font-weight — ¿qué tan gruesa?

Define el grosor de las letras. Acepta palabras (normal, bold) o números de 100 a 900 (100 = finísima, 400 = normal, 700 = negrita, 900 = la más gruesa).

.titulo { font-weight: bold; }   /* = 700 */
.suave  { font-weight: 300; }
.fuerte { font-weight: 900; }

font-style — ¿derecha o inclinada?

Sobre todo se usa para la cursiva (itálica), esas letras inclinadas que dan énfasis suave o marcan un título de obra, una palabra extranjera, una cita.

.cita { font-style: italic; }
p { font-style: normal; } /* el valor por defecto */

text-align — ¿hacia dónde se alinea?

Controla la alineación horizontal del texto dentro de su contenedor: left (izquierda, por defecto), center (centrado), right (derecha) o justify (justificado, parejo a ambos lados).

h1 { text-align: center; }
.fecha { text-align: right; }
.articulo { text-align: justify; }

text-decoration — ¿líneas en el texto?

Agrega (o quita) líneas decorativas: underline (subrayado), line-through (tachado) o none (ninguna). El uso más frecuente es quitarle el subrayado a los enlaces, que vienen subrayados por defecto.

a { text-decoration: none; }      /* enlace sin subrayado */
.oferta { text-decoration: line-through; } /* precio viejo tachado */

Propiedad	Qué controla	Valores frecuentes
`font-family`	Tipo de letra	Arial · Georgia · "Courier New", monospace
`font-size`	Tamaño	16px · 24px · 32px
`font-weight`	Grosor	normal · bold · 100–900
`font-style`	Inclinación	normal · italic
`text-align`	Alineación	left · center · right · justify
`text-decoration`	Líneas	none · underline · line-through

⚙️ Probalo en el simulador

El HTML ya está cargado arriba. En la pestaña CSS, jugá con las seis propiedades y mirá el resultado al ejecutar.

/ HTML

<h1>Festival de Robótica</h1>
<p class="bajada">Tres días de talleres, charlas y competencias.</p>
<p>Inscribite antes del viernes.</p>
<a href="#">Quiero participar</a>

# CSS

h1 {
  font-family: Georgia, serif;
  font-size: 32px;
  font-weight: 900;
  text-align: center;
}

.bajada {
  font-style: italic;
  text-align: center;
}

a {
  text-decoration: none;
  font-weight: bold;
}

🎮 Actividades de comprensión — tocá para desplegar

1 · Ordenar: armá la regla tipográfica

Arrastrá las tarjetas hasta dejar una regla CSS completa en orden correcto.

2 · Arrastrar y soltar: cada efecto con su propiedad

Arrastrá la propiedad que produce cada efecto. Hay propiedades trampa.

Centrar el texto →

Ponerlo en negrita →

Quitar el subrayado →

Cambiar el tipo de letra →

3 · Completar: escribí la propiedad o el valor

Leé el comentario de cada regla y completá lo que falta.

/* Título centrado */
h1 { : center; }

/* Texto en negrita */
p { font-weight: ; }

/* Letra de 20 píxeles */
.dato { font-size: ; }

/* Enlace sin subrayado */
a { text-decoration: ; }

4 · Opción múltiple: propiedades tipográficas

Elegí una opción por pregunta. Se bloquea al responder y acumulás puntaje.

5a · Reto BÁSICO ✏️ (con código precargado)

El HTML está completo. En la pestaña CSS, los comentarios con ✏️ te dicen exactamente qué propiedad agregar. Ejecutá y descargá tu trabajo.

/ HTML

<h1 class="titulo">Mi blog de viajes</h1>
<p class="lema">Historias de cada lugar que piso.</p>
<p>Hoy te cuento sobre las montañas del norte.</p>
<a href="#">Leer más</a>

# CSS

.titulo {
  /* ✏️ COMPLETAR: font-family a una serif (ej: Georgia, serif) */
  /* ✏️ COMPLETAR: text-align centrado */
  font-size: 30px;
}

.lema {
  /* ✏️ COMPLETAR: font-style italic */
}

a {
  /* ✏️ COMPLETAR: text-decoration none */
  font-weight: bold;
}

5b · Reto AVANZADO 🚀 (desde cero)

Desafío: en la pestaña HTML escribí la portada de una revista digital inventada (un título, una bajada y dos párrafos). En CSS, usá las seis propiedades tipográficas al menos una vez cada una. El editor arranca vacío: el código sale de tu cabeza.

/ HTML

# CSS

Pintar con CSS: texto y fondo

En CSS el color se controla en pareja: una propiedad pinta el texto y otra el fondo. La clave de un buen diseño es que ambos contrasten bien.

En CSS, el color se controla con dos propiedades que trabajan en pareja: color pinta el texto, y background-color pinta el fondo del elemento. La clave de un buen diseño es que ambos tengan suficiente contraste entre sí, para que el texto se lea sin esfuerzo.

.aviso {
  color: white;            /* texto blanco */
  background-color: navy; /* fondo azul oscuro */
}

⚠️ Texto gris claro sobre fondo blanco, o azul sobre negro, casi no se leen. Antes de elegir colores "lindos", asegurate de que se distingan bien entre sí.

Tres formas de escribir un color

El mismo color rojo se puede escribir de tres maneras. Las tres son válidas — elegís según lo que necesites.

1️⃣ Por nombre

CSS conoce 147 colores con nombre en inglés: red, blue, gold, tomato, teal… Es la forma más fácil de empezar, pero la más limitada: solo esos 147.

p { color: red; }
div { background-color: lightblue; }

2️⃣ Hexadecimal (#)

Empieza con # seguido de 6 dígitos: dos para rojo, dos para verde, dos para azul (formato RRGGBB). Cada par va de 00 (nada) a ff (máximo). Es el formato más usado por los diseñadores: compacto y preciso, da acceso a más de 16 millones de colores.

p { color: rgb(255, 0, 0); }      /* rojo puro */
h1 { color: rgb(0, 245, 255); }     /* cian neón */
body { background-color: rgb(13, 13, 26); } /* casi negro */

💡 Truco rápido: rgb(0, 0, 0) es negro, rgb(255, 255, 255) es blanco. Cuanto más alto el número, más claro el color. Y si los 3 pares son iguales (rgb(51, 51, 51)), es un gris.

3️⃣ RGB

Se escribe rgb(rojo, verde, azul), con cada valor de 0 a 255. Es la forma más intuitiva de "mezclar luz": rgb(255, 0, 0) es todo rojo y nada de lo demás. Útil cuando querés pensar en cantidades de cada color primario.

p { color: rgb(255, 0, 0); }     /* rojo */
div { color: rgb(0, 128, 0); }   /* verde medio */
.gris { color: rgb(120, 120, 120); } /* gris */

Color	Por nombre	Hexadecimal	RGB
Rojo	`red`	`rgb(255, 0, 0)`	`rgb(255, 0, 0)`
Verde	`green`	`rgb(0, 128, 0)`	`rgb(0, 128, 0)`
Azul	`blue`	`rgb(0, 0, 255)`	`rgb(0, 0, 255)`
Blanco	`white`	`rgb(255, 255, 255)`	`rgb(255, 255, 255)`
Negro	`black`	`rgb(0, 0, 0)`	`rgb(0, 0, 0)`

💡 Cada fila muestra el mismo color escrito de tres formas. Para el navegador son idénticos: elegís el formato que te resulte más cómodo.

⚙️ Probalo en el simulador

Cambiá los colores con los tres formatos y mirá cómo conviven texto y fondo.

/ HTML

<h1>Tienda de Música</h1>
<p class="destacado">¡Envío gratis esta semana!</p>
<p>Encontrá tu próximo instrumento.</p>

# CSS

h1 {
  color: rgb(0, 245, 255);
  background-color: rgb(22, 33, 62);
  text-align: center;
}

.destacado {
  color: white;
  background-color: rgb(200, 30, 90);
}

p {
  color: navy;
}

🎮 Actividades de comprensión — tocá para desplegar

1 · Ordenar: del más oscuro al más claro (hex)

Arrastrá estos colores hexadecimales desde el MÁS oscuro hasta el MÁS claro.

2 · Arrastrar y soltar: el mismo color, tres formatos

Arrastrá cada escritura al formato que le corresponde. Hay formatos trampa.

Por nombre →

Hexadecimal →

RGB →

3 · Completar: color y fondo

Completá la propiedad o el valor según el comentario.

/* Texto rojo, escrito por nombre */
p { : red; }

/* Fondo, escrito en hexadecimal negro */
body { background-color: ; }

/* Texto blanco, escrito en RGB */
h1 { color: ; }

/* La propiedad que pinta el fondo */
div { : gold; }

4 · Opción múltiple: formatos de color

Elegí una opción por pregunta.

5a · Reto BÁSICO ✏️ (con código precargado)

El HTML está listo. En la pestaña CSS, completá los colores que piden los comentarios ✏️ usando el formato indicado en cada uno.

/ HTML

<h1 class="marca">NeónCafé</h1>
<p class="promo">2x1 en cafés todos los lunes</p>
<p>Abierto de 8 a 20 h.</p>

# CSS

.marca {
  /* ✏️ COMPLETAR: color en hexadecimal (ej: rgb(0, 245, 255)) */
  /* ✏️ COMPLETAR: background-color en hexadecimal oscuro */
  text-align: center;
}

.promo {
  /* ✏️ COMPLETAR: color por nombre (ej: white) */
  /* ✏️ COMPLETAR: background-color en RGB (ej: rgb(200, 30, 90)) */
}

5b · Reto AVANZADO 🚀 (desde cero)

Desafío: diseñá la tarjeta de un producto inventado. Usá los tres formatos de color (uno por nombre, uno hexadecimal y uno RGB) entre color y background-color, y cuidá que el texto siempre contraste con su fondo. El editor arranca vacío.

Usé un color por nombre Usé un color hexadecimal Usé un color RGB Combiné color y background-color El texto contrasta bien con su fondo

/ HTML

# CSS

¡Hora de darle vida a tus páginas! 🎨

Combinás HTML de los módulos anteriores con tu primer CSS real.

🎯 MISIÓN 1: Mi Página con Estilo

Vas a tomar la página HTML que creaste en el Capítulo 2 o 3 del Módulo 1 (o crear una nueva) y agregarle CSS. Tu trabajo debe incluir:

Reglas CSS que estilicen al menos 5 elementos diferentes usando selectores de tipo, clase e id
Al menos un elemento con style= inline, justificado con un comentario HTML
Comentarios CSS organizando el código en secciones (/* === HEADER === */, etc.)
Los tres selectores básicos usados: tipo (p), clase (.clase), id (#id)
Al menos 4 propiedades CSS diferentes (color, background-color, font-size, text-align, border…)
El código bien indentado y con una declaración por línea

🛤️ Flujo de trabajo

1

📄 Revisá tu HTML del módulo anterior: ¿tiene id y class bien definidos?

2

🎨 Pensá qué querés estilizar: hacé una lista mental o en papel.

3

🔗 Escribí tus reglas CSS en la pestaña CSS (funciona como tu <style>).

4

✏️ Agregá comentarios para organizar y justificar tus decisiones.

5

👁️ Ejecutá, previsualizá y revisá tu checklist.

💻 Tu simulador dual

Los dos editores arrancan vacíos a propósito: el código sale de tu cabeza. Tab inserta 2 espacios.

/ HTML

# CSS

✅ Checklist de autoevaluación

Usé los tres tipos de selectores: tipo, clase e id Tengo al menos 5 reglas CSS diferentes Usé las tres formas de incorporación con justificación Mi CSS tiene comentarios de sección Cada declaración está en su propia línea con indentación No olvidé ningún ; al final de las declaraciones La página se previsualiza con los estilos aplicados correctamente

🎯 MISIÓN 2: Mi Tarjeta de Presentación

Ahora sumá tipografía y color a lo que ya sabés. Vas a diseñar una tarjeta de presentación digital tuya (o de un personaje inventado). Tu trabajo debe incluir:

Al menos 4 de las 6 propiedades tipográficas (font-family, font-size, font-weight, font-style, text-align, text-decoration)
color y background-color trabajando juntos
Los tres formatos de color usados al menos una vez (nombre, hexadecimal y RGB)
Buen contraste entre texto y fondo
Una jerarquía clara: el nombre más grande, los datos más chicos

🛤️ Flujo de trabajo

1

📄 Escribí el HTML: nombre, rol y datos de contacto.

2

🔤 Elegí la tipografía: familia, tamaños y pesos.

3

🎨 Elegí los colores: texto y fondo con buen contraste.

4

👁️ Ejecutá y ajustá hasta que se vea profesional.

5

📥 Descargá tu tarjeta como .html.

💻 Tu simulador

Los editores arrancan vacíos a propósito: el diseño sale de vos. Tab inserta 2 espacios.

/ HTML

# CSS

✅ Checklist de autoevaluación

Usé al menos 4 propiedades tipográficas Combiné color y background-color Usé un color por nombre Usé un color hexadecimal Usé un color RGB El texto contrasta bien con el fondo El nombre es lo más grande de la tarjeta (jerarquía) Cada declaración termina con punto y coma

📖 Glosario interactivo del Capítulo 2

Tocá cualquier tarjeta para girarla: del otro lado está la definición, un ejemplo y el link a la sección donde se explica.