CSS respon a l'acrònim Cascade Style Sheets, és a dir, fulls d'estil en cascada. CSS és un llenguatge orientat a definir l'estil dels documents web.
Hi ha diferents motius per utilitzar CSS en la creació dels documents web:
La presentació no es limita només a la pantalla de l'ordinador. Mitjançant els CSS es pot definir la impressió del document, la presentació visual en dispositius mòbils o la pronuncia del document a través de dispositius de lectura.
Però, como es va veure al mòdul 1, no tots els navegadors interpreten correctament la totalitat de la gramàtica CSS, fet que pot portar a la situació de que un pàgina web presentada mitjançant CSS es vegi de manera diferent segons el navegador utilitzat. No us deixeu desanimar, però, per aquesta falta d'acord per seguir les especificacions dels CSS, especialment la versió 2, per part dels navegadors, i penseu en el benefici del seu ús.
De la mateixa manera que l'HTML i l'XHTML, el llenguatge CSS ha anat evolucionant a través de diferents versions segons les directrius del W3C: la CSS 1, la CSS 2, la CSS 2.1 i la darrera, encara en desenvolupament, la CSS 3. Aquest curs seguirà les especificacions de la versió CSS 2.1, que és una revisió, amb correcció d'errors i millores de la versió 2.
Podeu trobar el document oficial de les especificacions de la versió 2.1 al següent enllaç. També hi ha disponible una guia de referència ràpida en castellà a la següent adreça.
La sintaxi del CSS difereix completament de la sintaxi de l'XHTML. Enlloc d'un nombre d'etiquetes que estructuren la informació, en CSS es troba un conjunt de regles formades per selectors, propietats i valors. Aquestes regles determinen l'estil del document. El model que defineix una regla CSS sería:
SELECTORS {
PROPIETAT : VALOR;
}
El selector correspon al nom de l'element al que modifica la regla. La propietat indica la característica de l'element que quedarà determinada amb la regla. El valor sempre acompanya a la propietat, després dels dos punts (:). El conjunt format per la propietat i el seu valor es coneix com a expressió. Les expressions han d'anar tancades ente claus ({...}), i han d'acabar sempre amb un punt i coma (;). El conjunt format per selectors i expressions es coneix coma a regla.
Fixeu-vos en l'exemple següent:
h2 {
font-size: 12px;
}
El selector correspondria a h2, és a dir, aquesta regla modificarà l'estil de tots els elements h2 del document XHTML al que està associat la regla d'estil.
font-size representa una propietat que, acompanyada d'un valor, 12px, determinarà, en aquest cas, la mida de la font.
Una regla pot contenir diferents expressions:
h2 {
font-size: 12px;
font-family: monospace;
color: black;
background-color: white;
}
Diferents selectors poden compartir una mateixa regla:
h2, h3, h4 {
font-size: 12px;
font-family: monospace;
color: black;
background-color: white;
}
Dins d'una mateixa regla, els selectors han d'anar separats per comes (a l'exemple: h2, h3, h4).
En l'exemple que heu vist, tots els element h2, h3, h4 del document XHTML quedaran associats a la mateixa regla CSS.
A la pràctica següent veureu quins tipus de selectors són possibles i com queden associats als diferents elements del document XHTML.
Tot document CSS, igual que tot document XHTML, ha de ser vàlid. El W3C facilita la següent pàgina per validar els documents CSS:
De la mateixa manera que passava amb la validació d'un document XHTML, és important que un document CSS compleixi unes normes per ser vàlid. Aquestes normes són:
{...}). L'absència d'una sola d'aquestes claus provocaria inconsistències en el resultat i, per descomptat, l'arxiu no seria vàlid.;). L'absència d'un sol punt i coma provocaria la no validació de l'arxiu.Els comentaris en un arxiu CSS comencen amb l'expressió /* y acaben amb con */. Un exemple sería:
/* Comentari */
h1 {
font-size: 100%; /* Comentari */
}
/* Comentari */