Recommended resources
The freely available resources this lesson will direct you to.
¡Hola! En la lección anterior identificaste lo que debe contener tu página sobre robótica y las reglas que harán legible su tipografía. Ahora toca distinguir dos responsabilidades antes de empezar a crear archivos: HTML indica qué contenido hay y qué función cumple cada parte; CSS indica cómo se presenta ese contenido.
Esta diferencia te ayudará a tomar decisiones con claridad. Cuando necesites añadir un subtítulo, trabajarás en HTML. Cuando necesites que ese subtítulo tenga un tamaño o color distinto, trabajarás en CSS.
Una página, dos responsabilidades
HTML utiliza elementos para identificar el contenido. Por ejemplo, <h1> señala un título principal, <p> contiene un párrafo y <ul> agrupa una lista no ordenada. Esas etiquetas no significan «texto grande», «texto pequeño» o «texto con viñetas de cierto color»: describen la función de cada parte.
CSS contiene reglas de presentación. Puede indicar qué fuente usar, cuánto mide un título, de qué color aparece un párrafo o cuánto espacio hay entre elementos. El navegador lee el HTML y aplica las reglas CSS que correspondan para mostrar la página.
Mira cómo se distinguen ambas funciones en este breve fragmento de Aprende CSS en 15 Minutos, de Victor Robles WEB. El ejemplo del video es más amplio que tu proyecto; por ahora, concéntrate en la separación entre contenido y aspecto.
Mira cómo el autor define la función de HTML y CSS, construye contenido antes de darle estilo y muestra la opción de guardar el diseño en una hoja separada.
Observa las dos funciones. Después, en el título HTML, fíjate en que el encabezado ya existe al abrir la página, antes de diseñarla. Por último, mira la hoja externa: el autor conecta un archivo CSS al HTML sin trasladar el contenido de la página a ese archivo.
La siguiente imagen reúne los dos archivos y el resultado en el navegador. Aunque su contenido no trata de robótica, permite ver con precisión qué aporta cada uno.
En la imagen, el título «Introducción» está escrito en el HTML dentro de <h1>. La regla h1 { text-align: center; } está en el CSS y hace que se vea centrado. Los párrafos también están en HTML; CSS les asigna una fuente y un tamaño. El segundo párrafo lleva una clase llamada resaltado, que permite aplicarle el color azul. El color no convierte ese texto en otro tipo de contenido: sigue siendo un párrafo.
Hay un tercer participante que conviene recordar: el navegador. Incluso si desconectaras la hoja CSS, mostraría el título, los párrafos y la lista, con sus estilos predeterminados. Por eso una página sin CSS no es necesariamente una pantalla de texto idéntico: el navegador ya suele mostrar los encabezados más grandes y las listas con viñetas. CSS permite sustituir o ajustar esa presentación inicial.
Cómo se relacionan los archivos
Para tu proyecto usaremos como referencia index.html y styles.css. El HTML puede incluir, dentro de <head>, un enlace a la hoja de estilos:
<link rel="stylesheet" href="styles.css">
El valor de href indica dónde buscar el archivo CSS. En este ejemplo, styles.css estaría en la misma carpeta que index.html. La imagen anterior muestra una ruta diferente porque allí la hoja está dentro de una carpeta llamada css. No necesitas memorizar todas las rutas ahora; lo importante es entender que el enlace permite al navegador encontrar las reglas visuales.
Lee los fragmentos indicados de Empezar con CSS, de MDN Web Docs. La lectura explica esa conexión y aclara qué ocurre antes de aplicar estilos propios.
Empezar con CSS - Aprende desarrollo web | MDN
Esta lectura muestra cómo una hoja CSS externa se vincula con HTML, cómo una regla elige elementos de la página y por qué estos ya tienen cierto aspecto aunque todavía no hayas escrito CSS.
En «Agregar CSS a un documento», lee la idea del enlace. Continúa desde el párrafo que comienza «Crea un archivo en la misma carpeta» hasta la explicación del atributo href; fíjate en qué archivo contiene las reglas y en cómo lo localiza el HTML. En «Dar formato a elementos HTML», lee los selectores y continúa hasta el ejemplo que selecciona juntos párrafos y elementos de lista. Observa que h1, p y li nombran elementos del HTML; las declaraciones de color indican su aspecto. En «Cambiar el comportamiento predeterminado de los elementos», lee los estilos iniciales. Detente ahí: no necesitas estudiar todavía la eliminación de viñetas ni el uso de clases.
Una regla CSS sencilla se puede leer en dos partes:
h1 {
color: #17365d;
}
h1 es el selector: señala los títulos principales del HTML. color: #17365d; es una declaración: indica el color de sus letras. La regla no escribe ni reemplaza el título. Si cambiaras las palabras del título, editarías HTML; si cambiaras su color, editarías CSS.
Aplicado a tu página de robótica
Imagina este pequeño fragmento del contenido que aparecerá en tu HTML:
<h1>Robótica en la vida cotidiana</h1>
<h2>Aplicaciones cercanas</h2>
<p>Los robots pueden ayudar a realizar tareas repetitivas o precisas.</p>
<ul>
<li>Exploración</li>
<li>Asistencia</li>
</ul>
Aquí ya se reconoce un título principal, un subtítulo, un párrafo y una lista. Todavía no es la página completa de la asignación: faltan, entre otras cosas, otro párrafo, un botón y una imagen. El fragmento solo sirve para ver que la organización del contenido puede establecerse antes de elegir su aspecto definitivo.
En styles.css podrían aparecer estas reglas ilustrativas:
h1 {
color: #17365d;
font-size: 32px;
}
h2 {
font-size: 24px;
}
p {
font-size: 16px;
}
Si modificas font-size del h1, su texto se verá más grande o más pequeño, pero seguirá siendo el título principal identificado por HTML. Si borras la regla CSS del h2, el subtítulo no desaparece: el navegador vuelve a presentarlo con su estilo predeterminado. En cambio, si borras el elemento <h2> del HTML, eliminas ese subtítulo del contenido.
Esta distinción es especialmente útil para tu meta tipográfica. La jerarquía del contenido empieza al decidir que «Robótica en la vida cotidiana» es el título principal y «Aplicaciones cercanas» es un subtítulo. La jerarquía visual se refuerza después con tamaños, pesos, colores y espaciados en CSS. Las dos deben colaborar: hacer enorme un párrafo con CSS no lo convierte en un encabezado.
También explica por qué conviene conservar ambos archivos al compartir una página que usa una hoja externa. El HTML puede abrirse sin el CSS y mantener su contenido, pero perdería las decisiones visuales que justifican tu trabajo de tipografía.
Para continuar
Quédate con una regla práctica: elige en HTML qué es cada cosa; decide en CSS cómo debe verse. El navegador combina ambos y, cuando no encuentra una regla tuya, usa su presentación predeterminada.
En la próxima lección prepararás la carpeta del proyecto y crearás index.html y styles.css. Más adelante completarás el contenido sobre robótica y ajustarás su tipografía sin confundir los cambios de estructura con los cambios de presentación.