3.3 CSS: Styling og layout

Fra grått skjelett til levende design

Hvis du noen gang har sett en HTML-side helt uten styling, vet du hvordan den ser ut: svart tekst på hvit bakgrunn, blå understrekte lenker, alt stablet rett nedover som et dokument fra forrige århundre. Strukturen er der -- skjelettet vi bygde med HTML -- men det er livløst, fargeløst, kjedelig. Hva er det som forvandler dette til de vakre, gjennomdesignede sidene du kjenner fra nettet?

Svaret er CSS -- Cascading Style Sheets. Hvis HTML er skjelettet, er CSS huden, klærne og sminken. CSS bestemmer farger, skrifttyper, størrelser, avstander og selve plasseringen av alt på siden. Det er her en nettside går fra å være ren informasjon til å bli en opplevelse.

I denne fortellingen skal vi lære å style. Vi skal forstå hvordan en CSS-regel er bygget opp og hvordan vi peker ut akkurat de elementene vi vil endre. Vi skal mestre boksmodellen, som er nøkkelen til all avstand og plassering. Og til slutt skal vi temme de to kraftigste verktøyene for moderne layout: Flexbox og CSS Grid.

Regelen og pekefingeren

En CSS-regel har to deler: en selektor og en deklarasjonsblokk. Tenk på det slik: selektoren peker ut hvem regelen gjelder for, og blokken sier hva som skal skje. Skriver vi h1 { color: darkblue; font-size: 2rem; }, betyr det «for alle h1-overskrifter: sett tekstfargen til mørkeblå og skriftstørrelsen til 2rem». Inni blokken har vi par av egenskaper og verdier -- color er egenskapen, darkblue er verdien.

Men hvordan peker vi presist? Det finnes flere typer selektorer. En element-selektor som p treffer alle avsnitt på siden. En klasse-selektor, skrevet med punktum som .intro, treffer alle elementer som har class="intro". En id-selektor, skrevet med firkanttegn som #header, treffer det ene elementet med id="header". Du kan til og med kombinere: nav a treffer bare lenker som ligger inni en <nav>, og .kort:hover treffer et kort akkurat når musepekeren svever over det. Klasse-selektorer er de du kommer til å bruke mest, fordi de er fleksible og gjenbrukbare.

Til slutt: hvordan kobler vi CSS til HTML? Det finnes tre måter. Du kan bruke et eksternt stilark med en <link>-tag -- dette er klart anbefalt, fordi det holder HTML og CSS adskilt og lar deg gjenbruke stilen på mange sider. Du kan skrive CSS internt i et <style>-element i HTML-filen. Eller du kan skrive såkalt inline-stil rett på elementet -- men dette bør du unngå, for det blir fort rotete og umulig å vedlikeholde. Hold stilen samlet i et eget ark, så takker fremtidige-deg deg selv.

Esken rundt alt

Nå kommer et begrep som er helt avgjørende for å forstå hvordan ting plasseres på en side: boksmodellen. I CSS er nemlig hvert eneste element en rektangulær boks -- og denne boksen har fire lag, som esker inni esker.

Helt innerst ligger innholdet -- teksten eller bildet. Rundt innholdet ligger padding, den indre margen, som er avstanden mellom innholdet og kantlinjen. Tenk på det som luften mellom teksten og kanten på boksen. Utenfor padding ligger border, selve kantlinjen rundt elementet. Og helt ytterst ligger margin, den ytre margen, som er avstanden mellom denne boksen og andre bokser rundt den. Padding skyver innholdet innover fra kanten; margin dytter naboene unna.

Å forstå disse fire lagene er nøkkelen til all avstand og plassering på en nettside. Når noe ser for trangt ut, trenger det kanskje mer padding. Når to elementer klistrer seg sammen, trenger de kanskje mer margin. Et nyttig triks helt til slutt: legg til regelen box-sizing: border-box. Den gjør at padding og border regnes inni bredden du oppgir, slik at en boks du sier skal være 300 piksler bred, faktisk blir 300 piksler bred -- ikke 300 pluss padding pluss border. Det sparer deg for utallige hoderegnestykker.

Å ordne ting på rad

Den største utfordringen i webdesign er layout -- å plassere elementene der du vil ha dem. I gamle dager var dette overraskende vanskelig, men i dag har vi to fantastiske verktøy, og det første er Flexbox.

Flexbox er laget for å ordne elementer langs én akse -- enten på rad eller i kolonne. Du aktiverer det ved å sette display: flex på en beholder, og plutselig kan du fordele og justere barna inni den med stor letthet. Egenskapen justify-content styrer fordelingen langs hovedaksen: center samler dem på midten, space-between skyver dem helt ut til kantene med luft imellom. Egenskapen align-items justerer langs den andre aksen, for eksempel center for å sentrere vertikalt. Og gap gir en enkel, jevn avstand mellom elementene.

Dette er nettopp det du trenger til en navigasjonsmeny. Tenk deg en logo til venstre og noen lenker til høyre. Med display: flex og justify-content: space-between skyves logoen helt til venstre og lenkene helt til høyre, automatisk, uansett skjermbredde. Du kan også styre retningen med flex-direction, der row er standard og column stabler tingene vertikalt. Og med flex-wrap: wrap lar du elementene bryte til neste linje når det blir trangt. Flexbox gjør det som før var en kamp, til noen få linjer kode.

Å bygge et helt rutenett

Flexbox er glimrende for én akse, men noen ganger trenger du å ordne ting i to dimensjoner samtidig -- både rader og kolonner. Da tar du fram det andre store verktøyet: CSS Grid.

Du aktiverer Grid med display: grid, og deretter definerer du selve rutenettet. Med grid-template-columns: 1fr 2fr 1fr lager du tre kolonner. Legg merke til den nye enheten fr, som står for «fraksjon» -- den fordeler tilgjengelig plass proporsjonalt. Her får den midterste kolonnen dobbelt så mye plass som de to andre, fordi den har 2fr mot 1fr. På samme måte definerer grid-template-rows radene, og gap gir avstand mellom cellene.

Det virkelig kraftige er hvordan du kan plassere elementer i rutenettet. Med grid-column: 1 / -1 strekker du et element over alle kolonnene -- perfekt for en header eller footer som skal gå i full bredde. En sidebar kan plasseres i venstre kolonne, hovedinnholdet i midten. Med Grid kan du bygge hele den klassiske sidelayouten -- header på toppen, sidebar til venstre, innhold i midten, footer i bunnen -- på en ryddig og forutsigbar måte. Så når skal du bruke hva? Enkel regel: bruk Flexbox når du ordner langs én akse, som en meny eller en rad av kort, og CSS Grid når du bygger en todimensjonal layout med både rader og kolonner. De er ikke konkurrenter -- de utfyller hverandre, og dyktige utviklere bruker dem ofte sammen.

Oppsummering

Vi har gitt skjelettet farge og form med CSS. En CSS-regel består av en selektor som peker ut elementer -- element, klasse (.) eller id (#) -- og en deklarasjonsblokk med egenskap-verdi-par. Best praksis er å holde stilen i et eksternt stilark.

Vi mestret boksmodellen med sine fire lag -- innhold, padding, border og margin -- nøkkelen til all avstand og plassering, og lærte at box-sizing: border-box gjør størrelser forutsigbare. Til slutt temmet vi de to store layoutverktøyene: Flexbox for endimensjonal ordning langs én akse, perfekt for menyer og rader, og CSS Grid for todimensjonale layouter med rader og kolonner, der fr-enheten fordeler plass og grid-column: 1 / -1 strekker over hele bredden. Med disse verktøyene kan du bygge nesten hvilken som helst moderne layout.