Legge til farge og størrelse på tekst med CSS og HTML

Med litt CSS og HTML kan du styre nøyaktig hvilken farge og størrelse teksten på nettsiden din skal ha. Du trenger verken dyre programmer eller et eget designverktøy – alt som skal til er noen få kodelinjer og en nettleser som viser resultatet. I denne guiden går vi gjennom hele veien: fra den aller enkleste metoden, der du skriver stilen rett inn i HTML-taggen, til ryddigere og mer profesjonelle løsninger med egne CSS-regler. Hvert begrep forklares første gang det dukker opp, du får ferdige kodeeksempler du kan kopiere, og vi peker på de vanligste feilene nybegynnere gjør slik at du slipper å gå i de samme fellene.

Rask start: legg til farge og størrelse rett i HTML-taggen

Den raskeste måten å farge og forstørre tekst på er å bruke style-attributtet rett inne i en HTML-tagg. Et attributt er en tilleggsopplysning du skriver inni en tagg, og style lar deg legge inn CSS-regler uten en egen stilfil. Vi starter med en helt vanlig setning som er uthevet med en <strong>-tagg (taggen som gjør tekst fet):

<body>
  <strong>Denne uka gikk fort, i overmorgen er det alt onsdag, sa mannen</strong>
</body>

For å gi teksten farge og en større skriftstørrelse legger vi til style-attributtet. Fargen bestemmer vi med egenskapen color, og størrelsen med egenskapen font-size. Hver regel skrives som egenskap: verdi; og avsluttes alltid med semikolon:

<body>
  <strong style="color:#FF0000; font-size:22px;">Denne uka gikk fort, i overmorgen er det alt onsdag, sa mannen</strong>
</body>

Her sier color:#FF0000; at teksten skal være rød, og font-size:22px; at den skal være 22 piksler høy. Du kan ha så mange regler du vil inni ett og samme style-attributt – skill dem bare med semikolon. Semikolonet er viktig: det markerer hvor en regel slutter og den neste begynner. Glemmer du det mellom to regler, blir hele linjen tolket feil.

Denne metoden fungerer i nesten alle tagger, ikke bare <strong>. Du kan bruke den på <p> (avsnitt), <span> (en nøytral «boks» rundt tekst), <h1> til <h6> (overskrifter) og de aller fleste andre elementer.

Hva er forskjellen på HTML og CSS?

HTML og CSS løser to ulike oppgaver, og det er lettere å skrive riktig kode når du forstår arbeidsdelingen mellom dem. Kort sagt: HTML er innholdet og strukturen, mens CSS er utseendet.

HTML bygger strukturen

HTML (HyperText Markup Language) er språket som bygger selve innholdet på en nettside. Det er HTML som forteller nettleseren at «dette er en overskrift», «dette er et avsnitt» og «dette ordet skal utheves». HTML sier derimot lite om hvordan ting skal se ut. Vil du lære mer om byggeklossene, har vi en egen oversikt over ofte brukte HTML-tagger.

CSS bestemmer utseendet

CSS (Cascading Style Sheets) er språket som bestemmer hvordan innholdet skal presenteres: farger, størrelser, avstander, skrifttyper og plassering. Når du skriver color og font-size, bruker du altså CSS – selv om du skriver det rett inne i en HTML-tagg. Vil du ha en grundigere innføring i hva stilspråket er og hvordan det henger sammen, kan du lese artikkelen Hva er CSS?. Fordelen med denne arbeidsdelingen er at du kan endre hele utseendet på en nettside uten å røre innholdet.

Slik endrer du tekstfarge

Tekstfarge settes alltid med egenskapen color i CSS, men selve fargeverdien kan skrives på flere måter. Alle metodene gir samme resultat i nettleseren – du velger den som passer deg best. De fire vanligste er fargenavn, heksadesimale koder, RGB og HSL.

Fargenavn

Den enkleste måten er å skrive fargens engelske navn. CSS støtter rundt 140 navngitte farger, for eksempel red, blue, green, black, white, orange og rebeccapurple.

<p style="color:red;">Denne teksten er rød</p>

Fargenavn er lette å huske, men utvalget er begrenset. Trenger du en helt bestemt nyanse, er en av de neste metodene bedre.

Heksadesimale fargekoder

En heksadesimal fargekode (ofte bare kalt «hex») er den vanligste måten å angi farge på nettet. Den starter med en firkant (#) etterfulgt av seks tegn som beskriver mengden rødt, grønt og blått: #RRGGBB. #FF0000 er ren rød, #00FF00 er grønn, #0000FF er blå, #000000 er svart og #FFFFFF er hvit.

<p style="color:#1A73E8;">En rolig blåfarge</p>

Når de tre parene består av like tegn, kan du forkorte koden til tre tegn: #FF0000 kan skrives #F00. Du finner ferdige hex-koder i alle bildeprogrammer og i utallige gratis fargevelgere på nettet.

RGB og RGBA

RGB-notasjonen angir de samme tre fargekanalene, men med tall fra 0 til 255: rgb(255, 0, 0) er rød. Varianten RGBA legger til en fjerde verdi for gjennomsiktighet (alpha) mellom 0 og 1, der 0 er helt gjennomsiktig og 1 er helt synlig.

<p style="color:rgb(26, 115, 232);">Samme blåfarge som over</p>
<p style="color:rgba(0, 0, 0, 0.6);">Svart tekst med 60 % synlighet</p>

RGBA er nyttig når du vil at teksten skal slippe litt av bakgrunnen igjennom, for eksempel en dempet grå undertekst.

HSL og HSLA

HSL står for Hue (fargetone), Saturation (metning) og Lightness (lyshet) og er ofte den mest intuitive måten å finjustere en farge på. Fargetonen angis i grader fra 0 til 360, mens metning og lyshet oppgis i prosent.

<p style="color:hsl(210, 80%, 50%);">En klar blåfarge</p>

Med HSL er det lett å lage flere nyanser av samme farge: hold fargetonen fast og juster bare lysheten opp eller ned. Også HSL har en variant med gjennomsiktighet (HSLA).

Slik endrer du tekststørrelse

Tekststørrelse settes alltid med egenskapen font-size, men du kan velge mellom flere måleenheter. Valget av enhet påvirker hvordan teksten oppfører seg på ulike skjermer og når brukeren zoomer, så det er verdt å kjenne forskjellen.

Piksler (px)

Piksler er den enheten de fleste begynner med fordi den er enkel å forstå: font-size:22px; gir en fast størrelse på 22 piksler. Ulempen er at en fast pikselverdi ikke skalerer like fleksibelt når brukeren endrer standard skriftstørrelse i nettleseren.

<p style="font-size:18px;">Brødtekst på 18 piksler</p>

em og rem

Enhetene em og rem er relative, altså regnet ut fra en annen størrelse. For font-size beregnes em ut fra skriftstørrelsen på foreldreelementet (elementet rundt), mens rem beregnes ut fra skriftstørrelsen på rotelementet <html>. Er grunnstørrelsen 16 piksler, blir 1.5rem lik 24 piksler.

<p style="font-size:1.25rem;">Litt større enn normal brødtekst</p>

Fordelen med rem er at all tekst skalerer samlet hvis du endrer grunnstørrelsen ett sted, og at teksten respekterer brukerens egne innstillinger – noe som er bra for tilgjengeligheten.

Prosent og nøkkelord

Du kan også oppgi størrelsen i prosent av foreldreelementet, for eksempel font-size:120%;, eller bruke nøkkelord som small, medium og large. Prosent og em fungerer i praksis på samme måte: 120% tilsvarer 1.2em.

Tre måter å bruke CSS på

Du kan skrive CSS på tre nivåer, og de passer til ulike situasjoner. Metoden vi brukte over – stil rett i taggen – er den enkleste, men ikke alltid den beste. Her er de tre måtene, fra minst til mest ryddig.

1. Inline – stil rett i taggen

Inline betyr at du legger CSS-en rett inn i elementet med style-attributtet, akkurat som i eksemplene over. Det er perfekt når du raskt vil teste noe eller bare skal style ett enkelt element. Ulempen er at koden fort blir rotete hvis du gjentar den samme stilen på mange elementer, for da må du endre hvert eneste sted når du ombestemmer deg.

2. Intern CSS i <style>

Her samler du reglene i en <style>-blokk inne i <head>-delen av HTML-dokumentet. Da kan én regel gjelde for mange elementer samtidig. Du bruker en selektor – en «adresse» som peker ut hvilke elementer regelen gjelder for – for eksempel alle avsnitt:

<head>
  <style>
    p {
      color: #333333;
      font-size: 18px;
    }
  </style>
</head>

Nå får alle <p>-avsnitt på siden samme farge og størrelse, og du endrer dem alle ett sted.

3. Ekstern CSS-fil

Den mest profesjonelle løsningen er å legge all stil i en egen fil, for eksempel stil.css, og koble den til med en <link>-tagg i <head>. Da deler flere sider samme stilsett. Ofte bruker man en class – et navn du selv finner på og setter på elementene du vil style likt:

<!-- i HTML-filen -->
<p class="uthevet">Viktig tekst</p>

/* i stil.css */
.uthevet {
  color: #C0392B;
  font-size: 20px;
}

Punktumet foran uthevet i CSS-filen forteller at dette er en class. Metoden holder innhold og design adskilt og er standarden på moderne nettsteder. Vil du gå videre, har vi samlet en rekke nyttige CSS3-koder du kan bygge på.

Flere stiler du kan kombinere

Farge og størrelse er bare begynnelsen. Inne i samme style-attributt eller CSS-regel kan du kombinere mange egenskaper for å forme teksten slik du vil. Her er de mest nyttige:

• font-weight – hvor fet teksten er, for eksempel bold (fet) eller normal.
• font-style – italic gir kursiv tekst.
• font-family – hvilken skrifttype teksten bruker, for eksempel Arial, sans-serif.
• text-decoration – understrek (underline) eller gjennomstreking (line-through).
• text-align – justering, for eksempel center for midtstilt tekst.
• line-height – linjeavstanden, som gjør lengre tekster lettere å lese.
• letter-spacing – avstanden mellom bokstavene.
• text-transform – endrer til uppercase (store bokstaver) eller lowercase.

Et eksempel som kombinerer flere egenskaper:

<p style="color:#2C3E50; font-size:20px; font-weight:bold; text-align:center;">En sentrert, fet overskriftstekst</p>

Vil du styre plasseringen av tekst og bokser nærmere, har vi en egen guide til hvordan du sentrerer skrift og innhold. Og trenger du andre skrifttyper enn standardfontene, kan du hente gratis fonter fra Google Fonts.

Tilgjengelighet: tenk på kontrast og lesbarhet

Riktig farge og størrelse handler om mer enn pynt – det handler om at alle skal klare å lese teksten. Retningslinjene for universell utforming (WCAG) anbefaler et kontrastforhold på minst 4,5:1 mellom tekst og bakgrunn for vanlig brødtekst, og 3:1 for stor tekst. Lysegrå tekst på hvit bakgrunn ser kanskje stilig ut, men blir vanskelig å lese for mange.

Et par enkle huskeregler: unngå for lav kontrast, ikke bruk farge alene for å formidle mening (for eksempel «klikk på det røde»), og la brødteksten være minst rundt 16 piksler. Bruker du relative enheter som rem, respekterer du i tillegg leserens egne innstillinger for skriftstørrelse.

Vanlige feil du bør unngå

De fleste problemene med farge og størrelse skyldes noen få, gjentatte feil. Her er de du oftest møter som nybegynner:

• Glemt semikolon. Mangler semikolon mellom to regler i et style-attributt, ignorerer nettleseren ofte resten av linjen. Avslutt alltid hver regel med semikolon.
• Bruk av den gamle <font>-taggen. <font>-elementet med attributter som color og size er foreldet (obsolete) i HTML5, og du bør ikke bruke det i nye prosjekter. Bruk CSS i stedet.
• Feil i hex-koden. En hex-kode må ha tre eller seks tegn etter firkanten. #FF00 er ugyldig og blir ignorert.
• Anførselstegn på avveie. Hele verdien til style skal stå i ett par anførselstegn: style=»color:red; font-size:20px;». Setter du anførselstegn rundt hver enkelt regel, brytes koden.
• Inline-stil overalt. Fungerer fint på ett element, men blir uhåndterlig på en hel side. Flytt gjentatt stil til en <style>-blokk eller en ekstern CSS-fil.
• Bare piksler på alt. Faste pikselverdier skalerer dårligere når brukeren zoomer eller endrer standardstørrelsen. Vurder rem for brødtekst.

Vil du eksperimentere trygt, kan du åpne et enkelt HTML-dokument i en nettleser og endre koden mens du ser hva som skjer. Trenger du inspirasjon til neste steg, har vi også en guide til hvordan du lager en HTML-lenke.

Vanlige spørsmål (FAQ)

Kan jeg legge til farge og størrelse uten en egen CSS-fil?

Ja. Med style-attributtet skriver du CSS-reglene rett inne i HTML-taggen, for eksempel style=»color:#FF0000; font-size:22px;». Det krever ingen ekstern fil og er den raskeste måten å style ett enkelt element på.

Hvorfor virker ikke fargen min?

De vanligste årsakene er at du har glemt semikolon mellom to regler, skrevet en ugyldig hex-kode (den må ha tre eller seks tegn etter #), eller stavet fargenavnet feil. Sjekk også at hele verdien står inni ett par anførselstegn.

Bør jeg bruke px, em eller rem for tekststørrelse?

Piksler er enklest å forstå og greit til små justeringer. For brødtekst er rem ofte et bedre valg, fordi teksten da skalerer samlet og respekterer leserens egne innstillinger. em regnes ut fra foreldreelementet, rem fra rotelementet <html>.

Er <font>-taggen fortsatt gyldig?

Nei. <font>-elementet er foreldet i HTML5 og bør ikke brukes i nye nettsider. Mange nettlesere viser den fortsatt av hensyn til gamle sider, men validatorer flagger den som feil. Bruk CSS-egenskapene color og font-size i stedet.

Hvordan gir jeg teksten gjennomsiktig farge?

Bruk RGBA eller HSLA, som har en ekstra verdi for gjennomsiktighet (alpha) mellom 0 og 1. For eksempel gir color:rgba(0,0,0,0.6); en svart tekst som er 60 prosent synlig, slik at litt av bakgrunnen skinner igjennom.