Text fonamental i estil de font

En aquest article t'iniciem en el viatge cap al domini de l'aplicació d’estil a text amb CSS. Aquí passarem amb detall per tots els fonaments bàsics de l'aplicació d’estil a textos / tipus de lletra, inclosos el gruix, la família i l'estil del tipus de lletra, les propietats abreviades per al tipus de lletra, l'alineació del text i altres efectes, i l’interlineat i l’interlletratge.

Requisits previs: Coneixements bàsics d'informàtica, fonaments bàsics d'HTML (consulta l’article Introducció a l’HTML), fonaments de CSS (consulta l’article Introducció al CSS).
Objectiu: Aprendre les propietats i tècniques bàsiques necessàries per a l'aplicació d’estil al text de les pàgines web.

Què implica l'aplicació d’estil al text en CSS?

Com ja deus conèixer d’haver treballat amb l’HTML i el CSS, el text dins d'un element es defineix dins de la caixa de contingut de l'element. Comença a la part superior esquerra de l'àrea de contingut (o a la part superior dreta, en el cas de contingut en idiomes RTL, o right-to-left, que s'escriuen de dreta a esquerra) i flueix cap al final de la línia. Quan arriba al final, passa a la línia següent i continua; i després, a la següent línia, fins que tot el contingut s'ha col·locat a la caixa. El contingut de text es comporta en efecte com un seguit d'elements en línia, es distribueix en línies adjacents entre si, i no crea salts de línia fins que s’ateny el final de la línia, o tret que s'obligui a un salt de línia manual de l'element <br>.

Nota: Si el paràgraf anterior et sembla confós, no t’hi amoïnis, torna enrere i fes un repàs de la teoria del model de caixa que s’explica en l’article El model de caixa abans de continuar.

Les propietats CSS que s'utilitzen per a escriure text generalment es divideixen en dues categories, que veurem per separat en aquest article:

  • Els estils dels tipus de lletra: són les propietats que afecten el tipus de lletra que es fa servir per al text, que afecta el tipus de lletra que s’empra, la mida, els formats de negreta, cursiva, etc.
  • Els estils de text en el disseny de pàgina: són les propietats que afecten l'espaiat i altres funcions de disseny de pàgina relacionades amb el text, que permeten la manipulació de, per exemple, l'espai entre línies i lletres, i la manera com s’alinea el text dins de la caixa de contingut.

Nota: Tingues en compte que les propietats que afecten el text dins d'un element hi actuen com una única entitat. No pots seleccionar i modificar l'estil de les subseccions de text si no les etiquetes amb un element apropiat (com ara <span> o <strong>) o utilitzes un pseudoelement específic per a text com ::first-letter (selecciona la primera lletra del text d'un element), ::first-line (selecciona la primera línia del text d'un element) o ::selection (selecciona el text que el cursor ressalta en aquell moment).

Tipus de lletra

Continuem endavant per veure les propietats d'estil dels tipus de lletra. En aquest exemple aplicarem algunes propietats CSS diferents a la mateixa mostra d’HTML, que té l’aspecte següent:

<h1>Tommy the cat</h1>

<p>I remember as if it were a meal ago...</p>

<p>Said Tommy the Cat as he reeled back to clear whatever foreign matter
 may have nestled its way into his mighty throat. Many a fat alley rat 
had met its demise while staring point blank down the cavernous barrel of
 this awesome prowling machine. Truly a wonder of nature this urban 
predator — Tommy the cat had many a story to tell. But it was a rare 
occasion such as this that he did.</p>

Podeu trobar l'exemple acabat en GitHub (vegeu-ne també el codi font).

Color

La propietat color estableix el color del contingut de primer pla dels elements seleccionats (que normalment és el text, però també pot incloure un parell d'altres coses, com ara un subratllat o un sobreratllat en el text, amb la propietat text-decoration).

La propietat color pot acceptar qualsevol unitat de color CSS, per exemple:

p {
  color: red;
}

Això fa que els paràgrafs es converteixin en vermells, en comptes del negre estàndard per defecte del navegador, així:

Famílies de tipus de lletra

Per a establir un tipus de lletra diferent en el teu text, utilitza la propietat font-family; això et permet especificar un tipus de lletra (o una llista de tipus de lletra) perquè el navegador l'apliqui als elements seleccionats. El navegador només aplica un tipus de lletra si està disponible en la màquina amb què s’accedeix al lloc web. Si no, només usarà un tipus de lletra predeterminat del navegador. Un exemple senzill és el següent:

p {
  font-family: arial;
}

Això fa que tots els paràgrafs d'una pàgina adoptin el tipus de lletra Arial, que es troba en qualsevol ordinador.

Tipus de lletra segurs per a la xarxa web

Parlant de la disponibilitat dels tipus de lletra, només una certa quantitat de tipus de lletra es troben generalment disponibles en tots els sistemes i, per tant, es poden utilitzar sense gaires preocupacions. Són els anomenats tipus de lletra segurs per a la xarxa web.

La majoria de les vegades, com a desenvolupadors web, volem tenir un control més específic sobre els tipus de lletra que s’utilitzen per a mostrar el contingut del text. El problema és trobar una manera de saber quin tipus de lletra està disponible en l'ordinador que es fa servir per a accedir a les nostres pàgines web. No hi ha manera de saber-ho en tots els casos, però se sap que els tipus de lletra segurs per a la web estan disponibles en gairebé totes les instàncies dels sistemes operatius més utilitzats (Windows, Mac, les distribucions més habituals de Linux, Android i iOS).

La llista de tipus de lletra segurs per a la xarxa web reals canvia a mesura que evolucionen els sistemes operatius, però és convenient considerar els tipus de lletra segurs per a la xarxa web següents, almenys ara com ara (molts d'ells s’han popularitzades gràcies a la iniciativa de Microsoft Tipus de lletra principals per a la xarxa web, de finals dels anys 1990 i principis dels anys 2000):

Nom Tipus de lletra genèric Observacions
Arial sans-serif Sovint es considera una bona pràctica afegir també el tipus de lletra Helvetica com una alternativa preferent a Arial; encara que són gairebé idèntiques, es considera que Helvetica té una forma més agradable, tot i que Arial està més disponible.
Courier New monospace Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Courier New anomenada Courier. Es considera una bona pràctica utilitzar-les totes dues, amb Courier New com l’opció preferent.
Georgia serif
Times New Roman serif Hi ha sistemes operatius que tenen una versió alternativa (possiblement més antiga) del tipus de lletra Times New Roman anomenada Times. Es considera una bona pràctica utilitzar-les totes dues, amb Times New Roman com l’opció preferent.
Trebuchet MS sans-serif Has de tenir cura amb l'ús d'aquest tipus de lletra perquè no està àmpliament disponible en sistemes operatius mòbils.
Verdana sans-serif

Nota: Entre els diversos recursos, el lloc web cssfontstack.com manté una llista de tipus de lletra segurs per a la web disponibles en sistemes operatius Windows i macOS, que poden ajudar-te a prendre la decisió sobre el que consideris segur per al teu ús.

Nota: Hi ha una manera de descarregar un tipus de lletra personalitzat juntament amb una pàgina web, que et permet personalitzar l'ús del tipus de lletra de la manera que vulguis: web fonts. Això és una mica més complex, i ho exposarem en un article separat més endavant en el mòdul.

Tipus de lletra predeterminats

CSS defineix cinc noms genèrics per als tipus de lletra: serif, sans-serif, monospace, cursive i fantasy. Són noms molt genèrics i l’aspecte exacte del tipus de lletra usat quan s'utilitzen aquests noms genèrics correspon a cada navegador i pot variar per a cada sistema operatiu amb què s'executa. Representa un pitjor escenari, en què el navegador tracta de fer el possible per a oferir almenys un tipus de lletra que es consideri adequat. serif, sans-serif i monospace són bastant previsibles i han de proporcionar alguna cosa raonable. D'altra banda, cursive i fantasy són menys previsibles i et recomanem utilitzar-les amb molta cura i provar-les cada vegada.

Els cinc noms es defineixen de la manera següent:

Nom Definició Exemple
serif Tipus de lletra que tenen serifes (les floritures i altres petits detalls que es veuen en els extrems dels traços en algunes tipografies). My big red elephant
sans-serif Tipus de lletra que no tenen serifes. My big red elephant
monospace Tipus de lletra en què cada caràcter ocupa la mateixa amplada, normalment s’utilitza en les llistes d’instruccions que constitueixen el codi informàtic. My big red elephant
cursive Tipus de lletra que tenen com a objectiu emular l'escriptura manuscrita, amb moviments fluids i connectats. My big red elephant
fantasy Tipus de lletra amb intencions decoratives. My big red elephant

Llistes de tipus de lletra

Com que no pots garantir la disponibilitat dels tipus de lletra que vols utilitzar en les teves pàgines web (fins i tot un tipus de lletra segur per a la xarxa web podria fallar per alguna raó), pots proporcionar una llista de tipus de lletra perquè el navegador tingui diversos tipus de lletra per poder triar. Això només implica introduir un atribut font-family amb un valor que consti de diversos noms de tipus de lletra separats per comes, per exemple:

p {
  font-family: "Trebuchet MS", Verdana, sans-serif;
}

En aquest cas, el navegador comença pel principi de la llista i mira si el primer tipus de lletra està disponible en la màquina. Si és així, s'aplica aquesta font als elements seleccionats. En cas contrari, es passa al tipus de lletra següent, i així successivament.

És recomanable proporcionar al final de la llista un nom de tipus de lletra genèric que sigui adequat perquè el navegador pugui almenys proporcionar alguna cosa adequada aproximada si cap dels tipus de lletra de la llista estan disponibles. Per il·lustrar aquest punt, els navegadors presenten els paràgrafs en un tipus de lletra serifa predeterminada, que normalment és Times New Roman, si no hi ha cap altra opció disponible; però això no és bo quan s’espera un tipus de lletra sans-serif!

Nota: Els noms dels tipus de lletra que tenen més d'una paraula, com Trebuchet MS s’han d’escriure entre cometes.

Un exemple de font-family

Afegim les línies següents al nostre exemple anterior per a donar als paràgrafs un tipus de lletra sans-serif:

p {
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Això ens dona el resultat següent:

La mida de la lletra

En l'article de valors i unitats en CSS del mòdul anterior, hem revisat les unitats de longitud i mida. La mida de la lletra (que s’estableix amb la propietat font-size pot prendre valors que es mesuren en la majoria d'aquestes unitats (i d’altres, com ara percentatges), però les unitats més comunes que faràs servir per a la mida del text són:

  • px (píxels): L’alçada expressada en nombre de píxels que vols que tingui el text. Aquesta és una unitat absoluta; dona sempre el mateix valor final calculat per al tipus de lletra de la pàgina en qualsevol situació.
  • em: 1 em és igual a la mida de la lletra que s’ha establert per al tipus de lletra de l'element pare de l'element al qual apliquem estil (més concretament, l'amplada d'una lletra M majúscula continguda dins de l'element pare). Això pot arribar a ser complicat de calcular si hi ha molts elements imbricats amb mides de tipus de lletra establertes diferents, però és factible, com veuràs a continuació. Així, doncs, per què t’ha de preocupar? Resulta força natural una vegada que t’hi acostumes i pots fer servir unitats em per a dimensionar-ho tot, no només text. Pots tenir un lloc web complet definit amb mides en unitats em, i així se simplifica molt el manteniment.
  • rem: Aquestes unitats funcionen igual que les unitats em, excepte que 1 rem és igual a la mida de lletra del tipus de lletra que s’ha establert per a l'element arrel del document (és a dir, <html>), no l'element pare. Això facilita força els càlculs per a esbrinar la mida de la lletra, però malauradament les unitats rem no són compatibles amb Internet Explorer 8 o anteriors. Si necessites compatibilitat amb navegadors antics per al teu projecte, pots utilitzar unitats em o px, o bé utilitzar un polyfill com REM-unit-polyfill.

L’atribut font-size d'un element s'hereta de l'element pare d'aquest element. Tot comença amb l'element arrel del document, <html>, en què l’atribut font-size està establert en 16 px de manera estàndard en els navegadors. Qualsevol paràgraf (o un altre element que no tingui una mida diferent establerta pel navegador) de l'interior de l'element arrel tindrà una mida final de 16 px. Altres elements poden tenir mides predeterminades diferents, per exemple, un element <h1> té una mida de 2 em establerta per defecte, de manera que tindrà una mida final de 32 píxels.

Les coses es tornen més difícils quan es comença a alterar la mida del tipus de lletra dels elements imbricats. Per exemple, si en la teva pàgina hi ha un element <article> i hi estableixes la mida del tipus de lletra en 1,5 em (que donaria una mida final de 24 px), i llavors vols que els paràgrafs de dins de l'element <article> tinguin una mida de lletra computada de 20 px, quin valor em hem d’utilitzar?

<!-- document base font-size is 16px -->
<article> <!-- If my font-size is 1.5em -->
  <p>My paragraph</p> <!-- How do I compute to 20px font-size? -->
</article>

Hauràs d'establir el valor em en 20/24 o 0,83333333 em. Els càlculs poden complicar-se, de manera que cal tenir cura a l’hora de com aplicar estils. El millor és utilitzar unitats rem on puguis per mantenir les coses senzilles i evitar establir la mida de la lletra dels elements del contenidor quan sigui possible.

Un exemple senzill de dimensionament

Quan dimensiones el teu text, normalment és una bona idea establir l’atribut base font-size del document en 10 px, de manera que resulta molt més senzill de fer els càlculs, perquè llavors els valors (r)em són la mida de la lletra en píxels dividida per 10, no per 16. A continuació, pots dimensionar fàcilment els diferents tipus de text del document si ho vols. És una bona idea fer una llista de tot el conjunt de regles font-size en una zona determinada del teu full d'estil, i així són fàcils de trobar.

El nostre nou resultat és així:

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Estils i gruixos de lletra, transformacions i decoracions del text

CSS proporciona quatre propietats comunes per a alterar el gruix visual / l’èmfasi del text:

  • font-style: s'utilitza per a activar i desactivar el text en cursiva. Els valors possibles són els següents (rarament es farà servir això, tret que vulgueu desactivar algun estil de cursiva per alguna raó):
    • normal: Estableix per al text el tipus de lletra normal (activa les cursives).
    • italic: Estableix per al text l’ús de la versió cursiva del tipus de lletra, si està disponible; si no està disponible, simula la cursiva amb oblique.
    • oblique: Estableix per al text l’ús d’una versió simulada d'un tipus de lletra en cursiva, creada inclinant la versió normal.
  • font-weight: estableix el "pes" del text. Això té molts valors disponibles en cas que hi hagi moltes variants de fonts disponibles (com ara -light, -normal, -bold, -extrabold, -black, etc.), però en una situació realista poques vegades n’usaràs cap, excepte per a normal i bold:
    • normal, bold: Gruix dels tipus de lletra normal i negreta
    • lighter, bolder: Estableix la intensitat de negreta en un element un nivell més lleu o més intens que la intensitat de negreta de l'element pare.
    • 100900: Valors numèrics d'intensitat de negreta que proporcionen un control de gra més fi que les paraules clau anteriors, si cal.
  • text-transform: Et permet configurar el tipus de transformació que admet el tipus de lletra. Els valors inclouen:
    • none: Evita qualsevol transformació.
    • uppercase: Transforma TOT EL TEXT A MAJÚSCULES.
    • lowercase: Transforma tot el text a minúscules.
    • capitalize: Transforma totes les paraules perquè tinguin La Primera Lletra en Majúscula.
    • full-width: Transforma tots els glifs de manera que s'escriuen dins d'un quadrat d'amplada fixa, similar a un tipus de lletra monoespaiada, i permet l'alineació de, per ex., caràcters llatins juntament amb glifs de llengua asiàtica (com el xinès, el japonès, el coreà).
  • text-decoration: Activa/desactiva les decoracions de text en els tipus de lletra (s'utilitza principalment per a desfer el subratllat predeterminat dels enllaços en aplicar-los estil). Els valors disponibles són: 
    • none: Anul·la qualsevol decoració de text ja present.
    • underline: Subratlla el text.
    • overline: Posa una línia sobre el text.
    • line-through: Posa una ratlla sobre el text.

Cal tenir en compte que text-decoration pot acceptar diversos valors alhora, si vols afegir diverses decoracions alhora; per exemple, text-decoration: underline overline. Tingues en compte que text-decoration és una propietat abreujada per a text-decoration-line, text-decoration-style i text-decoration-color. Pots utilitzar les combinacions d'aquests valors de propietat per a crear efectes interessants, per exemple, text-decoration: line-through red wavy

Observem com afegir un parell d'aquestes propietats al nostre exemple:

El resultat és aquest:

html {
  font-size: 10px;
}

h1 {
  font-size: 2.6rem;
  text-transform: capitalize;
}

h1 + p {
  font-weight: bold;
}

p {
  font-size: 1.4rem;
  color: red;
  font-family: Helvetica, Arial, sans-serif;
}

Ombres en el text

Pots aplicar ombres al text amb la propietat text-shadow. Això involucra fins a quatre valors, com es mostra en l'exemple següent:

text-shadow: 4px 4px 5px red;

Les quatre propietats són:

  1. El desplaçament horitzontal de la silueta del text original: pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS, però el més convenient és usar px. Aquest valor s'ha d'incloure.
  2. El desplaçament vertical de la silueta del text original: es comporta bàsicament igual que el desplaçament horitzontal, excepte que mou l'ombra amunt i avall, no a dreta i esquerra. Aquest valor s'ha d'incloure.
  3. El radi d'esborronat: un valor més alt significa que l'ombra es dispersa més àmpliament. Si aquest valor no s'inclou, el valor predeterminat és 0, que significa que no s’esborrona. Pot prendre la majoria de les unitats de longitud i grandària disponibles en CSS.
  4. El color base de l'ombra: pot prendre qualsevol unitat de color CSS. Si no s'inclou, el valor predeterminat és black.

Nota: Els valors de desplaçament positius mouen l'ombra cap a la dreta i cap avall, però també pots utilitzar valors de desplaçament negatius per a moure l'ombra cap a l'esquerra i cap amunt, com per exemple -1px -1px.

Ombres múltiples

Pots aplicar diverses ombres a un mateix text si inclous més d’un valor d'ombra separats per comes, per exemple:

text-shadow: -1px -1px 1px #aaa,
             0px 4px 1px rgba(0,0,0,0.5),
             4px 4px 5px rgba(0,0,0,0.7),
             0px 0px 7px rgba(0,0,0,0.4);

Si apliquem això a l'element <h1> del nostre exemple de Tommy the cat, obtenim això:

Nota: Pots veure més exemples interessants d'ús de text-shadow en l'article de Sitepoint Moonlighting with CSS text-shadow.

Disseny de pàgina del text

Ara que ja coneixem les propietats bàsiques dels tipus de lletra, passem a veure les propietats del text que podem utilitzar que afecten el disseny de pàgina.

Alineació del text

La propietat text-align s'utilitza per a controlar com s'alinea el text dins de la caixa que conté els continguts. Els valors disponibles són els següents i funcionen gairebé de la mateixa manera que ho fa una aplicació de processador de text normal:

  • left: Justifica el text a l'esquerra.
  • right: Justifica el text a la dreta.
  • center: Centra el text.
  • justify: Varia els espais entre les paraules perquè totes les línies de text ocupin la mateixa amplada. Cal utilitzar-lo amb cura; pot presentar un aspecte terrible, sobretot quan s'aplica a un paràgraf amb paraules molt llargues. Si fas servir aquesta propietat, has de pensar d’utilitzar-hi també conjuntament alguna altra cosa, com ara hyphens, per partir les paraules més llargues al final de línia.

Si s'aplica text-align: center; a l’<h1> en el nostre exemple, obtenim això:

Interlineat

La propietat line-height estableix l'alçada que hi ha entre les línies de text. Pot prendre la majoria de les unitats de longitud i grandària, però també un valor sense unitat, que actua com un multiplicador, i generalment es considera l’opció més bona; es multiplica el valor de font-size i s’obté line-height. El text del body en general es veu més bé i és més fàcil de llegir si les línies estan prou separades. L'alçada de la línia recomanada és d'aproximadament 1,5-2 (doble espai). Per tant, si vols establir les línies de text a 1,6 vegades l'alçada del tipus de lletra, utilitzaries això:

line-height: 1.6;

Si apliques això als elements <p> del nostre exemple, obtindràs aquest resultat:

Espaiat entre lletres i entre paraules

Les propietats spacing-letter i word-spacing permeten establir l'espaiat entre lletres i l'espaiat entre paraules en el text. No ho faràs amb gaire freqüència, però potser ho trobes útil per a obtenir un cert tipus de presentació o per millorar la llegibilitat d'un tipus de lletra especialment densa. Pot prendre la majoria de les unitats de longitud i grandària.

Així, per exemple, podríem aplicar una mica d’espai entre lletres i espai entre paraules a la primera línia de cada element <p> del nostre exemple:

p::first-line {
  letter-spacing: 4px;
  word-spacing: 4px;
}

Afegim-ne una mica al nostre exemple, així:

Altres propietats que convé conèixer

Les propietats anteriors et donen una idea de com començar a aplicar estil al text d’una pàgina web, però hi ha moltes altres propietats que es poden utilitzar. Aquí només hem volgut exposar les més importants. Un cop t’hagis acostumat a fer-les servir, també hauries d'explorar les següents:

Estils per als tipus de lletra:

  • font-variant: Alterna entre la versaleta i la lletra normal
  • font-kerning: Activa i desactiva les opcions de kerning del tipus de lletra.
  • font-feature-settings: Activa i desactiva diverses característiques dels tipus de lletra OpenType.
  • font-variant-alternates: Controla l'ús de caràcters alternatius per a un tipus de lletra determinat.
  • font-variant-caps: Controla l'ús de caràcters alternatius en majúscules.
  • font-variant-east-asian: Controla l'ús de caràcters alternatius per a textos en caràcters de llengües de l'Àsia oriental, com ara el japonès i el xinès.
  • font-variant-ligatures: Controla les lligadures i les formes contextuals que s'utilitzen en text.
  • font-variant-numeric: Controla l'ús de glifs alternatius per a números, fraccions i marcadors ordinaris.
  • font-variant-position: Controla l'ús de caràcters alternatius de mides més petites posicionades com superíndex o subíndex.
  • font-size-adjust: Ajusta la mida visual del tipus de lletra independentment de la mida real de la lletra.
  • font-stretch: Alterna entre versions espaiades alternatives possibles d'un tipus de lletra donat.
  • text-underline-position: Especifica la posició dels subratllats amb el valor underline de la propietat text-decoration-line.
  • text-rendering: Intenta aconseguir una optimització de la presentació del text.

Aplicació d’estil al text per al disseny de pàgina

  • text-indent: Especifica quant d’espai horitzontal s'hauria de deixar abans del començament de la primera línia del contingut del text.
  • text-overflow: Defineix com s’indica als usuaris el contingut desbordat que no es mostra.
  • white-space: Defineix com es tracten els espais en blanc i els salts de línia associats dins de l'element.
  • word-break: Especifica si vols partició de paraules entre línies.
  • direction: Defineix la direcció del text (això depèn de l’idioma i, en general, és millor deixar que HTML s’encarregui d’aquesta part, perquè va associada al contingut del text).
  • hyphens: Activa i desactiva la partició de paraules per als idiomes admesos.
  • line-break: Relaxa o força la partició de línies per a les llengües asiàtiques.
  • text-align-last: Defineix com s'alinea l'última línia d'un bloc o una línia, just abans d'un salt de línia forçat.
  • text-orientation: Defineix l'orientació del text en una línia.
  • word-wrap: Especifica si el navegador pot partir o no paraules entre línies per a evitar desbordaments.
  • writing-mode: Estableix si les línies de text estan en horitzontal o vertical, i en quina direcció flueixen les línies posteriors.

Propietat abreujada per al tipus de lletra

També es poden establir moltes propietats de tipus de lletra amb la propietat abreujada font. S’escriuen en l’ordre següent:  font-style, font-variant, font-weight, font-stretch, font-size, line-height i font-family.

Entre totes aquestes propietats, només es requereixen font-size i font-family quan s'utilitza la propietat abreujada font.

S'ha d'incloure una barra diagonal entre les propietats font-size i line-height.

Un exemple complet tindria un aspecte com aquest:

font: italic normal bold normal 3em/1.5 Helvetica, Arial, sans-serif;

Aprenentatge actiu: Jugar amb els estils de text

En aquesta sessió d'aprenentatge actiu, no et proposem de fer cap exercici específic: et proposem que juguis amb algunes propietats del tipus de lletra i el text aplicades al disseny de pàgina i observis què ets capaç de crear. Pots fer-ho usant els fitxers HTML/CSS fora de línia, o pots introduir el teu codi en l'exemple editat en viu a continuació.

Si t’equivoques, sempre pots tornar a l’inici amb el botó Reinicia.

Resum

Esperem que hagis gaudit jugant amb el text d’aquest article! L’article següent t’explicarà tot el que has de saber sobre l’aplicació d'estil a llistes HTML.