Cómo construir una hoja de estilo CSS interna

¿Qué son las hojas de estilo interno?

Las hojas de estilo internas son estilos que se colocan en el documento HTML. Estos estilos afectan solo al documento en el que están y no pueden ser referenciados por ningún otro documento web.

Ventajas de las hojas de estilo internas

Las hojas de estilo internas afectan solo a la página en la que están.
- Si está trabajando en un sitio grande y necesita probar los estilos antes de cargarlos en el sitio como un todo, las hojas de estilo internas pueden ser una gran herramienta. Le permiten probar los estilos en el contexto de todo el sitio sin romper ninguna página, excepto la que está probando.
Las hojas de estilo internas pueden usar clases e ID.
- A diferencia de los estilos en línea, las hojas de estilo internas aún pueden aprovechar las clases, los ID, los hermanos y otras relaciones de elementos.
Las hojas de estilo internas no requieren que subas múltiples archivos.
- Esto es especialmente útil cuando trabajas con cosas como correo electrónico o quioscos donde solo tienes un archivo HTML disponible para editar. A menudo utilizo estilos en línea cuando no estoy seguro de cuál sería la URL cargada en un CMS. Mantener los estilos en el documento significa que sé qué estilos afectan a ese documento.
Los estilos internos pueden tener mayor prioridad que las hojas de estilo externas.
- Esto se determina por el orden en que se cargan las hojas de estilo externas. El desarrollador web de la página tiene control sobre dónde se colocarán los estilos internos en el encabezado del documento. Si se colocan después del enlace a los estilos externos, tendrán una mayor prioridad en la cascada y anularán la hoja de estilos externa.

Desventajas de las hojas de estilo interno

Sólo afectan a la página en la que están.
- Si desea utilizar los mismos estilos en varios documentos, debe repetirlos para cada página (o un enlace a una hoja de estilos externa).
Las hojas de estilo internas aumentan los tiempos de carga de la página.
- Cada página que tiene una hoja de estilo interna debe cargar y analizar la información de la hoja de estilo cada vez que se carga la página. Los navegadores almacenan en caché las hojas de estilo externas, lo que mejora los tiempos de carga para cada página después de cargar la primera.