Definición de CSS (Hojas de Estilo)
Periodista esp. e investigador
El estilo en el que se presentan los textos y componentes de una página web, así como el conjunto de varias páginas, puede marcarse desde todas y cada una de forma independiente, o bien depender de un elemento externo (otro fichero en el que se definen estilos) que puede ser reutilizado. Dicho elemento externo es lo que se llama hoja de estilo CSS.
Una hoja de estilo CSS (cascading stylesheets, hojas de estilo en cascada) no es más que un fichero informático que contiene información para modelar el estilo visual que adoptan las páginas web al ser renderizadas por el navegador.
Para que ello sea así, deberá haber una llamada a la hoja de estilo CSS desde dentro del fichero HTML, mediante una instrucción.
Gracias a la separación del contenido de lo que es el aspecto, obtenemos una abstracción que nos permite varios ángulos de libertad.
El primero es que si queremos cambiar la estética de un sitio web completo, solamente deberemos retocar los ficheros de hoja de estilo CSS, de forma que si en las páginas HTML hay llamadas a dichos ficheros, se producirá el cambio estético de forma automática.
Otra ventaja es que el autor de los contenidos podrá centrarse en ellos sin tener que estar pendiente de su maquetación, ya que esta viene dada por los ficheros CSS.
La hoja de estilo está construida a partir de un lenguaje de diseño con una estructura determinada y estandarizada, de forma que la hoja de estilo es independiente de la tecnología que sirve la página web y de la que es utilizada para renderizarla.
Ello es así debido a la necesidad de la web de ser independiente de dispositivo, permitiendo que cualquier servidor sirva los mismos contenidos, y que estos sean renderizados con el mismo resultado final por cualquier navegador, independientemente de que unas herramientas puedan hacerlo más rápidamente que otras y, por lo tanto, ofrecer un mejor rendimiento al usuario.
El mismo lenguaje de definición puede ser empleado también en cualquier documento XML (al fin y al cabo, el HTML no deja de poder ser interpretado como un subconjunto de XML).
La estructura del lenguaje es simple, con una serie de palabras clave reservadas que se refieren a propiedades del estilo de una página, y varias reglas para cada una de estas propiedades.
Un ejemplo sencillo de hoja de estilo CSS sería el siguiente:
body {
h1 {font-family: Helvetica, Geneva, Arial,
SunSans-Regular, sans-serif }
}
En ella definimos, simplemente, como debe ser la cabecera H1 de los documentos HTML que redactemos y estén sujetos a esta hoja de estilo. Para ello, las páginas HTML deberán disponer de esta sentencia en la sección HEAD:
<link rel="stylesheet" href="hojaestilo.css">
En la que hojaestilo.css es el nombre del fichero que contiene las definiciones.
También podemos incluir las instrucciones de maquetación para el estilo en el mismo fichero HTML que utilizamos para la página, ahorrándonos así un fichero extra, pero entonces perdemos la versatilidad de cambiar el aspecto de todas las páginas teniendo solamente que manipular un fichero, ya que deberíamos modificar todos los HTML exactamente igual.
El lenguaje en el que son escritas las hojas de estilo CSS ya existía antes de su aprobación por parte del W3C, entidad que se encarga de regular a nivel técnico los estándares utilizados en la Web
Su aprobación se realizó a mediados de los años 90 y, desde entonces, se ha convertido en un estándar indispensable para su uso en grandes sitios web.
Foto: Fotolia – Stringer
Trabajo publicado en: Sep., 2017.
Escriba un comentario
Contribuya con su comentario para sumar valor, corregir o debatir el tema.Privacidad: a) sus datos no se compartirán con nadie; b) su email no será publicado; c) para evitar malos usos, todos los mensajes son moderados.