Vuitena sessió del curs de creació web a la Casa Orlandai 1T2010

En aquesta sessió hem introduit la tecnologia del CSS i hem vist les bases del seu funcionament.

El llenguatge HTML ens serveix principalment per estructurar el contingut de les pàgines web. Estructurar el contingut significa ubicar cada fragment de contingut (paràgrafs, imatges, separadors, caixes contenidores) al lloc que li pertoca, i enunciar les funcions que tindrà.

Així, com que l'HTML és una eina pensada per estructurar el contingut, si no utilitzem cap altre llenguatge no tenim gaires eines per donar-li l'aparença visual que voldríem.

Antigament (fa una quinzena d'anys) no existia el CSS, o tot just despuntava, i les versions d'HTML vigents en aquell moment sí que tenien, entre els seus elements, molts atributs disponibles orientats a poder escollir, el color, la posició i altres paràmetres visuals dels continguts que es mostraven a la web.

L'ús d'aquests nombrosos atributs i la sintaxi molt flexible que permetien, però, és una altra mostra de la poca estandarització del llenguatge HTML de què parlàvem a la classe anterior. Un mateix atribut podia tenir un valor de 0 o NO que significaven el mateix, però ningú sabia del cert quina era la manera correcta d'utilitzar-los. Potser llavors ni tan sols existia una forma suposada com a correcta.

Un altre problema que això presenta és que si estem treballant en el context d'un lloc web compost de diverses pàgines web, i totes aquestes pàgines comparteixen un mateix estil gràfic, quan vulguem canviar aquest estil ho haurem de fer manualment, pàgina per pàgina i element per element, segurament.

El CSS proposa solució a aquests dos problemes:

• Per una banda és un llenguatge estandaritzat, seguint una especificació molt concreta. El CSS s'ocupa només de l'aparença visual dels elements. No participa en la definició de la seva funció. D'aquesta manera podem separar clarament l'estructura o la funció (que es defineix mitjançant l'HTML) de la forma (que es defineix mitjançant CSS).
• Per altra banda, aquesta tendència a la independència de funció i forma facilita la creació d'estils per a la forma. Tots els continguts que volem que es mostrin d'una mateix manera els associem a un sol estil. D'aquesta manera, per canviar l'aparença d'un lloc web format de diverses pàgines web, en tenim prou canviant un sol cop els estils que hem assignat als continguts.

La sintaxi del CSS es basa sobretot en tres elements: selectors, propietats i valors.

• El selector és l'element que identifica un estil
• La propietat és una característica que volem que sigui controlada per aquell estil.
• El valor és una magnitud o un caràcter al qual igualem la propietat per modular el seu comportament.

Quan declarem un estil, quasi sempre utilitzem aquests tres elements. Ja veurem després que només en alguns casos no utilitzem el selector, quan la definició de l'estil es troba com a valor de l'atribut HTML style. Una definició d'estil té aproximadament aquesta forma:

  .EstilQueMInvento {
      margin-left: 21px;
      display: inline;
      }

El CSS es pot aplicar a tres nivells diferents, de més a menys general, que tenen respectivament de menys a més prioritat. A què ens referim quan parlem d'un nivell general d'aplicació? Vegem-ho amb un exemple sobre el nivell d'aplicació més concret, menys general per tant.

Si utilitzo CSS per modificar l'aspecte de l'element p, podria fer-ho d'una manera semblant a aquesta:

  <p style="color: #00ff00; text-align: justify;">
       El text de l'element p
  </p>

En aquest cas estic utilitzant dues propietats i els seus valors CSS (color: #00ff00; text-align: justify;) per fer que el text dins l'element p es mostri de color verd i justificat per tots dos cantons. És en aquest cas que no utilitzo un selector, perquè associo propietats i valors directament a l'atribut style de l'element p. En aquesta situació la definició d'estils és la més propera físicament a l'elements al qual afecta, perquè està costat per costat en relació amb ell. És, per tant, l'aplicació en què el CSS té un caràcter menys general i més concret.

Un nivell intermig de concreció seria el següent. Dins de l'element (NO l'atribut!!!) style dins de head defineixo un estil:

  <head>
      <style type="text/css">
          p {color: #00ff00;
              text-align: justify;
              }
      </style>
  </head>

En aquest cas, el comportament de tots els elements p de la pàgina seria exactament el mateix que el que vèiem a l'exemple anterior: color verd i text justificat a banda i banda. Això, ho repeteixo, afectaria (en principi) tots els elements p de la pàgina. Però si volguessim canviar el color del text de verd a vermell (color: #ff0000;), només ho hauríem de fer un cop en la definió de l'estil dins l'element style dins l'element head, en lloc d'haver de modificar el valor dels atributs style de cada un dels elements p.

Parlem d'aquest cas com una aplicació mitjanament genèrica de CSS perquè, en aquell cas hipotètic que volguéssim canviar l'estil gràfic de tot un conjunt de pàgines, això tampoc ens serviria. Hauríem igualment d'anar pàgina per pàgina canviant les definicions d'estil per a cada una.

L'aplicació més genèrica de CSS consisteix a tenir un document de tipus CSS (és a dir: un document de text, com l'HTML, però amb extensió .css) que contingui totes les definicions d'estils. D'aquesta manera, només ens cal vincular d'alguna manera totes les pàgines que volem que quedin afectades per aquests estils. Si féssim algun canvi als estils d'aquest document CSS, automàticament totes les pàgines que hi estiguessin vinculades s'actualitzarien reflectint els canvis que haguéssim fet en la manera de mostrar-se els continguts.

Potser us preguntareu per quina raó hauríem d'utilitzar l'aplicació més concreta o la intermèdia del CSS existint la possibilitat de fer-lo actuar sobre la totalitat dels continguts. La resposta a la pregunta és que poden existir casos particulars en què vulguem que, per exemple, un element p es comporti de manera diferent a tots els altres elements p.

Els tres nivells d'aplicació del CSS tenen també una relació de jerarquia, de manera que si entren en conflicte, sempre quedi clar qui té prioritat en la definició d'un estil. Així, el nivell d'aplicació més concret és el que té més prioritat, i el nivell d'aplicació més genèric és el que en té menys.

En aquest supòsit,

<html>
	<head>
		<style type="text/css">
			p {
				color: red;
				}
		</style>
	</head>
	<body>
		<p style="color: blue">
			Text de l'element p
		</p>
	</body>
</html>

el text de l'element p seria de color blau, encara que dins l'element style haguem dit que el contingut de tots els elements p de la pàgina fos de color vermell. L'aplicació més concreta del CSS té prioritat sobre l'aplicació mitjanament concreta. Quelcom semblant passaria en el cas de l'aplicació més general de CSS.

Això ens permet gestionar amb facilitat una coherència visual que volem donar a les nostres pàgines amb la necessitat d'adaptar-nos a les necessitats de cada contingut en concret.

Més endavant veurem que encara hi ha més eines de CSS que ens permeten aprofundir en aquesta capacitat de control. De moment, però, la idea principal amb què ens hem de quedar d'aquesta sessió és:

• que el CSS ens permet separar el contingut de la manera com es mostra
• que el CSS té diversos nivells d'aplicació en relació a la proximitat física i conceptual respecte dels continguts als quals afecta, i que cada un té els seus avantatges i inconvenients.

• curs de CSS en català No és tant perquè sigui en català. És perquè és molt escrupulós i està molt ben explicat. De lectura obligatòria per qui vulgui saber què fa quan utilitza CSS.