Entendiendo los 3 Tipos de Estilos de CSS

Entendiendo los 3 Tipos de Estilos de CSS

Entendiendo los 3 Tipos de Estilos de CSS

VALORACIÓN DEL ARTÍCULO:
5/5


El desarrollo de sitios web frontales a menudo se representa como un taburete de tres patas. Estas patas son las siguientes:

  • HTML para la estructura de un sitio;
  • CSS para los estilos visuales;
  • Javascript para comportamientos.

La segunda pata de este taburete, CSS u hojas de estilo en cascada, es lo que estamos viendo aquí hoy. Específicamente, queremos tratar los 3 tipos de estilos que puede añadir a un documento.

  1. Estilos en línea
  2. Estilos incrustados
  3. Estilos externos

Cada uno de estos tipos de estilos CSS tiene sus ventajas e inconvenientes, así que echemos un vistazo a cada uno de ellos individualmente.

Estilos en línea

Los estilos en línea son estilos que se escriben directamente en la etiqueta en el documento HTML. Los estilos en línea afectan sólo a la etiqueta específica a la que se aplican. Aquí hay un ejemplo de un estilo en línea aplicado a un enlace estándar, o ancla, etiqueta:

Esta regla CSS desactivaría la decoración estándar del texto de subrayado de este enlace. Sin embargo, no cambiará ningún otro enlace de la página. Esta es una de las limitaciones de los estilos en línea. Dado que sólo cambian en un elemento específico, necesitaría llenar su HTML con estos estilos para lograr un diseño de página real. Esa no es una buena práctica. De hecho, está a un paso de los días de las etiquetas "font" y de la mezcla de estructura y estilo en las páginas web.

Los estilos en línea también tienen una especificidad muy alta. Esto hace que sea muy difícil sobrescribirlos con otros estilos no en línea. Por ejemplo, si desea hacer que un sitio responda y cambiar la forma en que un elemento mira ciertos puntos de interrupción utilizando consultas de medios, los estilos en línea en un elemento harán que esto sea muy difícil de hacer.

En última instancia, los estilos en línea son realmente apropiados sólo cuando se usan con moderación. De hecho, rara vez usamos estilos en línea en nuestras páginas web.

Estilos integrados

Los estilos incrustados son estilos que están incrustados en el encabezado del documento. Los estilos incrustados afectan sólo a las etiquetas de la página en la que están incrustados. Una vez más, este enfoque niega una de las fortalezas del FSC. Dado que cada página tendría estilos en el, si desea hacer un cambio en todo el sitio, como cambiar el color de los enlaces de rojo a verde, tendría que hacer este cambio en cada página, ya que cada página utiliza una hoja de estilo incrustada. Esto es mejor que los estilos en línea, pero sigue siendo problemático en muchos casos.

Hojas de estilo que se añaden a

de un documento también agrega una cantidad significativa de código de marcado a esa página, lo que también puede hacer que la página sea más difícil de manejar en el futuro.

La ventaja de las hojas de estilo incrustadas es que se cargan inmediatamente con la página en sí, en lugar de requerir que se carguen otros archivos externos. Esto puede ser una ventaja desde el punto de vista de la velocidad de descarga y el rendimiento.

Hojas de Estilo Externas

La mayoría de los sitios web de hoy en día utilizan hojas de estilo externas. Los estilos externos son estilos que se escriben en un documento separado y luego se adjuntan a varios documentos web. Las hojas de estilo externas pueden afectar a cualquier documento al que se adjuntan, lo que significa que si tiene un sitio web de 20 páginas donde cada página utiliza la misma hoja de estilo (normalmente es así como se hace), puede hacer un cambio visual en cada una de esas páginas simplemente editando esa hoja de estilo. Esto hace que la gestión a largo plazo de la obra sea mucho más fácil.

La desventaja de las hojas de estilo externas es que requieren páginas para recuperar y cargar estos archivos externos. No todas las páginas usarán todos los estilos de la hoja CSS, por lo que muchas páginas cargarán una página CSS mucho más grande de lo que realmente necesitan.

Si bien es cierto que hay un impacto en el rendimiento de los archivos CSS externos, sin duda se puede minimizar. Siendo realistas, los archivos CSS son sólo archivos de texto, por lo que generalmente no son muy grandes para empezar. Si todo su sitio utiliza 1 archivo CSS, también obtiene el beneficio de que ese documento se almacene en caché después de que se haya cargado inicialmente. Esto significa que podría haber un ligero golpe de rendimiento en la primera página de algunas visitas, pero las páginas siguientes utilizarán el archivo CSS en caché, por lo que cualquier golpe sería negado. Los archivos CSS externos son la forma en que construimos todas nuestras páginas web.

TAMBIÉN TE INTERESA

ThinkBook Plus Gen 6 Rollable

ThinkBook Plus Gen 6 Rollable: un portátil que no habíamos visto hasta ahora

El ThinkBook Plus Gen 6 Rollable podría ubicarse en una categoría que se llamara algo así como “Disrupciones”, ya que este portátil ofrece un cambio que hasta ahora no habíamos visto. Su innovación le ha valido uno de los galardones más importantes del mundo en cuestiones de diseño en 2025: es un reddot winner. Y

estafa suplantación del CEO

Suplantación del CEO: un ciberfraude que va a más en las empresas

Una factura falsa, un correo urgente y un remitente que parece ser el líder de una compañía. Así comienza una suplantación del CEO, uno de los ciberataques más sofisticados y efectivos que afectan actualmente a empresas de todo el mundo. Las hackers pueden acceder por diferentes vías con este tipo de ciberfraude, pero la ventana

Nuevos Chromebook Acer

Conoce los 7 nuevos Chromebook Acer, uno de ellos es una tableta desmontable

Nuevos Chromebook Acer llegan al mercado. La diferencia es que ahora estos pequeños grandes portátiles están dominados por la inteligencia artificial, lo cual les hace tener un punto más de interés además de la movilidad. Así que Acer, ahora en rebajas de verano hasta el 1 de agosto, sube el listón en este segmento de

Samsung Galaxy Z Fold7

El Galaxy Z Fold7 apunta a ser el plegable del año

La moda de los teléfonos plegables no ha terminado, ni mucho menos. Tras el Flip7, Samsung lo ha vuelto a hacer. La compañía surcoreana presenta el nuevo Galaxy Z Fold7, su dispositivo plegable más delgado, potente e inteligente hasta la fecha, diseñado para quienes buscan lo último en tecnología móvil sin renunciar a la versatilidad.

venta flash Huawei

Aprovecha la venta flash Huawei con descuentos de hasta el 50%

Días calientes para las compras de tecnología. Además del Amazon Prime Day 2025, también destacan las venta flash Huawei. La firma ha diseñado la que será la mayor campaña de ofertas del año desde el 8 al 31 de julio, con descuentos de hasta un 50% en una amplia gama de productos, y venta flash cada