A medida que proliferaban los contenidos a través de la web, los desarrolladores se fueron dando cuenta que HTML facilitaba enormemente la creación y distribución de contenido pero no ocurría lo mismo con la presentación. Por este motivo el W3C empezó a trabajar en el año 1996 en un lenguaje que permitiera separar de una forma sencilla y clara el contenido de la presentación. Este lenguaje para dar formato a los documentos HTML y XML fue denominado como Cascading Style Sheets (CSS), y rápidamente fue asumido como estándar, encontrándose en la actualidad en la versión 3, si bien la implementación de esta versión no es completa por el conjunto de navegadores existentes en el mercado.
Antes del desarrollo de CSS había dos manera de dar formato a los documentos escritos en HTML (Coremans 2015), el primero de ellos consistía, mediante el atributo style aplicar los diferentes estilos para cada uno de los elementos HTML, como por ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>Using the style attribute</title>
</head>
<body style="background:#dedbce;padding:10px">
<p style="font-family:sans;font-size:12px">Lorem ipsum <span style="color:red;border:1px solid green">dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
En el código anterior, mediante el atributo style,el cual hemos resaltado en negritra, se especifican aspectos como el color de fondo que tendrá el documento y la tipografía y el tamaño de la misma del párrafo <p> en cuestión o una sección de texto dentro de dicho párrafo<. La evidente desventaja de este método es que debemos marcar cada elemento de manera individual, lo cual puede resultar enormemente tedioso en cuanto un documento alcanza cierta complejidad.
Una forma más sencilla consistía en definir los estilos del documento en la cabecera del mismo, es decir, dentro de las etiquetas <head> </head>, mediante el empleo del elemento <style> (nótese que aquí style ya no es tratado como un atributo sino como un elemento). Dentro del elemento <style> se indica el elemento HTML, o selector, que como veremos a continuación, se le va a aplicar el estilo, la propiedad (color, margenes, tipografías, ...) y el valor de la propiedad (rojo para color, tamaño de la tipografía, ...). Un ejemplo de la sintaxis empleada es:
<!DOCTYPE html>
<html>
<head>
<title>Using the style element</title>
<style>
body {
background:#abbaca;
}
p {
font-size:14px;
}
#intro {
color:red;
font-style:italic;
}
.teal-with-border {
color:teal;
border:1px solid green;
}
.bold {
font-weight:bold;
color:cyan;
}
</style>
</head>
<body>
<p id="intro">Lorem ipsum <span class="teal-with-border"> dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<p>Lorem ipsum <span class="bold">dolor sit amet</span>, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>
La primera ventaja que podemos observar en este método es que nos permite definir el estilo de un determinado elemento una sola vez, aplicándose éste a todo el documento. Esto simplifica enormemente el formateo de un documento en HTML, pero como contrapartida tenemos que dicho estilo solo es aplicable al documento en cuestión, y que en documentos complejos suponía llenar la cabecera de código, convirtiéndolo en un documento pesado y engorroso desde el punto de vista del desarrollo.
Para paliar estos problemas derivados de los métodos que hemos visto anteriormente, es por lo que se desarrolló CSS. Mediante el lenguaje CSS, los estilos o formato son escritos independientemente del documento sobre el cual se esté trabajando, vinculándose dichos estilos al documento, o documentos, mediante un elemento vació, <link>.
<!DOCTYPE html>
<html>
<head>
<title>Como enlazar un documento CSS</title>
<link rel="stylesheet" type="text/css" href="https://documentacionhoy.com/style.css">
</head>
<body>
<p id="intro"> Lorem ipsum <span class="teal-with-border">dolor sit amet</span>, consectetur adipiscing elit,sed do eiusmod...</p>
</body>
</html>
En el código anterior podemos ver como hemos creado un documento en HTML y sólo nos hemos preocupado de definir el contenido, marcando para ello cada elemento que lo conforma y empleando dos atributos que cobran una especial relevancia a la hora de aplicar diferentes estilos mediante CSS, id para identificar unívocamente a un determinado elemento, y class para establecer un conjunto de elementos que compartirán los mismo estilos. Por su parte la hoja de estilos creada para ese documento, o documentos, llamada style.css, se vincula a dicho documento, o documentos, como ya hemos señalado, mediante el elemento vacío <link rel="stylesheet" type="text/css" href="https://documentacionhoy.com/style.css"> cargando el navegador los estilos definidos en style.css en cada documento que hayamos vinculado previamente. La hoja de estilos CSS será, por ejemplo:
body {
background:#abbaca;
}
p {
font-size:14px;
}
#intro {
color:red;
font-style:italic;
}
.teal-with-border {
color:teal;
border:1px solid green;
}
.bold {
font-weight:bold;
color:cyan;
}
La sintaxis básica en CSS es sencilla, estando formada por dos partes (Musciano y Kennedy 2002): el selector, consistente el elemento HTML o XHTML sobre el que se aplicará el estilo, seguido por una lista de propiedades y valores separados por un punto y coma, todas ellas entre corchetes, de la siguiente forma:
selector {propiedad1:valor1; propiedad2:valor1 valor2 valor3; ...}
Cada propiedad define un aspecto del elemento, por ejemplo el color del texto, y el valor la medida del mismo. En el ejemplo siguiente se explicita que para el elemento HTML <h1>, el color del texto será verde:
h1 {color: green}
Y como dice Musciano y Kennedy (2002), “limpio y ordenado”. Los selectores pueden ser directamente elementos HTML o atributos id o class como hemos comentado anteriormente. Si queremos aplicar un estilo a un elemento que hayamos marcado con un id=”intro” (el atributo id identifica unívocamente a un determinado elemento, por lo cual no puede haber dos elementos con el mismo id), en nuestra hoja de estilos lo señalaremos como:
#intro {
color:red;
font-style:italic;
}
Si lo que queremos es aplicar estilo a una serie de elementos que previamente hayamos definido con el atributo class=”bold” (class identifica un conjunto de elementos), en nuestra hoja de estilos lo señalaremos como:
.bold {
font-weight:bold;
color:cyan;
}
Además de permitirnos seleccionar los elementos HTML, o conjunto de elementos con los atributos id o class, CSS nos permite seleccionar aspectos de los distintos elementos que no tienen una etiqueta establecida en HTML, lo que es denominado como “pseudoelementos” o “pseudoselectores”. Algunos de estos pseudoelementos que forman parte desde las primeras versiones de CSS son :hover, :focus,:active o :visited para aplicar estilos a un enlace en función de si el cursor se encuentra sobre el enlace, si dicho enlace se encuentra activo en el caso de menús, etc. En el siguiente ejemplo establecemos que cada vez que pasemos el cursor sobre un enlace, el texto del link aparecerá subrayado:
a:hover {text-decoration: underline}
A partir de la versión 2 de CSS se introdujeron nuevos pseudoelementos, como son :first-line(selecciona la primera línea de un elemento), :first-letter (selecciona la primera letra de un elemento), :before (utilizado en combinación con la propiedad content, inserta contenido antes del elemento) y :after (utilizado con la propiedad content, inserta contenido después del elemento. En el siguiente ejemplo estableceremos el tamaño de la primera letra que tendrán todos los encabezados de tipo h1 e insertaremos un contenidos establecido antes y después de dicho elemento:
h1:first-letter { font-size: 32px; }
h1:before { content: “Capitulo - “; }
h1:after { content: “.”; }
CSS establece también como se deben efectuar selecciónes mútiles (h1, h2, ...), selectores contextuales (olli ) que permiten seleccionar elementos que forman parte de otro elemento, selectores universales (*), hijos (ol > li), selectores adyacentes (h1 + h2), o atributos de selectores (div[aling=left]).
COREMANS, C., 2015. HTML: A Beginner’s Tutorial [en línea]. S.l.: Brainy Software. [Consulta: 23 enero 2017]. Disponible en: http://proquest.safaribooksonline.com/book/web-development/html/9781771970181.
MUSCIANO, C. y KENNEDY, B., 2002. HTML & XHTML: The Definitive Guide [en línea]. 5th Edition. S.l.: O’Reilly Media. [Consulta: 30 enero 2017]. Disponible en: http://proquest.safaribooksonline.com/0-596-00382-X.
