Què és i què significa CSS?

En el mòdul anterior heu après a crear un document HTML correctament estructurat i, per tant, vàlid i preparat per aplicar-hi un full d'estil. En aquest mòdul aprendreu a transformar l'aspecte visual del document HTML emprant els fulls d'estils en cascada o CSS. És una de les parts més complexes del disseny web -traduïr el disseny dels diferents elements del lloc web al llenguatge CSS. Trobareu que la part d'implementació no és gaire complicada. En certa manera resulta més difícil comprendre la lògica de funcionament dels CSS que qualsevol altra procés de treball del disseny web.

Aquesta problemàtica que arrossega l'aprenentatge del modus operandi dels CSS no és pas perquè sigui un llenguatge terriblement difícil d'aprendre. La dificultat ve per la implementació del CSS als diferents navegadors actuals. Encara que sembli una contradicció, Microsoft Internet Explorer i Mozilla Firefox no representen els llocs web de la mateixa manera, igualment us assegurem que Google Chrome i Apple Safari no mostren els llocs web igual que Microsoft Internet Explorer. És una qüestió de la que ja us hem parlat al llarg d'aquests curs, però que cobra la seva importància al parlar i estudiar dels fulls d'estils.

Definició de CSS

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:

  • Respectar el lema del W3C de separar l'estructura i la presentació del document, el que permet una excel·lent millora de l'accessibilitat dels documents web.
  • Frenar l'ús erroni d'elements HTML amb finalitats visuals i no estructurals, que degrada l'accessibilitat del document web, incrementa el pes de l'arxiu i complica el seu manteniment.
  • Tenir un control centralitzat del disseny, la qual cosa comporta una gran millora en el seu desenvolupament, edició i manteniment a llarg termini.

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.

Sintaxi del CSS

La sintaxi del CSS difereix completament de la sintaxi de l'XHTML. En lloc d'un nombre d'etiquetes que estructuren la informació, en els CSS es troben un conjunt de regles formades per selectors, propietats i valors. Aquestes regles determinen l'estil del document. El model que defineix una regla CSS és el següent:

 SELECTORS {  
     PROPIETAT : VALOR;  <-Declaració 1
     Propietat: Valor;   <-Declaració 2
     ...
     Propuetat: valor;  <- Declaració n
 }

és a dir, 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 entre 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.

Exploreu a continuació amb detall els elements que composen la sintaxi del CSS.

Selectors

Els selectors identifiquen un element general o particular del document HTML al qual se li aplicarà la regla d'estil.

Els selectors poden ser de quatre tipus:

  • selectors que fan referència als elements de l'estructura HTML
  • selectors que fan referencia a un valor d'un element id
  • selectors que fan referencia a un valor d'un element class
  • selector universal

Un selector que fa referència a un element HTML consisteix en l'etiqueta sense els símbols < i >. Veieu el següent exemple:

h2 {   
    color: #00ff00;  
}  

El selector h2 s'associa a l'etiqueta <h2>, és a dir, a totes les capçaleres de segon nivell del document HTML. Segons aquesta regla, totes les capçaleres de segon nivell del document apareixeran de color verd. Un altre exemple:

h1, p i body són exemples de selectors HTML.

Els selectors que fan referència a un ID del document HTML sempre comencen amb el símbol #. El següent exemple defineix l'amplada d'un element de la pàgina amb el valor ID de lateral.

#lateral {
     width: 261px;
}

#capcalera, #central, #peu són exemples de selectors ID.

Els selectors que fan referència a un class del document HTML sempre comencen amb el símbol .. El següent exemple defineix l'amplada d'un element de la pàgina amb el valor class d'article.

.article {
     width: 450px;
}

.container, .primer_bloc, .segon_bloc són exemples de selectors class.

Finalment, el selector universal engloba a tots els elements del document XHTML. Es representa amb el caràcter d'asterisc: *.

* {
	font-size: 13px;
	font-family: verdana;
}

En aquest exemple, tots els elements del document tindran una mida de la font de 13px i la font de lletra correspondrà a la família Verdana.

Declaracions: propietats i valors

La declaració defineix l'estil visual que s'aplicarà al selector i està representada per un o més propietats amb els corresponents valors. En una declaració, la propietat i el valor estan separat pel símbol :, i cada propietat-valor estan separats pel símbol ;. Per tant, és possible declarar diferents propietats per a un selector:

p {
  font-size: 12px;
  font-family: Arial, sans-serif;
  color:#3c3c3c ;
}

Aquest selector també el podeu escriure de la següent manera:

p { font-size: 12px; font-family: Arial, sans-serif; color:#3c3c3c ; }

Per què s'anomenen fulls d'estil en cascada

Una de les característiques més importants del CSS és el que es coneix com herència o ordre en cascada. El que significa treballar en cascada es pot entendre fàcilment a partir de l'exemple següent.

Imagineu-vos que voleu crear un document que tingui tota la tipografia de color gris, d'una mida de 12px, sobre un fons clar. Per aconseguir-ho haureu de definir la regla següent:

* {  
     color: #3333ff;  
     background-color: #eee;  
     font-size: 12px;  
 }  

Aquesta regla de selector universal afectarà a tots els elements del document. Però, poseu per cas, que no voleu que la capçalera del primer nivell tingui el mateix color que la resta d'elements, sinó que el que voleu és que sigui d'un altre color. Per això caldrà afegir una segona regla:

h1 {
   color: #111;
}

El navegador sobreescriurà el valor del color selector h1 sobre el selector universal, però el selector h1 heretarà la resta de propietats de la regla més general, i mostrarà, per tant, la mateixa mida i el mateix color de fons que la resta d'elements.

Es pot dir que les diferents regles competeixen entre elles segons un ordre de jerarquia o prioritat, de manera que, les propietats d'una regla d'un ordre superior, prevaldran sempre sobre les d'un ordre inferior.

Aquest ordre en cascada separa les regles en sis grups diferents segons el tipus de selector utilitzat. El llistat dels sis grups està ordenat de major a menor prioritat. En termes generals, tindran sempre preferència els tipus de selectors de més precisió davant dels selectors més generals.

Els sis grups en què queden agrupades les regles segons el tipus de selector utilitzat, ordenats de major a menor prioritat són els següents:

  1. Propietats que continguin l'expressió !important darrere del seu valor:
    h1 { color: red !important; } 
  2. Estils declarats en línia com a valor de l'atribut style de l'element HTML:
    <h1 style="color: red;">Lola Mento</h1>
  3. Regles definides per un o més selectors del tipo ID:
    #vermell { color: red; } 
  4. Regles definides per una o més classes:
    .vermell { color: red; }
  5. Regles que contenen un o més selectors HTML:
    h1 { color: red; } 
  6. Regles que contenen el selector universal:
    * {color: red; } 

Què passa quan es troben dues regles del mateix nivell i del mateix grup?
la prioritat vindrà donada per la seva ubicació. Una regla situada en una ubicació de prioritat alta s'imposarà sobre una altra d'ubicació de menys prioritat.