Saltar la navegación

1.5.5. Estilos en cascada (CSS)

Cuando diseñamos estilos tipográficos establecemos determinados parámetros de composición que pretendemos aplicar con coherencia en todo el sitio web del MDM. Pero en la práctica es muy difícil controlar que esos estilos se mantengan inalterables en todas las páginas de contenido. Para solucionar este inconveniente se utilizan estilos en cascada (CSS por la sigla en inglés de Cascading Style Sheets).

Leer con atención

El principio de funcionamiento de los estilos en cascada consiste en separar el diseño del contenido: por un lado tenemos el texto sin formato alguno y por otro, las especificaciones para ese tipo de texto.

Por ejemplo, este párrafo no tiene definido ningún atributo de diseño en esta página web, pero está identificado con el estilo “iDevice_inner” definido en un archivo CSS asociado. Ese archivo CSS especifica que para el estilo “iDevice_inner” se aplicarán una serie de características visuales y de formato tipográfico en todo el sitio web del MDM.

listado de estilos tipográficos usados en esta página
listado de estilos tipográficos para los títulos de este MDM.

Los estilos CSS permiten configurar los atributos del texto para que se perciban de un modo muy similar en todos los navegadores y plataformas.

Pueden existir varios archivos de estilos CSS asignados a una misma página, cada uno de ellos dedicado a una función determinada, o a diferentes dispositivos de reproducción.

Los estilos se pueden declarar dentro del documento HTML pero es aconsejable hacerlo desde un documento externo. Para ello se genera una hoja de estilos, y se la importa en cada una de las páginas web. Esto agiliza notablemente el proceso de configuración del texto en un sitio web porque si modificamos alguno de los atributos de un estilo, éste se actualizará automáticamente en todas las páginas que trabajen con la misma hoja de estilos, sin tener que corregirlos uno por uno.

También se pueden anidar estilos modificando particularmente los atributos de algunas palabras con un estilo distinto al que se aplica al resto del párrafo.

En la figura lateral podemos observar un listado de los estilos tipográficos correspondientes a los títulos del sitio web de este MDM y en la imagen siguiente se ve el detalle de las propiedades declaradas para algunos de esos estilos en el archivo CSS.

Atributos de estilo de texto declarados en un archivo CSS

Atributos de estilo de texto declarados en un archivo CSS