Un cop examinades l'estructura i la sintaxis dels dos llenguatges, arriba el moment de veure com es pot associar un full d'estil CSS al document d'estructura XHTML.
Hi ha diferents maneres d'aplicar un full d'estil. Cadascuna d'elles té avantatges i inconvenients. L'elecció més adient vindrà donada per l'escenari o situació en que s'està treballant.
Mitjançant l'atribut style es poden aplicar regles d'estil directament a un element del document XHTML:
<p style="color: red; font-size: 20px;">Lorem Ipsum</p>
Aquest mètode, com s'ha vist a la pràctica anterior, sobreescriurà els valors de la resta de regles de nivell inferior degut al seu alt nivell de preferència en el llistat d'ordre de cascada (exceptuant aquelles propietats que van acompanyades de l'expressió !important). Per tant, amb aquest mètode, queda assegurat que la regla visual s'aplicarà sense reserves a l'element en qüestió.
El gran inconvenient d'aquesta pràctica és anar contra la pròpia filosofia dels CSS, que és la de separar la presentació del contingut. Treballant d'aquesta manera, s'està barrejant la presentació amb l'estructura del document, la qual cosa complica enormement el manteniment, l'actualització i l'edició del disseny de la pàgina web.
<style> en la capçalera del document Aquest mètode permet escriure totes les regles CSS en el document XHTML, però tancades a la capçalera del document i, per tant, separades de l'estructura i el contingut.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Introducció al XHTML i CSS</title>
<style type="text/css">
<![CDATA[
p {
color: green !important;
}
]]>
</style>
</head>
L'atribut type indica al navegador que el contingut respon al llenguatge CSS, i l'etiqueta <![CDATA[ ... ]]> conté en contingut del CSS. Això és necessari segons la clàusula 4.8 de les recomanacions del W3C sobre XHTML 1.
Hi ha, però, un primer problema, que és la invisibilitat de tot el contingut del CDATA per part de navegadors com el Firefox 2.0, la solució al qual passa per eliminar l'expressió <![CDATA[ ... ]]>.
Un altre inconvenient és el fet de no poder associar les regles del CSS a múltiples pàgines web. L'avantatge d'aquest mètode, però, se situa a nivell de desenvolupament i proves
Aquest mètode mostra clarament la teoria de la separació entre contingut i presentació: es tracta de treballar amb dos arxius, un arxiu XHTML, que defineix l'estructura del document i l'altre, CSS, associat al primer, que defineix la seva presentació.
Un CSS extern es pot associar de diferents maneres al document XHTML:
<link /> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Curs d27</title> <link rel="stylesheet" type="text/css" href="estil.css" /> </head>
L'atribut href de l'etiqueta <link /> tindrà com a valor la ubicació física de l'arxiu. Aquest valor podrà ser relatiu, és a dir, en relació a la ubicació del document que el crida, tal com es veu a l'exemple, o absolut, fent servir la URL del CSS.
Aquest mètode té el gran avantatge de que si el CSS està associat a múltiples documents web, només caldrà que sigui descarregat un cop, després es trobarà a la memòria cau (cache) del navegador, i es guanyarà velocitat en la descàrrega dels documents i en la navegació.
@importDe manera molt semblant al mètode anterior, la regla @import permet cridar un CSS extern. L'adreça de l'arxiu pot ser, igualment, relativa o absoluta respecte al document XHTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Curs d27</title> <style type="text/css"> <![CDATA[ @import "estil.css"; ]]> </style> </head>
Aquest mètode es beneficia de tots els avantatges del mètode <link /> amb la diferència que, versions antigues de navegadors com el Netscape o l'Internet Explorer, no suporten la regla @import, per la qual cosa, tot estil definit en @import serà ignorat. Aquesta subtil, però important característica, us permetrà definir aquells estils de las versions superiors o iguals a la 2 del CSS en el @import i deixar les regles d'estil del CSS 1 pel mètode anterior, <link />. Per tant, un exemple d'esquema óptim d'aplicació dels CSS sería la combinació dels dos darrers mètodes:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ca" lang="ca"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Curs d27</title> <link rel="stylesheet" type="text/css" href="navegadors_antics.css" /> <style type="text/css"> <![CDATA[ @import "navegadors_actual.css"; ]]> </style> </head>
En aquest esquema el full d'estil navegadors_antics.css inclouria regles relacionades amb els colors, mida de les fonts o tipus de fonts, elements que poden ser interpretats correctament pels navegadors més antics, i un altre full d'estil, navegadors_actual.css, recolliria totes aquelles regles CSS més actuals, com el posicionament, fons o meta-selectors.
Es faran servir diferents mètodes segons el moment del curs.
Per a la realització de les pràctiques dels diferents mòduls s'utilitzarà el mètode d'incloure el CSS en l'etiqueta <style>, ja que és l'adequat per a fer proves, experimentar i comprovar que tant el CSS com l'XHTML funcionen.
En la realització del projecte final, però, es demanarà l'ús d'un CSS extern, combinant el dos darrers mètodes que s'han explicat abans.