Estilos HTML

Ya puedes construir la estructura de la página y apuntar a otros archivos con rutas. La siguiente pregunta de principiantes es cómo cambiar cómo se ve el contenido: color del texto, fondo y tamaño. En la práctica temprana de HTML puedes hacerlo con el atributo style. Es una pequeña puerta a ideas de CSS — útil para demos — mientras el diseño completo del sitio se moverá más adelante a CSS adecuado en tu ruta de aprendizaje.

¿Qué es el atributo style?

El atributo style te permite adjuntar declaraciones CSS directamente a la etiqueta de inicio de un elemento HTML. El navegador lee esas declaraciones y pinta ese elemento en consecuencia. No inventas un segundo idioma desde cero: escribes reglas CSS cortas en un lugar que HTML ya proporciona. Por eso el estilo en línea es una buena herramienta didáctica, aunque los proyectos profesionales rara vez guardan todo el diseño dentro de atributos.

Respuesta directa

Añade apariencia con style="property: value;" en un elemento. Las propiedades de inicio incluyen color (primer plano del texto), background-color (el área detrás del contenido) y font-size (tamaño del texto). Pon toda la lista entre comillas. Separa varias declaraciones con punto y coma. Para sitios reales de varias páginas, prefiere un archivo CSS o un bloque <style> para no repetir el mismo aspecto en cada etiqueta — pero en esta lección concéntrate en leer y escribir declaraciones en línea claras.

Propiedad y valor, uno a uno

Cada declaración tiene una propiedad (qué quieres cambiar) y un valor (cómo debe verse). Unos dos puntos van entre ellos. Los principiantes deben dominar bien unas pocas propiedades antes de memorizar una lista enorme.

Leer el ejemplo

• color: blue cambia solo el color del texto de ese párrafo
• background-color: lightyellow colorea el fondo detrás del texto
• font-size: 24px fija el tamaño del texto; px es una unidad habitual para principiantes
• Cada párrafo tiene su propio style="..." para que los tres efectos queden separados y fáciles de ver
• Colores con nombre como blue sirven para practicar; más adelante también verás valores hex como #336699
  Si no cambia nada en el navegador, confirma que guardaste el archivo, actualizaste la página y mantuviste las comillas alrededor de todo el valor de style.

Varias declaraciones en un atributo

Puedes combinar declaraciones dentro de un solo atributo style. Mantén la lista corta para que el HTML siga siendo legible. Termina cada declaración con punto y coma — incluido uno final está bien y a menudo queda más claro al editar después.

Por qué importa este patrón

• Un elemento puede llevar color, fondo y tamaño juntos
• Los puntos y comas separan las declaraciones para que el navegador pueda analizar cada par
• #f0f0f0 es un color hex; es opcional para principiantes pero común en CSS real
• La frase visible dentro del párrafo es texto HTML normal; solo el atributo style cambia la apariencia
  Evita meter diez decisiones de diseño en un atributo el primer día. Aprende la sintaxis primero con dos o tres propiedades claras.

Style en distintos elementos

El atributo style no se limita a p. Encabezados, spans y muchos otros elementos pueden usarlo igual. Eso ayuda a ver que el estilo sigue al elemento al que lo adjuntes — no un interruptor mágico global.

Qué notar

• El color del h1 no reestiliza automáticamente los párrafos
• El segundo párrafo combina fondo y tamaño de fuente
• El estilo en línea es local: afecta a ese elemento (y, por reglas CSS normales, puede influir en hijos — pero mantén las demos simples por ahora)

Style en línea ahora, CSS después

El style en línea es rápido para experimentos. Se vuelve doloroso cuando veinte páginas necesitan el mismo color de encabezado azul marino y debes editar veinte atributos. CSS compartido — un bloque <style> en la cabecera del documento, o un archivo .css externo — mantiene la apariencia en un solo lugar. Este curso incluye aprendizaje dedicado de CSS más adelante. En esta sesión de HTML, tu trabajo es entender la idea property:value y escribir unos ejemplos en línea correctos sin tratar el estilo en línea como la arquitectura final de un sitio entero.

Practica en tu editor

1. Crea una página con un h1 y tres párrafos cortos.
2. Da al primer párrafo un color de texto.
3. Da al segundo un background-color.
4. Da al tercero una combinación de color y font-size.
5. Opcionalmente colorea el h1 con su propio style.
6. Guarda y actualiza. Confirma que cada bloque se ve distinto.
7. Rompe un ejemplo a propósito (quita una comilla o un px), actualiza, mira el fallo y luego corrígelo.
   Trabajar un style fallido enseña comillas y unidades más rápido que solo copiar muestras perfectas.

Errores que ocultan tus estilos

• Olvidar las comillas alrededor del valor: style=color:red no es válido en la escritura normal de atributos HTML
• Confundir color (texto) con background-color (detrás del texto) y pensar que «el color no hizo nada»
• Omitir unidades donde el tamaño las necesita (font-size: 24 en lugar de 24px en muchos casos de principiante)
• Un procesador de texto que sustituye comillas rectas por comillas tipográficas dentro de atributos
• Meter el diseño de toda una página en estilos en línea en vez de aprender CSS compartido a continuación
• Cambiar el archivo pero olvidar guardar antes de actualizar — el navegador sigue mostrando la versión antigua

Resumen

• El atributo style añade declaraciones CSS a un elemento HTML
• Escribe property: value; y mantén toda la lista entre comillas
• Propiedades de inicio: color, background-color, font-size
• Combina unas pocas declaraciones con punto y coma; mantén las demos cortas y legibles
• El estilo en línea es excelente para aprender y experimentos pequeños, no para mantener el diseño de todo un sitio
• El CSS compartido llega después en la ruta de aprendizaje cuando quieres un solo lugar para controlar la apariencia
• Verifica siempre con guardar + actualizar, y revisa comillas y unidades cuando los estilos «fallan misteriosamente»