Usa CSS limitado a un componente para controlar a qué elementos se aplica una regla y una hoja de estilo compartida para reutilizar reglas en varias páginas. Para un proyecto HTML pequeño en tu Mac, puedes combinar ambas opciones; elige cómo organizar los archivos según lo que necesites mover y mantener.

Esta guía explica cómo aplicar estilos a una página local que contiene una tarjeta cuadrada con esquinas redondeadas y una nota aparte. El objetivo es mantener predecible la apariencia de la tarjeta y decidir después si su CSS debe ir dentro de la página o en un archivo reutilizable. Las etiquetas y la forma son ficticias, y el ejemplo no requiere ningún framework ni recursos descargados.

¿Qué estás eligiendo exactamente?

Hay dos decisiones: dónde reside el CSS y qué elementos selecciona. Una hoja de estilo integrada reside en el elemento style de un documento HTML. Una hoja de estilo externa es un recurso separado que se adjunta con link, usando rel="stylesheet" y una ruta href. Estos son los mecanismos de HTML para proporcionar CSS; ninguna de las dos opciones crea automáticamente un límite de componente para los selectores normales. Estándar HTML: el elemento style, MDN: elemento de enlace a recursos externos.

El CSS nativo @scope añade un límite de selección. Se identifica un elemento raíz y luego se escriben reglas que se aplican dentro de ese subárbol. Puede hacer que los selectores cortos sigan siendo útiles cuando el documento circundante contiene elementos similares. La documentación de Chrome también distingue el ámbito nativo de las herramientas que reescriben selectores con clases o atributos generados. Estas herramientas son un requisito adicional si un ejemplo de componente depende de ellas. Limita el alcance de tus selectores con la regla CSS @scope.

Para esta tarea, usa la siguiente guía de decisión. Es una recomendación editorial basada en los mecanismos documentados, no un requisito del navegador.

Tu tarea inmediata Organización sugerida Qué debe acompañarla
Mantener una página pequeña en un solo archivo Incrusta el CSS en un elemento style El HTML y cualquier recurso al que se haga referencia por separado
Mantener la misma tarjeta en varias páginas Usa una hoja de estilo externa con clases de componente específicas Cada página HTML y el CSS compartido
Usar selectores más cortos dentro de un subárbol definido Añade reglas @scope con raíz explícita, integradas o externas El CSS y el marcado que contiene la raíz correspondiente
Dar compatibilidad a navegadores cuyo soporte de ámbitos no está claro Mantén los estilos esenciales en reglas de clases normales El HTML y la hoja de estilo que contenga esas reglas

Por tanto, «portátil» necesita un significado concreto. Es práctico poder mover un único archivo HTML por sí solo. Una carpeta que contiene HTML y CSS también puede ser portátil, siempre que sus rutas sigan resolviéndose. Un componente reutilizable requiere un tercer tipo de portabilidad: el destino debe conservar los puntos de anclaje del marcado que esperan sus selectores.

Crea un ejemplo funcional de dos archivos en tu Mac

Crea una carpeta llamada form-study. Dentro, guarda dos archivos de texto sin formato llamados index.html y shared.css. Si usas TextEdit, elige Archivo > Nuevo y luego Formato > Convertir en texto sin formato antes de pegar el código. Para el archivo HTML, Apple documenta cómo guardarlo con la extensión .html y elegir Usar .html cuando se solicite. Asegúrate de que el nombre real de la hoja de estilo sea shared.css, sin que se añada el sufijo .txt. Trabajar con documentos HTML en TextEdit en Mac.

Guarda este documento HTML completo como index.html:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Form Study</title>
  <link rel="stylesheet" href="shared.css">
</head>
<body>
  <main class="study-page">
    <h1>Form Study</h1>
    <section class="shape-card">
      <h2 class="shape-card__title">Tile A</h2>
      <div class="shape-card__shape" aria-hidden="true"></div>
      <p>A rounded square.</p>
    </section>
    <section class="plain-note">
      <h2>Note B</h2>
      <p>This section is outside the card.</p>
    </section>
  </main>
</body>
</html>

Guarda esta hoja de estilo completa como shared.css:

body {
  margin: 0;
  background: #f4f3ef;
  color: #252525;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

.study-page {
  max-width: 40rem;
  margin: 2rem auto;
  padding: 0 1rem;
}

.shape-card {
  padding: 1.5rem;
  border: 2px solid #526676;
  border-radius: 1rem;
  background: #ffffff;
}

.shape-card__title {
  margin: 0 0 1rem;
  color: #36576b;
}

.shape-card__shape {
  width: 6rem;
  height: 6rem;
  border-radius: 1.25rem;
  background: #597b91;
}

.plain-note {
  margin-top: 2rem;
}

Abre index.html en Safari o en otro navegador de escritorio. El resultado esperado es una tarjeta blanca con borde y un cuadrado azul con esquinas redondeadas, seguida de una nota sin borde. La conexión con la hoja de estilo sigue el patrón documentado por MDN: el HTML indica el recurso CSS mediante href en un enlace a una hoja de estilo. MDN: incluir una hoja de estilo.

El ejemplo asigna deliberadamente su propia clase al título de la tarjeta. Así se hace visible la relación de estilo prevista sin requerir el ámbito nativo. El fondo de la página y la fuente son valores predeterminados del documento; el borde de la tarjeta, el color del título y la forma pertenecen a la tarjeta. Mantén esa distinción al extraer reglas reutilizables: es posible que una página de destino quiera la tarjeta sin adoptar el fondo ni el ancho de esta página.

Para compartir el diseño, crea una segunda página HTML en la misma carpeta y usa el mismo enlace a la hoja de estilo. Así, ambas páginas harán referencia a un único archivo CSS. Considera que los cambios en ese archivo afectan a todas las páginas que lo enlazan; revisa cada página después de modificar una regla compartida.

¿Cuándo resulta útil el CSS nativo con ámbito?

Usa @scope cuando un componente contenga varios elementos a los que les convengan selectores locales sencillos, sobre todo si necesitas establecer un límite inferior explícito alrededor del contenido anidado. La especificación CSS Cascading and Inheritance define un ámbito mediante una raíz y elementos límite opcionales. La raíz está incluida; los elementos límite y sus descendientes quedan excluidos de la coincidencia con las reglas delimitadas. Esta especificación es un borrador de trabajo. CSS Cascading and Inheritance Level 6: delimitación de estilos.

Para un experimento pequeño, añade el siguiente fragmento opcional al final de shared.css. Usa el marcado de ejemplo existente y cambia la apariencia del párrafo de la tarjeta:

/* Optional addition to shared.css */
@scope (.shape-card) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

En un navegador compatible, el párrafo dentro de la tarjeta recibe un fondo pálido y relleno. El párrafo de la nota queda fuera del ámbito de esa regla. El CSS sigue estando en el archivo compartido: la delimitación de ámbito y el uso compartido funcionan juntos.

Si más adelante introduces una región anidada con la clase nested-sample, podrías sustituir ese fragmento opcional por este. Es un ejemplo de límite; la página original aún no contiene una región anidada de ese tipo.

/* Alternative optional fragment */
@scope (.shape-card) to (.nested-sample) {
  p {
    padding: 0.5rem;
    background: #edf2f5;
  }
}

El límite excluye la región anidada de las coincidencias de estos selectores. No crea un aislamiento completo de los estilos: las propiedades heredadas, como color y font-family, todavía pueden propagarse más allá del límite del ámbito. Ten presente esta distinción al diagnosticar por qué un elemento anidado sigue pareciéndose a su elemento principal. MDN: descripción de @scope.

Una raíz explícita como .shape-card también deja clara la dependencia cuando se mueve el CSS entre archivos. El documento de destino debe contener un elemento con esa clase. Mover solo la hoja de estilo no puede proporcionar el marcado necesario.

¿Cuáles son los límites de compatibilidad de los navegadores?

MDN marca actualmente @scope como Baseline 2026, disponible recientemente en las versiones más recientes de los navegadores desde marzo de 2026. Es posible que los navegadores antiguos no lo admitan. Tener un Mac en el escritorio no determina qué funciones CSS admite el navegador instalado; consulta la información de compatibilidad de las versiones que piensas usar. MDN: compatibilidad de navegadores con @scope.

Si necesitas compatibilidad con navegadores antiguos, mantén los estilos esenciales de la tarjeta en las reglas de clases normales de arriba. El tratamiento opcional del párrafo con ámbito puede quedar como mejora. La gestión de errores de CSS permite que los navegadores descarten contenido no compatible y sigan procesando CSS válido, por lo que la presencia de una hoja de estilo no implica que todas las reglas que contiene hayan surtido efecto. MDN: gestión de errores de CSS.

Para aplicar el mismo estilo al párrafo sin @scope, asigna al párrafo de la tarjeta una clase específica, como shape-card__caption, y luego selecciona esa clase en una regla normal. Esto añade un punto de anclaje al marcado, pero evita depender del ámbito nativo para obtener el resultado.

No añadas un atributo scoped a un elemento style esperando el mismo comportamiento. La lista de atributos para ese elemento en el estándar HTML actual no lo incluye. El ámbito nativo de CSS usa la regla @scope. Estándar HTML: el elemento style, MDN: sintaxis de @scope.

¿Cómo mantienes la página portátil?

En este ejemplo, mover la carpeta completa form-study conserva la relación entre index.html y shared.css. Si mueves solo el HTML, dejas atrás su hoja de estilo. Antes de entregar u reorganizar una página creada, usa este sencillo acuerdo de dependencias:

  1. Marcado: Conserva las clases del componente y cualquier estructura que requieran sus selectores.
  2. Hoja de estilo: Incluye el archivo CSS y mantén el enlace HTML apuntando a su ubicación.
  3. Recursos: Incluye los archivos a los que haga referencia el CSS y conserva o actualiza sus rutas.
  4. Navegador: Mantén una vía de estilos compatible con las versiones de navegador que abrirán la página.

La tercera comprobación cobra importancia cuando un componente incorpora fuentes o archivos decorativos. MDN documenta que las URL relativas de CSS se resuelven con respecto a la URL de la hoja de estilo. Por tanto, mover declaraciones a una hoja de estilo en otra carpeta puede cambiar la ubicación del recurso al que apuntan. MDN: función CSS url().

Por ejemplo, si una hoja de estilo externa pasa de la carpeta del proyecto a una subcarpeta styles, una declaración directa que haga referencia a url("assets/tile.png") ahora apunta dentro de styles/assets. Actualiza la ruta o conserva la estructura de directorios correspondiente. El ejemplo funcional evita esa dependencia al dibujar la forma únicamente con CSS.

Si la prioridad es entregar un único archivo, incrusta el CSS proporcionado en un elemento style dentro de head del documento y elimina el enlace a la hoja de estilo. Entonces, el ejemplo actual solo necesita el archivo HTML. Conserva los mismos selectores, incluido cualquier bloque @scope opcional con raíz explícita. HTML permite incrustar una hoja de estilo mediante el elemento style. Estándar HTML: el elemento style.

Comprueba la decisión con una prueba de traslado y recarga

Haz una copia de la carpeta completa del proyecto en otra ubicación y abre el HTML copiado en el navegador. En esa copia, cambia el color de fondo de la forma en shared.css, guarda el archivo y vuelve a cargar la página. El cambio visible confirma que editaste la hoja de estilo usada por la página copiada.

A continuación, revisa tanto la tarjeta como la nota. Un resultado correcto conserva los estilos de la tarjeta y deja la nota fuera de la regla opcional que delimita el párrafo. Si toda la página pierde sus estilos, comprueba primero el nombre del archivo CSS y la ruta del enlace. Si falta solo el tratamiento opcional, comprueba la compatibilidad del navegador y la raíz del ámbito. Si cambia un elemento que no corresponde, revisa los selectores que abarcan más allá del componente previsto.

Al volver a abrir el HTML en TextEdit, usa Archivo > Abrir y luego Mostrar opciones y Ignorar comandos de texto enriquecido si necesitas ver el código fuente. Apple también documenta el ajuste Mostrar los archivos HTML como código HTML en lugar de texto con formato para futuras aperturas. Trabajar con documentos HTML en TextEdit en Mac.

Elige CSS integrado cuando la tarea principal sea mantener esta página pequeña en un solo archivo. Elige una hoja de estilo compartida cuando varias páginas deban usar las mismas reglas mantenidas. Añade delimitación de ámbito nativa cuando sus límites simplifiquen esas reglas y la compatibilidad del navegador lo permita. Para terminar, mueve y vuelve a abrir los archivos reales: así comprobarás las relaciones entre el marcado, la hoja de estilo y los recursos de las que depende la organización elegida.

Fuentes