CSS
Aplicar CSS y orígenes de estilo
Formas de aplicar CSS mediante hojas externas, estilos internos e inline, junto con los orígenes del navegador, usuario y autor.
- Última actualización
- Actualizada
- Nivel
- Fundamentos
CSS
Formas de aplicar CSS mediante hojas externas, estilos internos e inline, junto con los orígenes del navegador, usuario y autor.
<link rel="stylesheet" href="/styles.css">Es la opción principal para estilos compartidos porque permite cache, separación y descubrimiento temprano.
<link
rel="stylesheet"
href="/print.css"
media="print"
>El atributo media limita cuándo aplica la hoja.
<style>
.card { padding: 1rem; }
</style>Útil para CSS crítico, documentos autocontenidos o estilos generados. No es “inline style”: sigue siendo una stylesheet de autor.
<div style="padding: 1rem"></div>Participa como estilo inline y tiene una posición especial de alta prioridad dentro del origen de autor. Dificulta reutilización y overrides; resérvalo para valores realmente dinámicos o APIs concretas.
@import url("tokens.css") layer(tokens);Organiza CSS, pero la descarga puede descubrirse después de cargar la hoja principal. Bundlers pueden resolverlo durante build; revisa el output real.
user-agent → estilos predeterminados del navegador
user → preferencias o estilos del usuario
author → estilos del sitioLos estilos de usuario son esenciales para accesibilidad. El autor no tiene control absoluto.
.button {
color: white !important;
}!important cambia el orden dentro de la cascada. No significa “máxima prioridad universal”: origen, layer y transiciones todavía importan.
Evita usarlo como respuesta automática a conflictos.
<button>Guardar</button>El navegador aporta apariencia inicial, foco, controles y estados. Un reset puede modificarlos, pero no debería borrar señales útiles sin reconstruirlas.
Reduce diferencias y elimina defaults.
Conserva defaults útiles y corrige inconsistencias.
No copies una hoja global sin comprender qué cambia en formularios, headings, listas y foco.
<link rel="stylesheet" href="vendor.css">
<link rel="stylesheet" href="app.css">Si origen, importancia, layer y especificidad empatan, la declaración posterior gana.
La plataforma permite hojas con títulos, media y estado disabled, aunque son menos comunes. JavaScript puede activar o desactivar una stylesheet; el cambio vuelve a calcular estilos.
Frameworks pueden cargar CSS mediante:
Todos terminan produciendo reglas que participan en el mismo motor de estilos, salvo límites específicos como Shadow DOM.
<link rel="stylesheet" href="/styles/tokens.css">
<link rel="stylesheet" href="/styles/app.css">@layer reset, base, components, utilities;El orden físico y las layers deben contar una historia coherente.
¿Por qué un reset puede empeorar accesibilidad aunque elimine diferencias visuales?
Porque puede borrar foco, marcadores, tamaños o estados útiles sin reconstruir una alternativa equivalente.
La cascada ordena todas las declaraciones que compiten.