Els fulls d'estil en cascada, anomenats CSS, són un llenguatge dissenyat simplement per simplificar el procés de fer presentables les pàgines web.
CSS ens permet aplicar estils a les pàgines web, i, més importantment, ens permet fer això independentment de l'HTML que compon cada pàgina web. Descriu com hauria de ser una pàgina web: prescriu colors, tipus de lletra, espaiat i molt més. En resum, ens ajuda a fer que el nostre lloc web sembli el que vulguem, i permet als desenvolupadors i dissenyadors definir com es comporta, incloent com es col·loquen els elements al navegador.
Mentre que l'HTML utilitza etiquetes, CSS utilitza conjunts de regles. És fàcil d'aprendre i entendre, i proporciona un control potent sobre la presentació d'un document HTML.
fulls d'estil CSS
Una "regla" CSS sempre comença amb un selector que defineix a quins elements HTML s'aplica. En aquest cas, estem intentant estilitzar l'element <body>. Després del selector, tenim el "bloc de declaracions" entre claus { }. Qualsevol "propietat" que establim aquí afectarà al <body>.
enllaçar un full d'estil CSS
Si hem editat un full d'estil CSS sense tocar el codi HTML, i carreguem qualsevol de les pàgines HTML al navegador, no veurem l'acció del full. Això és perquè encara no l'hem enllaçat, i hem de tenir en compte que no hi ha connexió directa entre el navegador i el nostre full d'estil. Només a través de les etiquetes HTML el navegador pot trobar-lo (ja que el nucli de la web és l'HTML).
Per a això serveix l'element HTML <link/>, que li indica al navegador quin css han de carregar.
El mínim que hi ha d'haver al head d'un document HTML és això:
comentaris CSS
Els comentaris en CSS són una mica diferents dels d'HTML. En lloc de la sintaxi <!-- -->, CSS ignora tot entre els caràcters /* i */.
unitats de mesura
Hi ha moltes unitats disponibles, però les més habituals que trobareu són px (píxel) i em, que és molt útil per definir mides en relació amb algun tipus de lletra base.
Exemple:
selecció de diversos elements
Si volem afegir alguns estils bases (com el tipus de lletra, color, etc.) a tots els nostres encapçalaments, en comptes d'haver d'anar copiant i enganxant codi per cada tipus, CSS ens permet seleccionar diversos elements HTML a la mateixa regla separant-los amb comes.
Exemple:
la "cascada"
La part "en cascada" de CSS es deu al fet que les regles descendeixen en cascada de diverses fonts.
Això significa que s'ordena de menys a més precedència, el que significa que els estils definits en cada pas posterior anul·len els anteriors. Per exemple, els estils en línia sempre faran que el navegador ignori els seus estils predeterminats.
Hi ha diversos tipus de llocs on es pot definir CSS, i tots aquests están ordenats en l'anomenada jerarquia CSS:
El full d'estil predeterminat (default) del navegador
Fulls d'estil definits per l'usuari
Fulls d'estil externs (que són, amb diferència, el millor lloc per definir l'aspecte de la nostra web)
Estils específics de pàgina (s'apliquen al <head> de la pàgina, però el problema amb ells és que són díficils de mantenir)
Estils en línia (s'escriuen a l'atribut style d'un element HTML, i no són per res recomanables)