Incluir hojas de estilo CSS fuera del tag head

Estamos acostumbrados a incluir nuestras hojas de estilos CSS en la etiqueta head (comportamiento habitual y correcto) pero en alguna circunstancias puede que nos haga falta definir hojas de estilos en otro lugares como por ejemplo dentro de la etiqueta body.

Gracias a un atributo de la etiqueta style llamado scoped es posible hacer esto.

El atributo scoped es un atributo booleano.

Cuando se incluye dentro de un contenedor “div”, estos estilos únicamente afectan a los elementos encapsulados en dicho contenedor (no afectan los estilos a nivel de página).

Sintaxis: style scoped

<style scoped>
 
</style>

Un ejemplo sería el siguiente:

<div>
   <style scoped>
      .pintaRojo {color:red;}
      .pintaAzul {color:blue;} 
   </style>
   <span class="pintaRojo">Primera frase.</span>
   <p class="pintaAzul ">Segunda frase.</p>
</div>

Iván Martínez

Ingeniero Informático apasionado por el mundo del desarrollo WEB. Me gusta caminar por este mundo lleno de tecnologías y día a día aprender cosas nuevas como el doctor Frankenstein ¡dadme cosas para experimentar!

Deja un comentario

Tu dirección de correo electrónico no será publicada.