Com estructurar el CSS

Ara que tens una idea sobre què és el CSS i les bases de com fer-lo servir, és hora d’aprofundir una mica més en l’estructura pròpia del llenguatge. Ja hem vist molts dels conceptes que s'esmenten en aquest article; pots recapitular si t’entrebanques amb els conceptes que et trobes a partir d’ara.

Prerequisits: Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions de com funciona el CSS.
Objectiu: Aprendre amb detall les estructures de sintaxi fonamentals del CSS.

Aplicar CSS a l'HTML

El primer que analitzarem són els tres mètodes d’aplicació del CSS a un document.

Fulls d’estils externs

En l’article Primers passos amb el CSS hem enllaçat un full d’estil extern a la nostra pàgina. Aquest és el mètode més comú i útil d’adjuntar CSS a un document perquè pots enllaçar el CSS a diverses pàgines, cosa que et permet d’aplicar-hi estil a totes amb el mateix full d’estil. En la majoria dels casos, les diverses pàgines d’un lloc web presentaran un aspecte molt semblant i, per tant, pots utilitzar el mateix conjunt de regles per a la presentació bàsica.

Un full d’estil extern és quan el CSS està escrit en un fitxer independent amb l’extensió .css i s'hi fa referència des d’un element HTML <link>:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>El meu experiment amb CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>
    <h1>Hola món!</h1>
    <p>Aquest és el meu primer exemple amb CSS</p>
  </body>
</html>

El fitxer CSS podria presentar un aspecte així:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

L'atribut href de l'element <link> necessita fer referència a un fitxer del sistema de fitxers.

A l'exemple anterior, el fitxer CSS es troba a la mateixa carpeta que el document HTML, però el pots col·locar en un altre lloc i ajustar la ruta especificada per a adaptar-s’hi, per exemple:

<!-- Dins d’un subdirector anomenat styles dins del directori actual -->
<link rel="stylesheet" href="styles/style.css">

<!-- Dins d’un subdirector anomenat general, que es troba en un subdirector anomenat styles, dins del directori actual -->
<link rel="stylesheet" href="styles/general/style.css">

<!-- Puja un nivell de directori i, a continuació, a un subdirector anomenat styles -->
<link rel="stylesheet" href="../styles/style.css">

Fulls d’estil interns

Un full d’estil intern és on no hi ha cap fitxer CSS extern, sinó que el CSS se situa dins d’un element <style> que hi ha dins de l’HTML <head>.

Així doncs, l’HTML quedaria així:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>El meu experiment amb CSS</title>
    <style>
      h1 {
        color: blue;
        background-color: yellow;
        border: 1px solid black;
      }

      p {
        color: red;
      }
    </style>
  </head>
  <body>
    <h1>Hola món!</h1>
    <p>Aquest és el meu primer exemple amb CSS</p>
  </body>
</html>

Això pot ser útil en algunes circumstàncies (potser treballes amb un sistema de gestió de continguts en què no pots modificar els fitxers CSS directament), però no és tan eficient com els fulls d'estil externs; en un lloc web, el CSS s'hauria de canviar individualment a cada pàgina i actualitzar-se en diversos llocs si s’hi haguessin de fer canvis.

Estils en línia

Els estils en línia són declaracions CSS que afecten només un element, que està contingut dins d'un atribut style:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>El meu experiment amb CSS </title>
  </head>
  <body>
    <h1 style="color: blue;background-color: yellow;border: 1px solid black;">Hola món!</h1>
    <p style="color:red;">Aquest és el meu primer exemple amb CSS</p>
  </body>
</html>

Si et plau, no ho facis!, tret que realment ho hagis de fer. És molt dolent per al manteniment (potser hauràs d’actualitzar la mateixa informació diverses vegades per cada document) i també barreges la informació de presentació del CSS amb la informació d’estructuració de l’HTML, i dificultes la llegibilitat i comprensió del codi. Mantenir diferents tipus de codificació separats permet una feina molt més fàcil a tots aquells que treballen en el codi.

Hi ha llocs web en què els estils en línia són més comuns, o fins i tot recomanables. Pot ser que hagis de recórrer a utilitzar-los si el teu entorn de treball és molt restrictiu (potser el teu CMS només et permet editar el cos de l'HTML). També veuràs que s’utilitzen molt al correu electrònic per a obtenir compatibilitat amb tants clients de correu electrònic com sigui possible.

Jugar amb el CSS en aquest article

En aquest article hi ha molt de CSS. Per fer-ho, et recomanem que creïs un directori/carpeta al teu ordinador i, a dins, hi creïs una còpia dels dos fitxers següents:

index.html:

<!DOCTYPE html>
<html lang="ca">
  <head>
    <meta charset="utf-8">
    <title>El meu experiment amb CSS</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body> 

    <p>Crea el teu HTML de prova aquí</p>

  </body>
</html>

styles.css:

/* Crea el teu CSS de prova aquí */

p {
  color: red;
}

Aleshores, quan vulguis experimentar amb un CSS, substitueix el contingut del <body> de l’HTML per un altre HTML, i comença per afegir el codi CSS per a donar-hi estil dins del fitxer CSS.

Si no utilitzes un sistema amb què puguis crear fitxers fàcilment, pots utilitzar l'editor interactiu següent per experimentar.

Continua i diverteix-te!

Selectors

No es pot parlar de CSS sense parlar de selectors, i ja n'hem descobert diversos tipus al tutorial de Primers passos amb el CSS. Un selector és la manera amb què seleccionem alguna cosa del document HTML per a aplicar-hi estils. Si els teus estils no s’apliquen, és probable que el selector no coincideixi amb el que creus que hauria de coincidir.

Cada regla CSS comença amb un selector o una llista de selectors que indica al navegador a quin element o elements han d’aplicar-se les regles. Totes les mostres següents són exemples de selectors o llistes de selectors vàlids.

h1
a:link
.manythings
#onething
*
.box p
.box p:first-child
h1, h2, .intro

Prova de crear algunes regles CSS que utilitzin els selectors anteriors i algun codi HTML al qual aplicar-hi els estils. Si no saps què significa alguna de les sintaxis anterior, prova de buscar-la a MDN.

Nota: Aprendràs molt més sobre els selectors als nostres tutorials Selectors CSS, al mòdul següent.

Especificitat

Sovint hi haurà escenaris en què dos selectors podrien seleccionar el mateix element HTML. Considera el full d’estil següent, en què hi ha una regla amb un selector p que mostrarà els paràgrafs de color blau, i també una classe que mostrarà els elements seleccionats de color vermell.

.special {
  color: red;
}

p {
  color: blue;
}

Diguem que al document HTML hi ha un paràgraf amb una classe special. Totes dues regles es podrien aplicar; quina guanyaria? De quin color creus que es veurà el nostre paràgraf?

<p class="special">De quin color sóc?</p>

El llenguatge CSS té regles per a controlar quina regla guanyarà en cas de collisió; s'anomenen cascada i especificitat. Al bloc de codi següent hem definit dues regles per al selector p, però el paràgraf acaba sent de color blau. Això és perquè la declaració que hauria de fer que es veiés de color blau apareix més tard al full d’estil, i els estils posteriors anul·len els anteriors. És la cascada en acció.

p {
  color: red;
}

p {
  color: blue;
}

Tanmateix, en el cas del nostre exemple anterior, amb el selector de classes i el selector d’elements, la classe guanya, i el paràgraf es veu de color vermell, encara que apareix abans en el full d’estil. Es diu que una classe és més específica, o té més especificitat, que un selector d’elements, de manera que guanya.

Prova l'experiment anterior: afegeix el codi HTML al teu experiment i, a continuació, afegeix les dues regles p { ... } al teu full d'estil. A continuació, canvia el primer selector de p per .special i observa com canvia l’estil.

Les regles d’especificitat i cascada poden semblar una mica complicades al principi, però són més fàcils d’entendre a mesura que s'avança amb el CSS. A l'article Cascada i herència, al qual accediràs al mòdul següent, s'explica amb més detall, entre altres coses, la manera de calcular l’especificitat. Ara per ara, només has de recordar que existeix, i que és possible que de vegades el CSS no s'apliqui tal com esperes perquè alguna cosa del full d'estil té una especificitat més alta. Identificar que hi ha més d'una regla que pot aplicar-se a un element és el primer pas per a solucionar aquests problemes.

Propietats i valors

El CSS consta de dos blocs de construcció bàsics:

  • Propietats: Són identificadors que indiquen quines són les característiques d’estil (per exemple, font-size, width o background-color) que es volen canviar.
  • Valors: Cada propietat especificada rep un valor, que indica com vols canviar aquestes característiques d’estil (per exemple, quin tipus de lletra, l'amplada o el color de fons que vols).

En la imatge següent es ressalten una sola propietat i el seu valor. El nom de la propietat és color i el valor blue.

Una declaració del CSS ressaltada

Una propietat emparellada amb un valor s'anomena declaració CSS. Les declaracions CSS es posen dins dels blocs de declaració CSS. Aquesta imatge següent mostra el nostre CSS amb el bloc de declaracions ressaltat.

Un bloc de declaracions ressaltat

Finalment, els blocs de declaració CSS es combinen amb selectors per a produir conjunts de regles CSS (o regles CSS). La nostra imatge conté dues regles, una per al selector h1 i una altra per al selector p. La regla per a h1 està ressaltada.

La regla per a h1 està ressaltada

Definir propietats CSS amb valors específics és la funció principal del llenguatge CSS. El motor CSS calcula quines declaracions s’apliquen a cada element d’una pàgina per tal de definir-la i donar-hi l’estil adequat. És important recordar que tant les propietats com els valors distingeixen les majúscules de les minúscules. La propietat i el valor de cada parella estan separats per dos punts (:).

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

Important: Si una propietat és desconeguda o si un valor no és vàlid per a una propietat determinada, es considera que la declaració no és vàlida i el motor CSS del navegador la ignora completament.

Important: En CSS (i altres estàndards web) s'ha acceptat l'ortografia nord-americana com a estàndard per a resoldre la incertesa lingüística. Per exemple, la propietat color sempre s'ha d'escriure color. Si n’escrivim la versió britànica colour, no funcionarà.

Funcions

Si bé la majoria dels valors són paraules clau o valors numèrics relativament simples, hi ha alguns valors que prenen la forma d’una funció. Un exemple seria la funció calc(). Aquesta funció permet fer operacions matemàtiques senzilles des del CSS, per exemple:

<div class="outer"><div class="box">la caixa interior és de 90% - 30px.</div></div>
.outer {
  border: 5px solid black;
}

.box {
  padding: 10px;
  width: calc(90% - 30px);
  background-color: rebeccapurple;
  color: white;
}

Això es presenta així:

Una funció consisteix en el nom de la funció i, a continuació, uns claudàtors entre els quals es col·loquen els valors permesos per a aquesta funció. En el cas de l'exemple calc() anterior, volem que l'amplada d'aquesta caixa sigui el 90% de l'amplada del bloc que conté, menys 30 píxels. No és un valor que es pugui calcular d’antuvi i senzillament introduir-lo en el CSS corresponent, perquè no sabem quin serà aquest 90%. Com en tots els valors, en la pàgina corresponent de MDN hi ha exemples d’ús perquè puguis veure com funciona aquesta funció.

Un altre exemple serien els diversos valors de transform, com ara rotate().

<div class="box"></div>
.box {
  margin: 30px;
  width: 100px;
  height: 100px;
  background-color: rebeccapurple;
  transform: rotate(0.8turn)
}

La sortida del codi anterior és la següent:

Prova de cercar diferents valors de les propietats següents i escriu regles CSS que s’apliquin a diferents elements HTML:

@rules

Encara no hem trobat @rules (pronunciat «at-rules»). Són unes regles especials que proporcionen als altres elements instruccions sobre com comportar-se. Algunes @rules són senzilles i es formen només amb el nom de la regla i el valor. Per exemple, per a importar un full d’estil addicional al teu full d’estil CSS principal, pots utilitzar @import:

@import 'styles2.css';

Una de les @rules més comunes que trobaràs és @media, que et permet fer servir consultes a mèdies per a aplicar CSS només quan determinades condicions són certes (per exemple, quan la resolució de la pantalla està per sobre d’una quantitat determinada, o la pantalla és més ampla que una certa amplada).

Al CSS següent hi ha un full d’estil que dona a l’element <body> un color de fons rosat. Tot i això, després utilitzem @media per a crear una secció al nostre full d’estil que només s’aplicarà als navegadors amb una visualització més ampla de 30em. Si el navegador és més ample de 30em, el color de fons serà blau.

body {
  background-color: pink;
}

@media (min-width: 30em) {
  body {
    background-color: blue;
  }
}

Trobaràs altres @rules al llarg d’aquests tutorials.

Prova d’afegir una consulta a un mèdia al teu CSS que canviï els estils en funció de l’amplada de la visualització. Canvia l'amplada de la finestra del navegador per veure’n el resultat.

Propietats abreviades

Algunes propietats com font, background, padding, border i margin s’anomenen propietats abreviades: això és perquè permeten establir diversos valors de propietat en una sola línia, que estalvia temps i aconsegueix que el codi es vegi més net.

Per exemple, aquesta línia:

/* En les propietats abreviades de 4 valors, com l'àrea de farciment i el marge, s'apliquen els valors
   a la part superior, dreta, inferior, esquerra (en sentit horari des de la part superior). També hi ha altres 
   propietats abreviades, per exemple les propietats abreviades de 2 valors, que estableixen una àrea de farciment/marge
   a la part superior/inferior, a l'esquerra/a la dreta */
padding: 10px 15px 15px 5px;

Fa el mateix que totes aquestes juntes:

padding-top: 10px;
padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

Mentre que aquesta línia:

background: red url(bg-graphic.png) 10px 10px repeat-x fixed;

Fa el mateix que totes aquestes juntes:

background-color: red;
background-image: url(bg-graphic.png);
background-position: 10px 10px;
background-repeat: repeat-x;
background-scroll: fixed;

No intentarem ensenyar-les de manera exhaustiva ara; trobaràs molts exemples més endavant en el curs i et recomanem que cerquis més noms de propietats abreviades clau a les nostres referències CSS per a obtenir-ne més informació.

Prova d’afegir les declaracions anteriors al teu CSS per veure com afecta a l’estil del teu HTML. Prova d’experimentar amb valors diferents.

Atenció: Mentre que les propietats abreviades sovint et permeten ometre els valors, després restabliran els valors que no incloguis als seus valors inicials. D’aquesta manera es garanteix l’ús d’un conjunt de valors coherent. Però et pot confondre si esperes que la propietat abreviada només canviï els valors que has marcat.

Comentaris

De la mateixa manera que amb l’HTML, et convidem a posar comentaris al teu CSS per a ajudar-te a comprendre com funciona el teu codi en tornar-hi al cap d’uns mesos, i per a ajudar altres que treballin sobre aquest codi.

Els comentaris en CSS comencen amb /* i acaben amb */. Al bloc de codi següent hem utilitzat comentaris per marcar l'inici de diverses seccions de codi diferents. És útil per a ajudar-te a orientar-te pel codi a mesura que n’augmenta l’extensió. Cerca els comentaris al teu editor de codi.

/* Manejar una aplicació d’estil als elements bàsics */
/* -------------------------------------------------------------------------------------------- */
body {
  font: 1em/150% Helvetica, Arial, sans-serif; 
  padding: 1em; 
  margin: 0 auto; 
  max-width: 33em;
}

@media (min-width: 70em) {
  /* Posem en cas especial la mida del tipus de lletra general. En una pantalla gran o en una finestra,
     augmentem la mida de la lletra per a facilitar la lectura */
  body {
    font-size: 130%;
  }
}

h1 {font-size: 1.5em;}

/* Manejar elements específics que es troben al DOM */
/* -------------------------------------------------------------------------------------------- */
div p, #id:first-line {
  background-color: red; 
  border-radius: 3px;
}

div p {
  margin: 0; 
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Els comentaris també són útils per a inhabilitar temporalment algunes parts del codi amb finalitats de prova, per exemple, si intentes trobar quina part del teu codi causa un error. A l’exemple següent hem «comentat» (posat com a comentaris) les regles per al selector .special.

/*.special { 
  color: red; 
}*/

p { 
  color: blue; 
}

Afegeix alguns comentaris al teu CSS per acostumar-te a utilitzar-los.

Espais en blanc

Els espais en blanc són els espais, els sagnats de text i les línies noves. De la mateixa manera que en l’HTML, el navegador sol ignorar gran part dels espais en blanc del teu CSS. Hi ha una gran quantitat d’espais en blanc per a facilitar la llegibilitat.

En el primer exemple que trobaràs a continuació, cada declaració (i regla d’inici/final) és en una línia de text pròpia. Probablement és una bona manera d’escriure el CSS, perquè fa que sigui fàcil de mantenir i d'entendre:

body {
  font: 1em/150% Helvetica, Arial, sans-serif;
  padding: 1em;
  margin: 0 auto;
  max-width: 33em;
}

@media (min-width: 70em) {
  body {
    font-size: 130%;
  }
}

h1 {
  font-size: 1.5em;
}

div p,
#id:first-line {
  background-color: red;
  border-radius: 3px;
}

div p {
  margin: 0;
  padding: 1em;
}

div p + p {
  padding-top: 0;
}

Podries escriure exactament el mateix CSS de la manera següent, i eliminar-ne la majoria d’espais en blanc. Aquest codi és funcionalment idèntic al del primer exemple, però segur que estàs d’acord que és una mica més feixuc de llegir:

body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;}
@media (min-width: 70em) { body {font-size: 130%;} }

h1 {font-size: 1.5em;}

div p, #id:first-line {background-color: red; border-radius: 3px;}
div p {margin: 0; padding: 1em;}
div p + p {padding-top: 0;}

La disposició del codi que tries sol ser una preferència personal, tot i que quan comences a treballar en equip, és possible que trobis que l’equip té la seva guia d’estil pròpia que especifica una convenció acordada a seguir.

Has de tenir cura amb l’espai en blanc que hi ha d’haver entre una propietat del CSS i el seu valor.

Per exemple, les declaracions següents són vàlides en CSS:

margin: 0 auto;
padding-left: 10px;

Però les següents no són vàlids:

margin: 0auto;
padding-left: 10px;

0auto no es reconeix com a valor vàlid per a la propietat margin (0 i auto són dos valors separats), i el navegador no reconeix padding- com a propietat vàlida. Per tant, sempre t'has d'assegurar de separar valors diferenciats els uns dels altres com a mínim per un espai, però mantenir els noms de la propietat i els valors de propietat junts, com cadenes ininterrompudes.

Prova de jugar amb espais en blanc al teu CSS per veure què es trenca i què no.

Què segueix?

És útil entendre una mica com el navegador pren els teus codis HTML i CSS i els converteix en una pàgina web, així que en l’article següent, (Com funciona el CSS), donarem una ullada a aquest procés.

En aquest mòdul

  1. Què és el CSS
  2. Primers passos amb el CSS
  3. Com s'estructura el CSS
  4. Com funciona el CSS
  5. Aplica els teus nous coneixements