HTML té greus limitacions a l'hora d'aplicar el format a una pàgina. La seva estructura seqüencial obliga a formatar elements individuals, i no es poden tractar en bloc. Es va dissenyar en entorns científics i acadèmics, on importava molt el contingut i poc la forma.

Els fulls d'estils CSS han solucionat aquest problema, i aporten quelcom més:
- Podem aplicar format a un lloc, una pàgina, elements concrets o una única etiqueta.
- Permeten tenir maquetacions diferents per a la pantalla i la impressora.
- Tenen moltes més possibilitats i apliquen el format d'una manera més fina, més exacta.
Els navegadors entenen CSS a partir de la versió 4 (Internet Explorer, a partir de la 3, amb limitacions), però no tot ho entenen igual. Per això, s'han de manejar amb cura i reserves, o hi pot haver usuaris que no vegin el format ... o la pàgina.

En general, els navegadors actuals mostren; totes les propietats que definim als estils, si ho fem bé, respectarà l'herència al peu de la lletra. Netscape 4.7, en canvi, és tota una aventura, perquè no sabrem si alguna cosa funciona fins que no ho provem. Cal, doncs, fer moltes proves per tal d'assegurar que tothom veurà, més o menys bé, els nostres dissenys.

  Elements CSS en aquest capítol
font-family : estableix l'ordre de prioritats en l'ús de fonts per a un element.
color : color del text. Pot usar valors hexadecimals (#FFFFFF) o literals (white).
text-decoration: decoració del text: res, subratllat, intermitent, ...
font-size: mida de la lletra. Es pot especificar en diverses unitats.
width: defineix l'amplada que ocuparà un element.
background-color: especifica el color de fons.

  1.- Jerarquia
HTML i CSS són sistemes basats en una jerarquia. Això vol dir que uns elements en contenen uns altres que, al seu torn, en contenen d'altres. No és estrany, els sistemes jeràrquics són abundants, en aquest entorn, només cal que ens fixem en com s'estructura un lloc web, una xarxa o el nostre disc dur.

La jerarquia va de contenidor a contingut, de general a concret. L'element més alt de l'escala és el cos del document (body), i a partir d'aquí, van derivant els altres. Les característiques s'hereten. Això té molts avantatges, i algun inconvenient.

Triar una bona manera de definir els estils és important perquè pot condicionar les fases posteriors del disseny i, si prenem una decisió equivocada, podem hipotecar possibilitats que, d'una altra manera, tindríem a l'abast.

Si redefinim una etiqueta HTML, - per exemple "table", un contenidor en la part alta de la jerarquia -, ens veurem limitats per dues bandes: quan vulguem tenir una versió diferent d'aquest contenidor i quan intentem aplicar format als elements que conté.

La solució, normalment, passa per definir pocs estils i fer-ho de manera que als més generals els apliquem opcions generals. Per exemple podem definir la font al <body>, les mesures als estils personalitzats i aplicar colors directament amb HTML.

Amb la jerarquia comencen les incompatibilitats. Mentre Explorer i Mozilla la respecten fidelment, Netscape 4.7 no ho fa, o ho fa parcialment i en segons quines versions. No accepta, per exemple, la definició d'una font per al cos, de manera que l'haurem d'assignar a totes les classes, una per una.

Obrim la pàgina d'entrada ("index.htm" de la rel) amb el Dreamweaver i anem al menú "Texto - Estilos CSS - Editar hoja de estilos..." o, més ràpid, premem Control+Majús+E.

Definició d'un estilMarquem "Redefinir etiqueta HTML", "Sólo este documento" i seleccionem body. Li apliquem només el tipus de lletra i acceptem. A continuació redefinim l'etiqueta a (els enllaços). Aquí triem colors (lletra i/o fons) i decoració.

Passem als estils personalitzats, pocs. En aquest cas en farem quatre: .titol, .menu, .normal i .lnk. No utilitzem la paraula "link" perquè és reservada ni "enllaç" perquè té una "ç". En alguns sistemes podrien funcionar, en altres donarien problemes.

Què definim en aquests estils? Poc, bàsicament la mida de la lletra. També la font, si ha de ser diferent de la general definida per al cos. El nombre ideal de fonts és d'una o dues en tot el lloc web, tot i que, en alguns casos, se'n poden necessitar més.

Utilitzem les fonts que proporciona Dreamweaver, per exemple, Arial per a fonts grans i mitjanes i Verdana per a les petites. Establim les mesures en píxels: no més de 20 ni menys de 10, de manera que siguin llegibles sense arribar a molestar.

Evidentment, com s'ha dit abans, si volem que Netscape 4.7 mostri un estil personal amb una font determinada, li ho hem de dir, perquè no heretarà pas la que hem definit al body.
 
2.- Comportament dels enllaços
Hem redefinit els enllaços. Amb això n'hi hauria prou per a l'antic navegador de Netscape, però els navegadors actuals tenen més possibilitats, i les volem aprofitar. A més, potser ens interessa que algunes zones (per exemple, els menús) tinguin un aspecte o comportament diferents.

Dreamweaver no facilita la definició d'aspecte per als enllaços dels estils personalitzats, però tampoc ho prohibeix. Només cal saber com es fa.

El següent pas serà "Usar selector CSS". Triem a:hover i definim colors i/o decoració. Com que al pas anterior havíem redefinit els enllaços (a) en lloc d'usar el selector (a:link), ens hem estalviat dues definicions. Si ho volem, però, també podem definir els a:active i a:visited, tot i que no és imprescindible.

A l'hora de definir enllaços especials, tornem a "Usar selector CSS" i, en lloc de triar, escrivim .menu a per tal d'establir l'aspecte dels enllaços dels menús. Utilitzarem un petit truc que, com passa sovint, només funciona amb l'Explorer. Es tracta d'aconseguir que l'enllaç ocupi tota la cel·la. Per això, ens dirigim a la secció "Cuadro" i establim un "Ancho" del 100%.

Finalment, definim .menu a:hover i li assignem colors de lletra i fons que contrastin amb l'estat normal dels menús. Tindrem un aspecte similar als menús de Windows.

Un cop acabada la definició d'estils, els revisem des de la "Vista de código" per entendre com ho ha fet el Dreamweaver i quina codificació ha utilitzat. Normalment, ho haurà situat a la secció <head> del document:

<style type="text/css">
<!--
body { font-family: Arial, Helvetica, sans-serif}
a { color: #003366; text-decoration: none}
a:hover { color: #990000}
.titol { font-size: 18px; font-family: Arial, Helvetica, sans-serif}
.menu { background-color: #CCDDEE; font-size: 12px; font-family: Arial, sans-serif}
.normal { font-size: 10px; font-family: Arial, Helvetica, sans-serif}
.lnk { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 12px}
.menu a { width: 100%}
.menu a:hover { color: #FFFFFF; background-color: #990000}
-->
</style>
 
3.- Aplicar estils a contenidors
Els estils s'apliquen a les etiquetes, als contenidors, com fèiem al format HTML (pràctica 1), de manera que haurem d'actuar igual. Treballarem, doncs, amb la barra d'estat.

Es tracta d'aplicar estils amb el mínim de passos possibles, i aconseguir que Dreamweaver no ens faci cap contenidor nou no desitjat. Utilitzarem la finestra d'estils CSS.

Podem, com s'ha vist en pràctiques anteriors, seleccionar grups de cel·les amb el ratolí o marcar directament les etiquetes a la barra d'estat. En qualsevol cas, les cel·les són els únics contenidors on aplicarem estils en aquesta pràctica.

Com que ja tenim la base suficient per treballar així, l'explicació d'aquesta tasca es queda intencionadament curta.

Activar la finestra d'estilsObrim la finestra d'estils. Marquem la zona on volem aplicar un estil i el seleccionem de la llista. Un cop hem establert els estils a tota la pàgina, tanquem la finestra i comprovem que funcionen amb tots dos navegadors.
 
4.- Estils segons el medi
L'etiqueta de definició d'estils permet altres modificadors que Dreamweaver no contempla. Un dels més interessants és aquell que ens permet establir un conjunt d'estils per a un medi específic. Es tracta del modificador media:

  <style type="text/css" media="screen"">

Com a valors, podem posar-hi: all (tots, predeterminat), screen (pantalla), print (impressora), tv (endevina-ho), projection (projector), handheld (ordinadors de butxaca), braille (dispositiu tàctil), aural (sintetitzador de veu), tty (teletip) ... En properes versions, la llista es pot ampliar.

Sovint, el disseny d'una pàgina és per ser visualitzat en pantalla, i resulta horrorosa quan s'imprimeix o, senzillament, no es veu. Imaginem una pàgina amb lletra blanca i amb una imatge fosca de fons. Quan s'intenta imprimir amb un navegador que té la impressió de fons desactivada, no es veu res. Una bona opció és preparar dos fulls d'estils en arxius independents i enllaçar-los a la capçalera del document:

  <link rel="stylesheet" href="pantalla.css" media="screen" type="text/css">
  <link rel="stylesheet" href=".impre.css" media="print" type="text/css">


Amb aquesta tècnica podem assegurar la presentació en pantalla i la impressió, de manera que es vegi perfectament en tots dos medis. De passada, si enllacem els mateixos arxius en totes les pàgines del nostre lloc (en aquest curs ho hem fet així), tindrem el manteniment més fàcil perquè, quan vulguem fer modificacions d'aspecte, només haurem de revisar dos arxius.