Para dar formato y estilo a un documento HTML se utiliza el lenguaje de hojas de estilo CSS. Con él se definen atributos como el diseño, los colores y las formas de los diferentes elementos HTML. CSS (Cascading Style Sheets) es un estándar que define cómo se presentan los datos en el navegador. Mientras que el HTML proporciona información sobre la estructura de un documento, el CSS indica el aspecto que debe tener: la fuente, el fondo, el texto, los colores de los links, los márgenes y la disposición de los objetos en la página. CSS (Hojas de Estilo en Cascada) es el lenguaje que desbloquea la magia visual de la web, permitiendo transformar estructuras HTML simples en sitios web hermosos y atractivos.
La Separación de Contenido y Estilo
Tal y como comentamos en el apartado de accesibilidad, las normas WCAG exigen que el contenido (información) y el formato (presentación) estén separados. Por ello, el editor HTML no permite aplicar directamente estilos (tamaño de letra, color, tipo de fuente) a nuestros contenidos, por lo que será necesario que todas las declaraciones de estilo y formato estén aparte en un archivo CSS. El objetivo principal del desarrollo de CSS es separar el contenido, ya sea escrito en HTML u otro lenguaje de marcado, del diseño de un documento. Esta separación puede aumentar la accesibilidad de los documentos, proporcionar mayor flexibilidad y control sobre su presentación, así como reducir la complejidad y la repetición de los contenidos estructurados. Además, CSS permite presentar el mismo documento en diferentes estilos o métodos de salida, como puede ser en una pantalla, una impresión, la lectura por voz, o cuando se emite mediante dispositivos que usan Braille.
Ventajas de Usar CSS
- CSS ahorra tiempo: Tras crear un estilo CSS para un elemento HTML, podrás utilizarlo con muchas páginas web.
- Las páginas se cargan más rápido: No necesitas repetir los atributos de estilo HTML todo el tiempo. Basta con crear una regla de estilo CSS para una etiqueta, y esta se utilizará en todo el documento HTML. Menos código significa una carga más rápida de la página.
- Cambiar el diseño de las páginas web es más fácil: Para hacer cambios globales, solo cambia el estilo, y se actualizarán automáticamente los elementos en todas las páginas web.
- Hay más margen para la creatividad y la participación del usuario: CSS tiene mucho más atributos de estilo que HTML, por lo que puedes usarlo para crear un diseño más llamativo que el HTML y atraer a un público más amplio.
- Es compatible con diferentes dispositivos: Las hojas de estilo te permiten optimizar la apariencia del contenido de la página para cualquier tipo de dispositivo. Utilizando el mismo documento HTML puedes ofrecer diferentes versiones del diseño del sitio web para varios dispositivos como PDA (asistente digital personal), smartphones, tabletas, etc.
- Las páginas pueden verse sin conexión: Las aplicaciones web pueden almacenar CSS mediante un caché offline, lo que te permite ver los sitios sin conexión. El caché también proporciona tiempos de carga más rápidos y un mejor rendimiento del sitio web.
- CSS es usado por los estándares web reconocidos: Hoy en día los atributos de estilo de HTML se consideran obsoletos, y se recomienda utilizar CSS. Es necesario empezar a usar CSS en todas las páginas web, para que sean compatibles con las futuras versiones de los navegadores.
Métodos para Declarar Estilos CSS en HTML
Cuando quieras incluir CSS en HTML, puedes hacerlo mediante hojas de estilo internas o externas. En esta guía exhaustiva, profundizaremos en cómo agregar CSS a su código HTML, abordando los tres métodos principales: en línea, interno y externo. Hay muchas maneras de enlazar hojas de estilo a HTML, cada una con sus ventajas y desventajas.
A continuación, se presenta una tabla comparativa de los tres métodos principales para declarar CSS en HTML:
| Característica | Estilos en Línea (Inline CSS) | Estilos Internos (Internal CSS) | Estilos Externos (External CSS) |
|---|---|---|---|
| Ubicación | Dentro del atributo style de un elemento HTML. | Dentro de la etiqueta <style> en la sección <head> del documento HTML. | En un archivo .css separado, vinculado con <link> en el <head> del HTML. |
| Aplicación | A un único elemento HTML concreto. | A todos los elementos del documento HTML que coincidan con las reglas. | A múltiples páginas web, e incluso a un sitio web completo. |
| Ventajas | Cambios rápidos y únicos en elementos individuales; control máximo sobre un elemento. | Útil para un único documento con un estilo específico; control sobre todos los elementos de una página. | Separa contenido y diseño; facilita el mantenimiento; ahorro de tiempo y carga más rápida; compatibilidad con dispositivos; optimización de diseño global. |
| Desventajas | Mezcla contenido y presentación; difícil de mantener; no escalable; pierde ventajas de CSS. | Solo afecta a un documento; no es escalable para sitios grandes. | Requiere un archivo adicional; puede haber conflictos si no se gestionan bien las rutas. |
| Uso Recomendado | Muy moderado, para ajustes muy específicos y únicos. | Cuando un único documento tiene un estilo particular y aislado. | Práctica estándar y más correcta para sitios web de cualquier tamaño. |
1. Estilos Externos (External CSS)
Se considera una buena práctica tener tus hojas de estilo CSS en un archivo externo. Una hoja de estilo externa es ideal cuando el estilo se aplica a muchas páginas. Con una hoja de estilo externo, un autor podría cambiar la apariencia de un sitio completo mediante el cambio de un solo archivo. Las hojas de estilo externas son la solución más conveniente cuando buscas diseñar bajo un estilo todo un sitio web. Este es el método más correcto. La vinculación a un archivo CSS externo es una parte importante de cualquier modelo de página HTML.
Lea también: IVA 21% Excel
El CSS externo implica crear un archivo .css separado y referenciarlo dentro del <head> de su HTML utilizando la etiqueta <link>. Para ello, guarda la hoja de estilo con la extensión .css y utiliza la etiqueta link para incluirla en tu archivo HTML. La etiqueta <LINK> se coloca en la cabecera HEAD del documento. El elemento link tiene muchos usos, y es importante especificar los atributos correctos para que puedas usarlo para importar una hoja de estilo CSS externa. Este método es, probablemente, la mejor forma de incluir CSS en HTML. Dado que una página web suele estar compuesta por varias secciones o documentos, resulta más práctico guardar las reglas de estilo en un archivo independiente. Esto permite una separación clara entre el contenido y el diseño, además de facilitar el mantenimiento.
Atributos Importantes de la Etiqueta <link>
- El atributo rel: Es uno de los atributos indispensables y se utiliza para indicarle al navegador cuál es la relación con el archivo importado. Escribirás rel="stylesheet" para decirle al navegador que está importando una hoja de estilo. El atributo REL se usa para definir la relación entre el archivo enlazado y el documento HTML. REL=StyleSheet especifica un estilo persistente o preferido mientras que REL="Alternate StyleSheet" define un estilo alterno. Un estilo persistente es aquel que siempre se aplica si están activas las hojas de estilo. Un estilo preferido es uno que se aplica automáticamente. Un estilo alterno se indica por REL="Alternate StyleSheet".
- El atributo href: Hace referencia al archivo CSS que se va a incluir. Una situación común es que el archivo CSS y el archivo HTML estén en la misma carpeta. En este caso, necesitarás escribir una ruta como "css/styles.css".
- El atributo type: Se usa para definir el tipo de contenido al que está enlazando. Para un archivo CSS, esto será text/css. El atributo opcional TYPE se usa para especificar un tipo de medio, permitiéndole a los navegadores omitir los tipos de hoja de estilo que no soportan. Sin embargo, dado que CSS es el único lenguaje de hoja de estilo que se utiliza en la web, no solo es opcional, sino que incluso es una buena práctica no incluirlo.
- El atributo media: Es un atributo opcional que puedes usar para especificar cuándo importar una determinada hoja de estilo. Su valor debe ser una media type / media query (tipo de medio / consulta de medios). Esto puede resultar útil en caso de que desees separar los estilos para diferentes dispositivos y tamaños de pantalla en diferentes archivos. La etiqueta <LINK> también toma un atributo opcional MEDIA, que especifica el medio o medios en que debería aplicarse la hoja de estilo. Por ejemplo, con la propiedad media="print" puedes indicar que la hoja de estilo se aplique solo en la vista de impresión.
Las hojas de estilo externas no deberían contener ninguna etiqueta HTML como <HEAD> o <STYLE>. La hoja de estilo solo debería consistir simplemente de reglas de estilo o sentencias. Cualquier página que contenga un vínculo de este tipo será estilizada para que coincida con los estilos del archivo sample.css. Ten en cuenta que la hoja de estilo puede quedarse físicamente en otro servidor web, y debes proporcionar una ruta a la misma en el href. Para su implementación, puedes crear un archivo CSS en local con las características de estilos que luego quieras usar. Después, subirlo a la carpeta "styles" de nuestro contenido: Desde opciones avanzadas (Parte superior derecha), css, nuevo, subir archivo. Como la hoja de estilos ya está disponible, utilizaremos en el HTML del contenido los estilos definidos en ella para dar formato.
2. Estilos Internos (Internal CSS)
En las hojas de estilo internas, las reglas CSS se encuentran directamente dentro del documento HTML. Esta variante se incluye el CSS en la parte superior del documento HTML, dentro del elemento head. La etiqueta <STYLE> se coloca en la cabecera HEAD del documento. La etiqueta style pasa así a formar parte de la sección head y las reglas se aplican a todo el archivo. El atributo requerido TYPE se usa para especificar un tipo de medio, así como su función con el elemento LINK. Debería usarse una hoja de estilo incrustada cuando un único documento tiene un único estilo. Los estilos internos son útiles cuando necesitas ajustar la visualización de algún elemento de una página o un sitio web pequeño.
3. Estilos en Línea (Inline CSS)
El CSS en línea implica agregar el atributo style directamente dentro de un elemento HTML. Los estilos en línea son más adecuados para cambios rápidos y únicos en elementos individuales. Las propiedades definidas se aplican únicamente a un elemento HTML concreto, lo que permite utilizar diferentes estilos dentro del mismo documento HTML. El atributo STYLE puede ser aplicado a cualquier elemento BODY (incluyendo el mismo BODY) excepto para BASEFONT, PARAM y SCRIPT. El atributo toma como su valor, cualquier número de declaraciones CSS, donde cada declaración está separada por un punto y coma.
Sin embargo, al utilizar este tipo de inclusión, es importante tener en cuenta que se pierden muchas de las ventajas que ofrece CSS. Entre ellas, la posibilidad de definir una regla general que se aplique, por ejemplo, a todos los elementos h1 del documento HTML. Los estilos en línea pierden muchas de las ventajas de las hojas de estilo al mezclar contenido con presentación. Así mismo, los estilos en línea se aplican implícitamente a todos los medios, ya que no hay un mecanismo para especificar el medio deseado para un estilo en línea. Este método debería usarse con moderación, como cuando se aplica un estilo en todos los medios para una sola ocurrencia de un elemento. Las desventajas son que desordena el HTML, es difícil de mantener y no es escalable para sitios web grandes.
Lea también: Guía IVA reducido
Sintaxis Básica de CSS
Los documentos CSS son archivos de texto (igual que los documentos HTML), sólo que en este caso tienen extensión .css en lugar de .html. En el código de un documento .css se escriben una serie de órdenes y el cliente (navegador) las interpreta y aplica a los documentos HTML. CSS tiene una sintaxis relativamente sencilla.
Primero especifica un selector; este selecciona un elemento concreto de la página (una etiqueta HTML, clase o identidad). Después de poner corchetes, especifica la declaración: las propiedades con sus valores, separadas por dos puntos. Las declaraciones en sí están separadas por un punto y coma. Un selector en CSS es una estructura que permite seleccionar elementos individuales o similares en una página para atribuirles un estilo. Por ejemplo, si se pone my-class en calidad de selector, todos los elementos con esta clase tendrán el mismo color de fondo, gris #999.
Cada una de estas reglas se terminará con el carácter punto y coma (;), seguido de la siguiente regla. El último punto y coma es opcional y se puede omitir si se desea. Se pueden incluir comentarios entre los caracteres /* y */, los cuales serán ignorados por el navegador. Estos suelen servir para añadir notas o aclaraciones dirigidas a humanos.
Los documentos CSS se forman por cientos de reglas de este estilo, con diferentes selectores, propiedades y valores. Habitualmente, cada bloque declarado suele incluir múltiples reglas y no sólo una.
Buenas Prácticas al Escribir Código CSS
Ten en cuenta que, a medida que escribimos código CSS, este se va haciendo más grande y más difícil de controlar y mantener. Para intentar evitar perder el control del mismo, hay que seguir una serie de buenas prácticas al escribir código, que aunque no son necesarias para que funcione en el navegador, los desarrolladores consideramos obligatorias para que sea más fácil de leer:
Lea también: ¿Cómo localizar tus XML del SAT?
- Escribe una regla por línea. Será mucho más fácil de leer y modificar.
- Usa la indentación. Tras escribir el carácter { al empezar un bloque de reglas, las propiedades se separan hacia la derecha. Esto hace que sea más fácil de leer y se considera una buena práctica de desarrollo y de programación en general.
- El último punto y coma de un bloque de reglas es opcional. Sin embargo, se suele aconsejar escribirlo para mantener una coherencia y evitar problemas o descuidos al modificar posteriormente el código.
Como puedes ver, estos consejos mejoran sustancialmente la legibilidad del código. Se consideran prácticas de cumplimiento obligatorio para ayudar a entender más rápidamente el código ajeno (o incluso el nuestro) sin necesidad de invertir mucho tiempo.
La Cascada y la Especificidad de CSS
CSS, como su nombre indica, funciona de manera cascada. Esto significa que múltiples estilos pueden aplicarse al mismo elemento, y el navegador determina la apariencia final basándose en una jerarquía. Los estilos se organizan en un solo esquema mediante una cascada. Por ejemplo, siguiendo el modelo, si al elemento p se le asigna el color rojo, y antes se había declarado verde, este último no se tomará en cuenta. Para evitar conflictos, siempre se usarán los valores de los parámetros que se declaren últimos.
Los diferentes selectores tienen diferentes prioridades. Su orden de relevancia es: Selector de tipo de elemento (p), Selector de clase (.important), Selector ID (#intro). La prioridad 1 es de baja prioridad, mientras que la 3 es alta.
La jerarquía de prioridades funciona de la siguiente manera:
- Se da la máxima prioridad a las propiedades con !important al final de su declaración.
- Luego vienen los estilos inline, que se definen en el atributo style de la etiqueta.
- Aún más baja es la prioridad de los estilos especificados en la etiqueta style en el propio documento.
- Luego se encuentran los estilos adjuntos al documento como un archivo CSS externo mediante la etiqueta <link>.
Algunas propiedades CSS, como color y font-family, se heredan.
Selectores Avanzados y Nuevas Funciones de CSS
Dentro de estos métodos clásicos para incluir CSS en HTML, en los últimos años han surgido numerosas funciones nuevas que hacen que el diseño de páginas web sea aún más flexible. Con selectores modernos como :has(), es posible aplicar estilos a los elementos padre según las condiciones de sus elementos hijos, mientras que las consultas de contenedor permiten que cada componente se adapte al tamaño de su propio contenedor, independientemente del ancho de la ventana. Se trata de un selector padre que permite aplicar estilos predefinidos bajo ciertas condiciones.
De este modo, cada módulo o componente puede adaptarse individualmente en función del espacio disponible dentro de su elemento padre. Esto hace posible un diseño web responsivo modular y realmente flexible, que no depende del ancho de la ventana. Esto hace que el código sea más claro y fácil de mantener, ya que los estilos relacionados se agrupan en un mismo bloque en lugar de repetir largas cadenas de selectores una y otra vez.
Gracias a las nuevas funciones de CSS, como color-mix() o light-dark(), es posible mezclar colores directamente en la hoja de estilos o seleccionar automáticamente variantes según el nivel de luminosidad. De esta forma, CSS se vuelve más flexible, ya que los colores dejan de ser elementos estáticos y pueden calcularse y ajustarse dinámicamente.
Scroll Snap es una función de CSS que permite hacer que los elementos se ajusten automáticamente a posiciones específicas al desplazarse por la página. Esto ofrece una navegación más fluida y agradable para el usuario.
Clases, IDs y Elementos Estructurales para el Estilo
El atributo CLASS se usa para especificar la clase de estilo a la cual pertenece el elemento. Una buena práctica es llamar a las clases de acuerdo a su función y no por su apariencia. Las clases pueden ser un método muy eficaz para aplicar diferentes estilos a secciones estructuralmente idénticas de un documento HTML.
El atributo ID se usa para definir un estilo único para un elemento. Cada atributo ID debe tener un valor único a través del documento. El uso de ID es apropiado cuando una hoja de estilo solo necesita ser aplicada una vez en algún documento.
El elemento SPAN fue introducido en HTML para permitir a los autores dar un estilo que no pudiera estar conectado a un elemento estructural HTML. SPAN es un elemento en línea, así que puede usarse simplemente como un elemento, tal como EM y STRONG en HTML. La gran diferencia es que mientras EM y STRONG conllevan significado estructural, SPAN no tiene tal significado.
El elemento DIV es similar al elemento SPAN en función, con la gran diferencia que DIV (abreviatura para "división") es un elemento de nivel bloque. DIV puede contener párrafos, encabezados, tablas, y aun otras divisiones. Esto hace ideal a DIV para hacer diferentes clases de contenedores, como capítulo, resumen o nota.
Consideraciones Adicionales
En el mundo actual de múltiples dispositivos, hacer que su sitio web se vea excelente en computadoras de escritorio, tabletas y teléfonos es innegociable. Las Consultas de Medios, la columna vertebral de la capacidad de respuesta, le permiten aplicar diferentes reglas CSS basadas en el tamaño de la pantalla, la orientación y otras características del dispositivo.
Es importante considerar los estilos en conflicto, para asegurar que la cascada y la especificidad estén funcionando según lo previsto. Ante incompatibilidades entre navegadores, es crucial probar su sitio web en diferentes navegadores. Utilice un validador de CSS para asegurarse de que su código cumpla con los estándares CSS.
Algunos gestores de portales ofrecen facilidades para la declaración de estilos. Por ejemplo, crear el estilo usando las CSS del gestor de portales es el método más rápido, pero el estilo estará entonces asociado al portal, por lo que no se mostrará en el contenido si este se visualiza en otro portal. En los portales Euskadi.eus, Gobierno Vasco y todos los portales departamentales se cargan una serie de estilos comunes definidos por el Servicio Web, y que se pueden usar mediante la propiedad "class" en todas las páginas, aplicaciones y contenidos. Asimismo, toda la red de portales carga por defecto los estilos del sistema "Bootstrap".