HTML CSS

Ya practicaste pequeños cambios de aspecto con el atributo style y valores de color. Los sitios reales rara vez guardan cada regla de diseño en cada etiqueta. CSS (Cascading Style Sheets) es el lenguaje que describe la apariencia. Esta sesión se centra en cómo HTML carga CSS de tres formas habituales — no en construir aún un sistema de diseño completo. Entender dónde viven las reglas ahorra tiempo de corrección después y acerca las páginas de práctica al flujo de proyectos reales. Cuando sabes dónde reside cada tipo de estilo, el paso a un curso de CSS resulta más claro porque primero conectas la página al archivo antes de escribir reglas de maquetación complejas.

¿Qué hace CSS aquí?

HTML estructura el contenido. CSS describe la presentación: colores, espacios, tipografías e ideas de diseño que profundizarás más adelante. Tu página HTML puede llevar unas pocas declaraciones CSS en un elemento, guardar una hoja pequeña dentro del documento o apuntar a un archivo .css aparte. Elegir el lugar correcto mantiene las demos rápidas y los proyectos reales mantenibles. Si pones todo en línea en cada etiqueta, actualizar se vuelve lento y repetitivo; si vinculas pronto un archivo externo, practicas el hábito de compartir del que dependen los sitios reales. El objetivo aquí no es memorizar una biblioteca de propiedades, sino entender la ruta de carga desde HTML hasta la regla que aplica el navegador.

Respuesta directa

Usa CSS en línea con style="..." en un elemento para pruebas rápidas. Usa un bloque interno <style>...</style>, normalmente en <head>, para práctica de una sola página. Usa un archivo externo .css enlazado con <link rel="stylesheet" href="styles.css"> cuando muchas páginas deban compartir el mismo aspecto. Prefiere CSS externo en cuanto te importe la reutilización y un HTML limpio. Esta regla sencilla evita mezclar demos rápidas con el estilo de todo un sitio; cada método tiene un papel claro, y pasar de en línea a externo es un paso natural de aprendizaje, no un fracaso.

Tres formas de un vistazo

CSS en línea (recordatorio)

El CSS en línea vive en un solo elemento. Es perfecto para un experimento de treinta segundos y débil para un sitio entero, porque cada aspecto repetido hay que copiarlo otra vez. Si necesitas un color en un párrafo durante la explicación, el atributo basta; si el color se repite en diez párrafos de cinco páginas, copiar se vuelve fuente de errores. Usa lo en línea como puente de aprendizaje, no como base de una marca multipágina.

Cuándo lo en línea aún ayuda

• Comprobar rápido un color o un tamaño
• Enseñar la idea property:value de sesiones anteriores
• Anulaciones temporales mientras aprendes — luego mueve la regla a una hoja de estilos
  No construyas toda una marca multipágina solo con atributos en línea. Ese camino se vuelve difícil de actualizar, dificulta compartir la misma regla entre archivos y ralentiza cualquier cambio de color posterior en todo el sitio. Reserva lo en línea para ensayos cortos y pasa pronto a un bloque interno o a un archivo externo.

CSS interno en el head

Una hoja interna es un elemento <style> que guarda reglas CSS del archivo HTML actual. Los principiantes suelen colocarlo en <head> para declarar el estilo antes del contenido de body. Ese orden ayuda al navegador y al aprendiz: ves las reglas en un solo sitio arriba de la página en lugar de buscarlas en medio del contenido. El bloque interno encaja cuando practicas varias reglas pero aún trabajas en un solo archivo HTML.

Lectura del ejemplo interno

• El elemento style contiene CSS, no etiquetas HTML de estructura de página
• p { color: navy; } significa «todos los elementos p reciben texto azul marino» en este documento
• Una regla puede estilizar muchos párrafos sin repetir style="..." en cada etiqueta
• El CSS interno sigue atrapado en este único archivo HTML — otras páginas no lo ven salvo que copies el bloque
• Puedes añadir más reglas en el mismo bloque, por ejemplo para h1, sin abrir aún un segundo archivo

CSS externo con link

El CSS externo guarda las reglas en un archivo como styles.css. HTML se conecta a ese archivo con un elemento link. Este es el patrón habitual del estilo compartido del sitio. Cuando el color del encabezado cambia una vez en el archivo externo, todas las páginas enlazadas se ven afectadas — esa es la gran ganancia frente a copiar bloques internos en cada archivo. Empieza con un CSS junto al HTML y organiza carpetas cuando las rutas estén firmes.

Qué debe ser cierto para que funcione el CSS externo

• El link necesita rel="stylesheet" para que el navegador conozca la relación
• href debe apuntar al archivo CSS real con una ruta correcta (ver la sesión File Paths)
• Dentro de styles.css escribes reglas como p { color: navy; } y h1 { color: darkgreen; }
• Si la ruta es incorrecta, el HTML igual se abre — pero se ve sin estilo
• Los nombres de archivo pueden distinguir mayúsculas en algunos servidores; haz coincidir el nombre en href con el nombre real en disco
  Pon el archivo CSS junto al HTML en la primera práctica y prueba una subcarpeta solo cuando las rutas se sientan sólidas. Romper el enlace a propósito y luego repararlo entrena la vista más rápido que solo leer teoría.

Elegir un método

Pregunta hasta dónde deben viajar los estilos:

• Un experimento rápido en un elemento → en línea
• Una página de práctica, varias reglas → <style> interno en head
• Muchas páginas, un aspecto compartido → .css externo + link
  Cuando más adelante entres en un curso completo de CSS, las hojas externas serán el valor por defecto de los proyectos reales. Esta sesión de HTML asegura que sepas conectarlas bien antes de escribir maquetaciones complejas. No hay un «método incorrecto» en un ejercicio corto; el error es usar solo lo en línea cuando el sitio ya necesita compartir de verdad. Elige el método que coincida con el alcance de reutilización y manténlo hasta que cambie la necesidad del proyecto.

Práctica en tu editor

1. Crea page.html con un encabezado y dos párrafos.
2. Crea styles.css con una regla que colorea h1 y otra que estiliza p.
3. En el head del HTML añade <link rel="stylesheet" href="styles.css">.
4. Abre la página. Si faltan estilos, revisa la ruta y rel.
5. Renombra o mueve temporalmente styles.css, recarga, mira el fallo y luego corrige href.
6. Opcional: mueve una regla a un bloque interno <style> y compara.
   Romper el enlace a propósito enseña errores de ruta más rápido que solo leer sobre ellos. Repite el ejercicio con un archivo en una subcarpeta pequeña después de que funcione el enlace al lado de la página, hasta confiar en que href refleja el lugar real del archivo. Guarda siempre antes de recargar para no pensar que el navegador ignoró una regla que no guardaste.

Errores que dejan las páginas sin estilo

• Olvidar rel="stylesheet" en link
• Poner styles.css en otra carpeta pero enlazar como si estuviera junto al HTML
• Llenar cada etiqueta con style en línea en lugar de compartir una hoja
• Soltar por costumbre un bloque grande <style> al final de body cuando head es más claro para principiantes
• Editar el archivo CSS pero refrescar un HTML distinto del que enlazaste
• Escribir en href un nombre de archivo que difiere en espacios o extensión del archivo real en disco
  Cada uno de estos errores pierde tiempo o te hace creer que «CSS no funciona» cuando el problema es el enlace. Lee la página como un visitante: ¿llegó el estilo? ¿Sabes qué archivo aporta la regla?

Resumen

• CSS estiliza HTML; HTML puede cargar CSS en línea, interno o externo
• El style en línea vale para pruebas pequeñas, no para sitios enteros
• El <style> interno en head encaja con la práctica de un solo archivo
• .css externo más link rel="stylesheet" es el enfoque compartido habitual
• Las rutas de archivo correctas importan tanto como las propias reglas CSS
• Prefiere el método que coincida con lo amplio que deba reutilizarse el estilo
  Con este orden construyes un hábito claro: prueba rápido cuando haga falta, organiza reglas en la página de práctica y luego enlaza un archivo compartido cuando crezcan las páginas — y comprueba siempre la ruta y rel antes de culpar a la regla misma.