Curso HTML 13. Integración de HTML con CSS (desde el punto de vista del HTML)

En este punto del curso veremos cómo HTML se enlaza y coordina con CSS para definir estilos, su estructura y su orden de prioridad. Aprenderás a incorporar archivos externos, estilos internos, estilos en línea, gestionar la especificidad y organizar tus recursos para conseguir una aplicación óptima de estilos.

1. Vinculación de archivos CSS externos

La forma más común y recomendable de aplicar CSS es enlazando un archivo externo en el <head> de tu documento HTML utilizando la etiqueta <link>. Esto separa contenido y diseño, facilita el cacheo y la mantenibilidad.

rel: debe ser ‘stylesheet’ para CSS.
href: ruta al archivo CSS.
media (opcional): define para qué dispositivo o tamaño se aplica, por ejemplo media='screen and (max-width: 600px)'.

2. Estilos internos con <style>

Cuando se requiere un CSS específico dentro de la misma página, podemos usar la etiqueta <style> dentro del <head>. Útil para pequeños fragmentos de estilos que se aplican sólo a esa página.

3. Estilos en línea (inline)

Para aplicar un estilo puntual y único a un elemento concreto, se puede usar el atributo style directamente en la etiqueta HTML. Su uso habitual es muy limitado porque dificulta la reutilización y el mantenimiento.

Texto con estilo en línea

4. Orden de carga y especificidad

El navegador procesa los estilos siguiendo este orden (del menor al mayor peso):

Estilos de navegador (user agent).
Estilos externos
Estilos internos (<style>).
Estilos en línea (style='…').

Si hay conflicto, gana el que tenga mayor especificidad CSS:

Selector	Especificidad	Ejemplo de prioridad
Etiqueta (p, div)	0,0,0,1	p {…}
Clase (.clase)	0,0,1,0	.clase {…}
ID (#id)	0,1,0,0	#miId {…}
Inline	1,0,0,0	style=’…’

5. Organizando con `class` y `id`

Para referenciar elementos desde CSS, usamos atributos:

class: permite asignar uno o varios estilos reutilizables.
id: identificador único en la página; da mayor especificidad.



  Tarjeta destacada
  Contenido con varias clases.




  Sección de introducción identificada.

6. Media attributes en <link> y criterios de carga

Puedes controlar en qué condiciones se carga un CSS añadiendo el atributo media a la etiqueta <link>. Por ejemplo:

7. Comentarios y buenas prácticas

Usa comentarios en CSS externo, no en HTML. En CSS: /* comentario */.
Evita el abuso de estilos en línea; dificulta la lectura.
Separa archivos grandes: uno para componentes, otro para diseño global, otro para utilities.
Aplica la metodología BEM o similar para nombrar clases y mantener la coherencia.

Con todo esto, tendrás un control completo de cómo tu HTML interactúa con CSS, desde la estructura y la carga de archivos hasta la resolución de conflictos de especificidad.

Curso HTML 13. Integración de HTML con CSS (desde el punto de vista del HTML)