Los sitios web son una combinación de estilo y estructura, y en la web actual, es una buena práctica mantener estos dos aspectos de un sitio separados el uno del otro.

HTML siempre ha sido lo que proporciona a un sitio su estructura. En los primeros días de la Web, HTML también contenía información de estilo. Elementos como la etiqueta estaban en todo el código HTML, añadiendo información de apariencia junto con información estructural. El movimiento de los estándares web nos empujó a cambiar esta práctica y a introducir toda la información de estilo en CSS u hojas de estilo en cascada. Llevando esto un paso más allá, las recomendaciones actuales son que usted utilice lo que se conoce como una «hoja de estilo externa» para sus necesidades de diseño de su sitio web.

Ventajas y desventajas de las hojas de estilo externas

Una de las mejores cosas de las Hojas de Estilo en Cascada es que puede utilizarlas para mantener la coherencia de todo su sitio. La forma más fácil de hacerlo es enlazar o importar una hoja de estilo externa. Si utiliza la misma hoja de estilo externa para cada página de su sitio, puede estar seguro de que todas las páginas tendrán el mismo estilo. También puede facilitar la realización de cambios para el futuro. Dado que todas las páginas utilizan la misma hoja de estilo externa, cualquier cambio en esa hoja afectará a todas las páginas del sitio. Esto es mucho mejor que tener que cambiar cada página individualmente!

Ventajas de las hojas de estilo externas

• Puede controlar el aspecto de varios documentos a la vez.
  • Esto es especialmente útil si usted trabaja con un equipo de personas para crear su sitio web. Muchas reglas de estilo pueden ser difíciles de recordar, y aunque tenga una guía de estilo impresa, es ineficaz y tedioso hojearla continuamente para determinar si el texto de ejemplo debe escribirse en letra Arial de 12 puntos, o como mensajero de 14 puntos. Al tener todo en un solo lugar, y puesto que ese lugar es también donde usted haría los cambios, puede hacer que el mantenimiento sea mucho más fácil.
• Puede crear clases de estilos que se pueden utilizar en muchos elementos HTML diferentes.
  • Si a menudo utiliza un estilo de fuente determinado para dar énfasis a varias cosas en su página, puede utilizar un atributo de clase que configure en su hoja de estilo para obtener este aspecto, en lugar de definir un estilo específico para cada instancia del énfasis.
• Puedes agrupar fácilmente tus estilos para que sean más eficientes.
  • Todos los métodos de agrupación disponibles para CSS se pueden utilizar en hojas de estilo externas, lo que le proporciona más control y flexibilidad en sus páginas.

Desventajas de las Hojas de Estilo Externas

• Las hojas de estilo externas pueden aumentar el tiempo de descarga, especialmente si son extremadamente grandes. Dado que el archivo CSS es un documento separado que debe ser cargado, afectará al rendimiento para realizar esa descarga.
• Las hojas de estilo externas se agrandan muy rápidamente, ya que es difícil saber cuándo un estilo ya no está en uso porque no se elimina cuando se elimina la página. La gestión adecuada de sus archivos CSS es importante, especialmente si hay varias personas trabajando en el mismo archivo.
• Si sólo tiene un sitio web de una sola página, puede que no sea necesario tener un archivo externo para CSS, ya que sólo tiene una página para estilizar. Muchos de los beneficios de las CSS externas se pierden cuando sólo se tiene un sitio de una página.

Cómo Crear una Hoja de Estilo Externa

Las hojas de estilo externas se crean con una sintaxis similar a la de las hojas de estilo a nivel de documento. Sin embargo, todo lo que necesita incluir es el selector y la declaración. Al igual que en una hoja de estilo a nivel de documento, la sintaxis de una regla es:

selector {propiedad : valor;}

>.

Guarde estas reglas en un archivo de texto con la extensión.css. Esto no es necesario, pero es un buen hábito para entrar, por lo que puede reconocer inmediatamente sus hojas de estilo en un listado de directorios.

Una vez que tenga un documento de hoja de estilo, deberá vincularlo a sus páginas Web. Esto se puede hacer de dos maneras:

1. Enlace
   1. Para enlazar una hoja de estilo, se utiliza la etiqueta HTML. Tiene los atributos rel , type , y href . El atributo rel indica lo que está enlazando (en este caso una hoja de estilo), el tipo define el tipo MIME-Type para el navegador, y el href es la ruta al archivo.css.
2. Importación
   1. Usaría una hoja de estilo importada dentro de una hoja de estilo a nivel de documento para poder importar los atributos de una hoja de estilo externa sin perder ningún documento específico. Se llama de forma similar a la llamada de una hoja de estilo enlazada, sólo que debe llamarse dentro de una declaración de estilo a nivel de documento. Puede importar tantas hojas de estilo externas como necesite para mantener su sitio Web.

Original de Jennifer Krynin. Editado por Jeremy Girard el 8/8/17