Una hoja de estilo web es una forma de separación de contenido y presentación para diseño web en la que el marcado (es decir, HTML o XHTML ) de una página web contiene el contenido semántico y la estructura de la página, pero no define su diseño visual (estilo). En cambio, el estilo se define en un archivo de hoja de estilo externo utilizando un lenguaje de hoja de estilo como CSS o XSLT . Este enfoque de diseño se identifica como una "separación" porque reemplaza en gran medida la metodología anterior en la que el marcado de una página definía tanto el estilo como la estructura.
La filosofía que subyace a esta metodología es un caso específico de separación de preocupaciones .
La separación de estilo y contenido tiene ventajas, [1] [2] pero sólo se ha vuelto práctica después de mejoras en las implementaciones de CSS de los navegadores web populares .
En general, la experiencia de los usuarios en un sitio que utiliza hojas de estilo será generalmente más rápida que la de los sitios que no utilizan esta tecnología. 'En general' como primera página probablemente se cargará más lentamente, porque será necesario transferir la hoja de estilo Y el contenido. Las páginas siguientes se cargarán más rápido porque no será necesario descargar información de estilo: el archivo CSS ya estará en la memoria caché del navegador .
Mantener todos los estilos de presentación en un archivo puede reducir el tiempo de mantenimiento y reduce la posibilidad de error, mejorando así la coherencia de la presentación. Por ejemplo, el color de fuente asociado con un tipo de elemento de texto se puede especificar (y, por lo tanto, modificar fácilmente) en todo un sitio web simplemente cambiando una cadena corta de caracteres en un solo archivo. El enfoque alternativo, utilizar estilos integrados en cada página individual, requeriría una edición de cada archivo engorrosa, lenta y propensa a errores.
Los sitios que usan CSS con XHTML o HTML son más fáciles de modificar para que parezcan similares en diferentes navegadores (Chrome, Internet Explorer , Mozilla Firefox , Opera , Safari , etc.).
Los sitios que usan CSS " se degradan con gracia " en navegadores que no pueden mostrar contenido gráfico, como Lynx , o aquellos tan antiguos que no pueden usar CSS. Los navegadores ignoran el CSS que no comprenden, como las declaraciones de CSS 3. Esto permite que una amplia variedad de agentes de usuario puedan acceder al contenido de un sitio incluso si no pueden representar la hoja de estilo o no están diseñados teniendo en cuenta la capacidad gráfica. Por ejemplo, un navegador que utilice una pantalla braille actualizable para la salida podría ignorar por completo la información de diseño y el usuario seguiría teniendo acceso a todo el contenido de la página.
Si la información de diseño de una página se almacena externamente, un usuario puede decidir desactivar la información de diseño por completo, dejando el contenido desnudo del sitio aún en un formato legible. Los autores del sitio también pueden ofrecer múltiples hojas de estilo, que pueden usarse para cambiar completamente la apariencia del sitio sin alterar su contenido.
La mayoría de los navegadores web modernos también permiten al usuario definir su propia hoja de estilo, que puede incluir reglas que anulan las reglas de diseño del autor. Esto permite a los usuarios, por ejemplo, poner en negrita cada hipervínculo en cada página que visitan. Se han creado extensiones de navegador como Stylish y Stylus para facilitar la gestión de dichas hojas de estilo de usuario.
Debido a que el archivo semántico contiene sólo los significados que el autor pretende transmitir, el estilo de los diversos elementos del contenido del documento es muy consistente. Por ejemplo, los títulos, el texto resaltado, las listas y las expresiones matemáticas reciben propiedades de estilo aplicadas de forma coherente desde la hoja de estilos externa. Los autores no necesitan preocuparse por las propiedades de estilo en el momento de la composición. Estos detalles de presentación podrán diferirse hasta el momento de la presentación.
El aplazamiento de los detalles de presentación hasta el momento de la presentación significa que un documento puede reutilizarse fácilmente para un medio de presentación completamente diferente con simplemente la aplicación de una nueva hoja de estilo ya preparada para el nuevo medio y consistente con el vocabulario elemental o estructural del documento semántico. Un documento cuidadosamente elaborado para una página web se puede imprimir fácilmente en un volumen encuadernado con encabezados y pies de página, números de página y una tabla de contenido generada simplemente aplicando una nueva hoja de estilo.
Actualmente, las especificaciones (por ejemplo, XHTML, XSL, CSS) y las herramientas de software que implementan estas especificaciones apenas están alcanzando las primeras etapas de madurez. Por tanto, existen algunos problemas prácticos a los que se enfrentan los autores que intentan adoptar este método de separar contenido y estilo.
Si bien las especificaciones de estilo son bastante maduras y aún están madurando, las herramientas de software han tardado en adaptarse. La mayoría de las principales herramientas de desarrollo web todavía adoptan un modelo mixto de presentación y contenido. Por lo tanto, a los autores y diseñadores que buscan herramientas basadas en GUI para su trabajo les resulta difícil seguir el método de la web semántica. Además de las herramientas GUI, los repositorios compartidos para hojas de estilo generalizadas probablemente ayudarían a la adopción de estos métodos.