5 Introduksjon til stilsetting med CSS

I dette kapitlet lager du en side for Vårkonserten på skolen, og gir den farger og skrift med CSS, Cascading Style Sheets. Lagre alt du lager i dette kapitlet i mappen kap05-css.

5.1 Gi ett element stil

varkonserten.html
<h1 style="color: #ff8c42;">Vårkonserten</h1>
<p style="font-size: 20px;">Korpset, koret og skolebandet spiller i aulaen 24. april klokka 19.</p>

HTML bestemmer hva som står på siden. CSS bestemmer hvordan det skal se ut. Attributtet style gir stil til ett element. Inne i style skriver du deklarasjoner, som består av en egenskap og en verdi.

color: #ff8c42;
  1. Les koden ovenfor, og gjett hvordan overskriften og avsnittet kommer til å se ut.
  2. Lag filen varkonserten.html i mappen kap05-css. Skriv en hel nettside med tittelen Vårkonserten, og legg kodelinjene ovenfor inne i <body>.
  3. Endre #ff8c42 til #2e7d32. Hva skjer? Endre tilbake.
  4. Utvid avsnittet med en deklarasjon til, som vist nedenfor. Gjett hva font-style: italic gjør.
varkonserten.html
<h1 style="color: #ff8c42;">Vårkonserten</h1>
<p style="font-size: 20px; font-style: italic;">Korpset, koret og skolebandet spiller i aulaen 24. april klokka 19.</p>

Nedenfor ser du fire kodebiter. Bare én av dem er riktig.

Kode A
<h1 style="color: #ff8c42 font-size: 40px;">Vårkonserten</h1>
Kode B
<h1 style="color = #ff8c42; font-size: 40px;">Vårkonserten</h1>
Kode C
<h1 style="colour: #ff8c42; font-size: 40px;">Vårkonserten</h1>
Kode D
<h1 style="color: #ff8c42; font-size: 40px;">Vårkonserten</h1>
  1. Finn kodebiten som er riktig. Forklar feilen i hver av de tre andre.
  2. Lag feilen fra Kode A i filen din. Hvilke av de to deklarasjonene virker? Gjør det samme med feilene i Kode B og Kode C.

CSS gir ingen feilmelding. Nettleseren hopper over det den ikke forstår, og bruker resten. Et manglende semikolon kan derfor ødelegge to deklarasjoner på én gang.

5.2 Farger

varkonserten.html
<body style="background-color: #1d1b3a; color: #f5f0e6;">
  <h1 style="color: #ffd166;">Vårkonserten</h1>
  <p style="color: rgb(255, 140, 66);">Gratis inngang for elever!</p>
</body>

Med color bestemmer du fargen på teksten, og med background-color fargen på bakgrunnen. Farger kan skrives med navn, som white, eller med en kode, som #ff8c42 eller rgb(255, 140, 66).

  1. Les koden ovenfor. Gjett hvilken farge bakgrunnen, overskriften og avsnittet får.
  2. Gi <body> den samme stilen som i koden ovenfor, og legg til avsnittet om gratis inngang. Last inn siden på nytt.
  3. Avsnittet om gratis inngang har samme farge som overskriften hadde i 5.1. Hvorfor, når den ene er skrevet med # og den andre med rgb?
  4. Endre bakgrunnsfargen til #ff0000, #00ff00 og #0000ff, én om gangen. Gjett hvilken farge du får hver gang.
  5. Endre bakgrunnsfargen til #000000 og deretter til #ffffff. Hvilke farger blir det? Endre tilbake til #1d1b3a.
  6. Hva tror du de tre parene med tegn i #ff8c42 står for? Bruk svarene fra d) og e).

I utviklerverktøyene kan du klikke på den lille fargeruten foran en farge i fanen Styles. Da får du opp en fargevelger, og kan prøve ut farger før du skriver dem i koden.

  1. Hvorfor tror du det står color og background-color på <body>, og ikke på hvert eneste avsnitt?

5.3 Kontrast

Tekst Bakgrunn Slik ser det ut Kontrast
#f5f0e6 #1d1b3a Vårkonserten 14,6:1
#ffd166 #1d1b3a Vårkonserten 11,5:1
#ff8c42 #1d1b3a Vårkonserten 7,2:1
#6b6894 #1d1b3a Vårkonserten 3,2:1
#4a4870 #1d1b3a Vårkonserten 1,9:1

Tekst må ha god kontrast mot bakgrunnen, slik at alle kan lese den. Kontrasten måles som et forhold mellom 1:1, som er ingen kontrast, og 21:1, som er svart mot hvitt. WCAG krever minst 4,5:1 for vanlig tekst, og 3:1 for stor tekst, som overskrifter.

  1. Hvilke av fargene i tabellen kan brukes til vanlig tekst på den mørke bakgrunnen? Hvilke kan bare brukes til store overskrifter?
  2. Gi avsnittet om gratis inngang fargen #4a4870. Er teksten lett å lese? Endre tilbake.
  3. Åpne utviklerverktøyene, og inspiser overskriften. Klikk på fargeruten foran fargen i fanen Styles. Hvilket kontrastforhold viser utviklerverktøyene?
  4. Søk etter contrast checker på nettet, og finn en nettside som regner ut kontrasten mellom to farger. Sjekk fargene #ff8c42 og #1d1b3a. Får du samme svar som i tabellen?

Mange ser dårlig, og mange bruker mobilen ute i sola. God kontrast gjør siden lettere å lese for alle. Lys tekst på mørk bakgrunn kan ha like god kontrast som mørk tekst på lys bakgrunn.

  1. Velg tre farger du vil bruke på konsertsiden: en bakgrunnsfarge, en tekstfarge og en farge til overskrifter. Sjekk at fargen til vanlig tekst har minst 4,5:1 mot bakgrunnen.

5.4 Et stilsett i <head>

varkonserten.html
<head>
  <meta charset="utf-8">
  <title>Vårkonserten</title>
  <style>
    body {
      background-color: #1d1b3a;
      color: #f5f0e6;
    }
    h1, h2 {
      color: #ffd166;
    }
  </style>
</head>

Med style-attributtet må du skrive stilen på hvert element. I stedet kan du samle stilen i et <style>-element i <head>. Der skriver du regler. En regel har en velger, som sier hvilke elementer regelen gjelder for.

  1. Les koden ovenfor. Hvilke elementer på siden får regelen på kodelinje 9–11?
  2. Legg til <style>-elementet i <head>. Fjern deretter alle style-attributtene på siden. Hvilke endringer ser du?
  3. Utvid <body> med koden nedenfor. Overskriftene Program og Billetter får den samme fargen som <h1>. Hvorfor, når du ikke har skrevet noen style på dem?
varkonserten.html
<h1>Vårkonserten</h1>
<p>Korpset, koret og skolebandet spiller i aulaen 24. april klokka 19.</p>
<h2>Program</h2>
<ol>
  <li>Skolekorpset</li>
  <li>Koret</li>
  <li>Skolebandet</li>
</ol>
<h2>Billetter</h2>
<p>Voksne: 150 kr</p>
<p>Elever: gratis</p>
  1. Legg til en regel som gir alle <p> skriftstørrelsen 18px. Bruk kodelinjene nedenfor.
  • font-size: 18px;
  • }
  • p {
  1. Legg til style="color: #ff8c42;" på <h1> igjen. Hvilken farge får overskriften nå? Fjern attributtet igjen.

Står det både et style-attributt og en regel i <style> for det samme elementet, bestemmer style-attributtet.

  1. Gi <li> en egen farge med en ny regel. Sjekk kontrasten.

5.5 Elementvelgere

varkonserten.html
nav a {
  color: #ff8c42;
}

nav a:hover {
  color: #ffd166;
}

Reglene du skrev i 5.4, har elementvelgere. En elementvelger er navnet på et element, som p, og gjelder for alle elementer av den typen. nav a gjelder for alle <a> som ligger inne i en <nav>.

  1. Les koden ovenfor. Gjett hvilke elementer på siden som får hver av de to reglene. Hva tror du :hover betyr?
  2. Legg til reglene nederst i <style>-elementet.
  3. Utvid <body> som vist nedenfor. Last inn siden på nytt, og sjekk om du gjettet riktig.
varkonserten.html
<nav>
  <ul>
    <li><a href="#program">Program</a></li>
    <li><a href="#billetter">Billetter</a></li>
  </ul>
</nav>
<h1>Vårkonserten</h1>
<p>Korpset, koret og skolebandet spiller i aulaen 24. april klokka 19.</p>
<p>Spørsmål? Send en e-post til <a href="mailto:konsert@skolen.example">konsert@skolen.example</a>.</p>
  1. Hold musepekeren over lenkene i <nav>, og over e-postlenken. Hva er forskjellen? Hvorfor?
  2. Klikk på lenkene i <nav>. Skjer det noe? Du får svaret i 5.7.

Nedenfor ser du fire regler. Bare én av dem gir lenkene i <nav> en ny farge, uten å endre e-postlenken.

Kode A
nav, a {
  color: #ff8c42;
}
Kode B
nav a {
  color: #ff8c42;
}
Kode C
a nav {
  color: #ff8c42;
}
Kode D
nav.a {
  color: #ff8c42;
}
  1. Finn regelen som virker. Prøv de tre andre i <style>, én om gangen. Hvilke elementer får fargen med hver av dem?
  2. Gi e-postlenken en egen farge med en regel der velgeren har mellomrom. Sjekk kontrasten.

5.6 Klassevelgere

varkonserten.html
.pris {
  font-weight: bold;
}

Skal bare noen av elementene ha en stil, gir du dem en klasse med attributtet class. En klassevelger begynner med punktum, og gjelder for alle elementer med klassen. Navnet på klassen bestemmer du selv.

  1. Les koden ovenfor. Hvilke elementer får regelen?
  2. Legg til regelen nederst i <style>-elementet.
  3. Erstatt de to avsnittene under Billetter med de markerte kodelinjene nedenfor. Last inn siden på nytt.
varkonserten.html
<h2>Billetter</h2>
<p>Voksne: <span class="pris">150 kr</span></p>
<p>Elever: <span class="pris">gratis</span></p>
  1. Elementet <span> gjør ingenting med teksten. Hvorfor bruker vi det her?
  2. Gi også klokkeslettet i det første avsnittet klassen pris. Hva skjer? Er pris et godt navn på klassen nå? Finn et bedre navn, og endre det både i HTML-koden og i regelen.

Nedenfor ser du fire regler. Bare én av dem gjelder for elementene med class="pris".

Kode A
pris {
  font-weight: bold;
}
Kode B
.pris {
  font-weight: bold;
}
Kode C
.Pris {
  font-weight: bold;
}
Kode D
#pris {
  font-weight: bold;
}
  1. Finn regelen som virker. Hva leter hver av de tre andre etter?

Den samme klassen kan brukes på mange elementer, også på elementer av ulik type. Et element kan ha flere klasser, med mellomrom mellom: class="pris gratis".

  1. Lag en klasse som heter gratis, som gir teksten fargen #ffd166. Gi prisen for elever både klassen pris og klassen gratis.

5.7 Id-velgere

varkonserten.html
#program {
  background-color: #2b2950;
}

En id er et navn som bare ett element på siden kan ha. En id-velger begynner med #, og gjelder for det ene elementet med den id-en. En id har også en annen oppgave: Den er et sted på siden som en lenke kan gå til, slik du lærte i 2.2.

  1. Les koden ovenfor. Hvilket element får bakgrunnsfargen?
  2. Legg til regelen nederst i <style>-elementet.
  3. Utvid <body> som vist nedenfor. Last inn siden på nytt, og sjekk om du gjettet riktig.
varkonserten.html
<section id="program">
  <h2>Program</h2>
  <ol>
    <li>Skolekorpset</li>
    <li>Koret</li>
    <li>Skolebandet</li>
  </ol>
</section>
<section id="billetter">
  <h2>Billetter</h2>
  <p>Voksne: <span class="pris">150 kr</span></p>
  <p>Elever: <span class="pris gratis">gratis</span></p>
</section>
  1. Klikk på lenkene i <nav>. Hva skjer nå, og hvorfor? Gjør vinduet lavt, slik at du ser forskjellen bedre.
  2. Gi også <section id="billetter"> den samme bakgrunnsfargen. Gjør det på to måter: med en id-velger til, og med en klasse som begge seksjonene har. Hvilken måte er best? Hvorfor?
  3. Gi begge seksjonene id="program", og valider siden, slik du lærte i 4.4. Hva sier validatoren? Rett feilen.
Velger Begynner med Gjelder for Bruk den når
elementvelger navnet på elementet alle elementer av den typen alle elementer av en type skal se like ut
klassevelger punktum, . alle elementer med klassen noen elementer skal se like ut
id-velger firkanttegn, # det ene elementet med id-en ett bestemt element skal ha en egen stil

Bruk helst elementvelgere og klasser til stil. Id-er trenger du til lenker inne på siden, og senere til JavaScript. Da er det ryddig at stilen ikke henger på dem.

Spør KI

Jeg lærer CSS. Hva er forskjellen på en elementvelger, en klassevelger og en id-velger? Gi meg et eksempel på når hver av dem passer best på en side for en konsert.

5.8 Skrift og tekst

varkonserten.html
body {
  font-family: Verdana, sans-serif;
  font-size: 1.125rem;
  line-height: 1.6;
}

h1 {
  font-family: Georgia, serif;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

Med font-family velger du skrifttype. Står det flere etter hverandre, bruker nettleseren den første som finnes på maskinen. Enheten rem er størrelsen på vanlig tekst i nettleseren.

  1. Les koden ovenfor, og gjett hvordan teksten endrer seg.
  2. Legg til deklarasjonene i regelen for body, og legg til regelen for h1. Last inn siden på nytt.
  3. Endre line-height: 1.6 til line-height: 1 og deretter til line-height: 3. Hvilken verdi er lettest å lese?
  4. Fjern text-transform: uppercase en stund. Hva gjorde den? Legg den tilbake.
  5. Endre Verdana til Tullefont, en skrift som ikke finnes. Hva skjer? Hva tror du sans-serif er til?
  6. Endre letter-spacing: 0.1em til 0.5em. Hva tror du enheten em betyr?

Bruk rem og ikke px til skriftstørrelser. Har brukeren stilt inn større tekst i nettleseren, blir teksten større med rem, men ikke med px.

  1. Legg til et <footer>-element med teksten «Arrangør: Musikklinja» og regelen nedenfor. Hva gjør hver av deklarasjonene?
varkonserten.html
footer {
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
}

  1. Lenker er understreket. Gi lenkene i <nav> regelen text-decoration: none;. Hvorfor bør lenker inne i vanlig tekst fortsatt være understreket?

  2. Elevrådet har sendt teksten til en plakat for talentshowet som ren tekst. Lag filen talentshow.html, merk opp teksten og gi den stil, slik at den ligner siden nedenfor. Velg fargene selv, og sjekk kontrasten.

talentshow.txt
Talentshow

Fredag 7. februar klokka 19 i aulaen

Vil du vise hva du kan? Meld deg på innen 20. januar. Alle typer talent er velkomne: sang, dans, magi, stand-up eller noe helt annet.

Juryen
Rektor Kari Holm
Musikklærer Lise Holm
Elevrådsleder Jonas Berg

Billetter
Elever: gratis
Voksne: 80 kr
Nettleser
Spør KI

Hvorfor anbefaler mange å bruke rem i stedet for px for skriftstørrelser i CSS? Forklar hva det har å si for en som har stilt inn større tekst i nettleseren.

5.9 Feilsøke CSS

varkonserten.html
h2 {
  color: #ffd166;
  font-weight: bolder
  text-transform: uppercase;
}

.pris {
  font-wieght: bold;
}

Når CSS-koden ikke virker, gir nettleseren ingen feilmelding. I utviklerverktøyene kan du likevel se hvilke regler nettleseren har brukt, og hvilke den har hoppet over. Kodelinjene ovenfor har to feil.

  1. Les koden ovenfor, og finn feilene.
  2. Lag feilene i <style>. Inspiser en <h2>, og se i fanen Styles. Hvordan viser utviklerverktøyene deklarasjonene som ikke virker?
  3. Inspiser en av prisene. Hvordan ser du at font-wieght er feil?
  4. I fanen Styles er det en avkrysningsboks foran hver deklarasjon. Fjern krysset foran color: #ffd166. Hva skjer?
  5. Legg til style="color: #ff8c42;" på en <h2>, og inspiser den. Øverst i fanen Styles står det element.style. Hva betyr det?
  6. Rett feilene, og fjern style-attributtet igjen.

En deklarasjon med strek over betyr at den ikke blir brukt. Enten er den feil, eller så har en annen regel bestemt over den. Et lite varseltegn betyr at nettleseren ikke forstår deklarasjonen.

CSS-koden kan også valideres, på samme måte som HTML-koden.

  1. Gå til jigsaw.w3.org/css-validator. Velg By direct input, lim inn kodelinjene ovenfor og trykk Check. Hvilke feil finner validatoren?
Spør KI

Denne CSS-regelen virker ikke: [lim inn regelen]. Ikke rett den for meg. Gi meg et hint om hva jeg bør se etter i utviklerverktøyene.

Oppsummering

I dette kapitlet har du gitt siden for Vårkonserten farger og skrift med CSS. Du har brukt style-attributtet og <style>, valgt farger med god kontrast, brukt velgere og feilsøkt CSS.

To måter å skrive CSS på

Attributtet style
<h1 style="color: #ffd166;">Vårkonserten</h1>
Elementet style
<head>
  <style>
    h1 {
      color: #ffd166;
    }
  </style>
</head>

Merk deg følgende:

  • En deklarasjon har en egenskap og en verdi, og slutter med semikolon: color: #ffd166;.
  • En regel har en velger og deklarasjoner mellom krøllparenteser.
  • style-attributtet bestemmer over regler i <style>.
  • CSS gir ingen feilmelding. Bruk utviklerverktøyene og validatoren for å finne feil.

Et stilsett

varkonserten.html
<style>
  body {
    font-family: Verdana, sans-serif;
    line-height: 1.6;
    background-color: #1d1b3a;
    color: #f5f0e6;
  }
  h1, h2 {
    color: #ffd166;
  }
  .pris {
    font-weight: bold;
  }
</style>
Nettleser

Velgere

Velger Gjelder for
p alle <p>
h1, h2 alle <h1> og alle <h2>
nav a alle <a> inne i en <nav>
.pris alle elementer med class="pris"
#program elementet med id="program"
a:hover lenker som musepekeren er over

Farger, skrift og tekst

Egenskap Eksempel
color #ff8c42, rgb(255, 140, 66), white
background-color #1d1b3a
font-family Verdana, sans-serif
font-size 1.125rem
font-weight bold
font-style italic
line-height 1.6
text-align center
text-decoration none
text-transform uppercase
letter-spacing 0.1em

Oppgaver

Oppgave 5.1

oppg1-rett-feil.html
<style>
  body
    background-color: #1d1b3a;
  }

  h1 {
    color: #ffd166
    font-size: 2.5rem;
  }

  pris {
    font-weight: bold;
  }
</style>

Koden ovenfor har tre feil. Skriv av koden i filen oppg1-rett-feil.html, og rett feilene. Bruk validatoren for å sjekke at du har funnet alle.

Oppgave 5.2

  • }
  • color: white;
  • .knapp {
  • font-weight: bold;
  • background-color: #2e7d32;

Sett sammen kodelinjene til en CSS-regel for en grønn knapp i filen oppg2-knapp.html. Gi en lenke klassen knapp. Sjekk kontrasten mellom hvit og #2e7d32.

Oppgave 5.3

Lag filen oppg3-farger.html med tre avsnitt. Gi hvert avsnitt sin egen tekstfarge med style-attributtet. Flytt deretter fargene over i et <style>-element, og bruk en klasse for hver farge.

Oppgave 5.4

Velg en tekstfarge og en bakgrunnsfarge til et nettsted du har lyst til å lage. Finn ut om kontrasten er god nok for vanlig tekst. Finner du to farger som er gode nok for overskrifter, men ikke for vanlig tekst?

Oppgave 5.5

Forklar forskjellen på font-weight, font-style og text-decoration. Gi et eksempel på når du vil bruke hver av dem.

B-oppgaver

Oppgave 5.6

Kopier mappen klubb fra kapittel 4 over til mappen kap05-css. Gi forsiden farger og skrift med et <style>-element. Bruk to eller tre farger med god kontrast, og minst én klasse og én id.

Oppgave 5.7

oppg7-hvem-vinner.html
<style>
  p { color: black; }
  .viktig { color: red; }
  #melding { color: blue; }
</style>
<p>Første avsnitt</p>
<p class="viktig">Andre avsnitt</p>
<p class="viktig" id="melding">Tredje avsnitt</p>
<p class="viktig" style="color: green;">Fjerde avsnitt</p>

Gjett hvilken farge hvert av de fire avsnittene får. Sjekk svaret ditt. Hva tror du bestemmer hvilken regel som vinner når flere regler gjelder for det samme elementet? Du lærer mer om dette i kapittel 7.

Oppgave 5.8

Finn en nettside med farger du liker. Bruk utviklerverktøyene til å finne fargekodene for tekst, bakgrunn og lenker. Sjekk kontrasten mellom dem, og vurder om siden har god nok kontrast. Finn også ut hvordan en fargekode som #ff8c42 er bygd opp, og hvorfor den største verdien i hvert par er ff.

Oppgave 5.9

Undersøk fargefunksjonen hsl(). Lag filen oppg9-hsl.html med fem nyanser av den samme fargen, der du bare endrer det siste tallet, og bruk dem på fem avsnitt. Forklar hvorfor hsl() kan være lettere å bruke enn # når du skal lage lysere og mørkere utgaver av en farge.