Aplicar un full d'estil al document HTML

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.

CSS en línia

Mitjançant l'atribut style es poden aplicar regles d'estil directament a un element del document HTML:

<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.

CSS dins de l'element <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>Curs D227</title>
	<style type="text/css">
	body {
		width: 960px;
                margin: 0 auto;
 
	}
	</style>
</head>

Aquest sistema presenta un clar inconvenient i què é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.

CSS externs

Aquest mètode posa clarament en pràctica la teoria de la separació entre contingut i presentació: es tracta de treballar amb dos arxius, un arxiu HTML, 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 HTML:

<!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 d227</title>
	<link rel="stylesheet" type="text/css" href="d227.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ó.

Ús de @import

De 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 HTML:

<!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 d227</title>
	<style type="text/css">
		@import "d227.css";
	</style>
</head>

Quina diferència hi ha entre l'ús de @import i link? Si bé no hi ha cap diferència substancial de comportament -les dos incorporen el full d'estil a l'estructura HTML-, el mètode @import no està suportat per versions antigues de navegadors com Netscape o Internet Explorer 4, 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 />

Quin mètode es farà servir durant el curs?
En la realització tant de les pràctiques com del projecte del curs es demanarà l'ús d'un CSS extern mitjançant l'etiqueta <link />