7 Et eget stilark for hele nettstedet

I dette kapitlet lager du nettstedet til Turlaget. Alle sidene skal se ut som de hører sammen, og derfor samler du CSS-koden i én fil. Lagre alt du lager i dette kapitlet i mappen kap07-stilark.

7.1 Flytte CSS til en egen fil

turlaget/index.html
<head>
  <meta charset="utf-8">
  <title>Turlaget</title>
  <link rel="stylesheet" href="stil.css">
</head>
turlaget/stil.css
body {
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.6;
  background-color: #f7f7f2;
  color: #2b2d42;
}

h1, h2 {
  color: #1f5f8b;
}

Et <style>-element gjelder bare for den siden det står på. Derfor skriver vi CSS-koden i en egen fil, et stilark, som alle sidene henter med <link> i <head>.

  1. Les koden ovenfor. Hvilken kodelinje henter stilarket?
  2. Lag mappen turlaget med filene index.html og stil.css. Skriv koden ovenfor. Forsiden skal ha en <header> med overskriften Turlaget og en meny med lenkene Forside, Turer og Om turlaget, og et <main> med et avsnitt om laget.
  3. Åpne forsiden i nettleseren. Har siden fått fargene fra stilarket?
  4. Lag siden turer.html med den samme <head> og <header>. I <main> skal det stå en tabell over tre turer med dato, mål og vanskelighetsgrad. Får siden den samme stilen?
  5. Endre fargen på overskriftene i stil.css. Sjekk at fargen endres på begge sidene.

Et stilark inneholder bare CSS-regler. Skriver du <style> eller andre HTML-tagger i stil.css, virker ikke regelen som kommer rett etter.

  1. Inspiser en overskrift. Hvor i fanen Styles ser du at regelen kommer fra stil.css? Klikk på filnavnet. Hva skjer?

7.2 Stilark og undermapper

Mappe
turlaget
├── index.html
├── turer.html
├── stil.css
├── bilder
│   └── fjell.jpg
└── sider
    └── om-turlaget.html

Adressen i href på <link> er en relativ sti, på samme måte som adressene i lenker og bilder. Siden om-turlaget.html ligger i mappen sider, og stilarket ligger én mappe opp.

  1. Lag mappen sider og siden om-turlaget.html med den samme <header> som de andre sidene. Hvilke adresser i menyen må endres?
  2. Nedenfor ser du fire <link>-tagger til sider/om-turlaget.html. Bare én av dem virker.
Kode A
<link rel="stylesheet" href="stil.css">
Kode B
<link rel="stylesheet" href="../stil.css">
Kode C
<link href="../stil.css">
Kode D
<style src="../stil.css"></style>
  1. Finn kodebiten som virker. Forklar hvorfor de tre andre ikke virker.
  2. Legg til den riktige <link>-taggen i sider/om-turlaget.html. Sjekk at siden får stilen.

Ser en side ut som om den ikke har noe CSS, er adressen i <link> ofte feil. Åpne fanen Network i utviklerverktøyene, og last inn siden på nytt. En fil som ikke blir funnet, står med rødt.

Når alle sidene bruker det samme stilarket, får en ny side riktig utseende med en gang. Du trenger bare å merke opp teksten riktig.

  1. Turlaget har sendt teksten til en ny side som ren tekst. Lag nybegynner.html i mappen sider med den samme <head> og <header>, og merk opp teksten i <main>. Ikke skriv ny CSS. Ser siden ut som resten av nettstedet?
nybegynner.txt
Tur for nybegynnere

Er du ny i Turlaget? Hver høst starter vi med en enkel tur der alle kan være med.

Hva skal jeg ha med?
gode sko
regntøy
matpakke og drikke

Turen
Vi går fra parkeringsplassen ved Fjellstua klokka 10. Turen er seks kilometer lang og tar omtrent tre timer.

Påmelding
Send en e-post til turlaget@skolen.example innen torsdag.
  1. Legg til en lenke til den nye siden i menyen på alle sidene. Hvorfor er det mer arbeid å legge til en lenke i menyen enn å endre en farge?

7.3 Hvilken regel vinner?

turlaget/stil.css
td {
  color: #2b2d42;
}

.full {
  color: #b3261e;
}

td {
  color: #1f5f8b;
}

Ofte gjelder flere regler for det samme elementet. Da betyr det mest hvor spesifikk velgeren er, slik tabellen viser. Er velgerne like spesifikke, vinner regelen som står sist.

Velger Spesifisitet
style-attributt høyest
#id høy
.klasse og :hover middels
element, som td lav
  1. Les koden ovenfor. Gjett hvilken farge en vanlig celle i turtabellen får, og hvilken farge en celle med class="full" får.
  2. En av turene er full. Gi cellen med vanskelighetsgraden for den turen klassen full, og legg til reglene nederst i stil.css. Sjekk om du gjettet riktig.
  3. Inspiser en vanlig celle. Hvilke av de tre reglene er streket over i fanen Styles? Hvorfor?
  4. Flytt regelen .full nederst i stilarket. Endrer det noe? Forklar.
  5. Fjern den siste regelen for td igjen.

Står <link> og <style> på den samme siden, gjelder de samme reglene: Det som kommer sist, vinner når velgerne er like spesifikke.

Spør KI

Forklar hva spesifisitet betyr i CSS. Gi meg fire par med CSS-regler, ett om gangen, og la meg gjette hvilken regel som vinner. Si fra om jeg har rett, og forklar hvorfor.

7.4 Arv

turlaget/stil.css
body {
  font-family: Arial, Helvetica, sans-serif;
  color: #2b2d42;
  border: 3px solid #1f5f8b;
}

Noen egenskaper arves. Gir du <body> en skrift og en farge, får alle elementene inne i <body> den samme skriften og fargen, hvis ikke en annen regel bestemmer noe annet. Egenskaper som har med boksen å gjøre, som border, padding og margin, arves ikke.

  1. Les koden ovenfor. Gjett hvilke elementer på siden som får kanten.
  2. Legg til border: 3px solid #1f5f8b; i regelen for body. Får avsnittene og overskriftene kant? Fjern kanten igjen.
  3. Inspiser et avsnitt. Langt nede i fanen Styles står det Inherited from body. Hva betyr det?
  4. Lenkene har ikke samme farge som teksten rundt. Inspiser en lenke, og finn ut hvorfor.
  5. Lag en <footer> med en e-postlenke på alle sidene, og regelen footer a { color: inherit; }. Hva gjør verdien inherit?
Arves Arves ikke
color, font-family, font-size, font-weight, line-height, text-align border, padding, margin, width, height, background-color

Bruk arv til å skrive mindre CSS. Gi <body> skriften og fargen som skal gjelde mest, og lag egne regler bare for det som skal være annerledes.

7.5 Lenker og meny med stil

turlaget/stil.css
nav li {
  display: inline;
}

nav a {
  display: inline-block;
  padding: 0.5rem 0.75rem;
  color: #1f5f8b;
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  background-color: #e3eef6;
}

nav a.aktiv {
  font-weight: bold;
  border-bottom: 3px solid #1f5f8b;
}

En lenke kan ha ulik stil etter hva brukeren gjør med den. :hover gjelder når musepekeren er over lenken, og :focus når lenken er valgt med . Klassen aktiv gir vi lenken til den siden brukeren er på.

  1. Les koden ovenfor, og gjett hvordan menyen kommer til å se ut.
  2. Legg til reglene i stil.css.
  3. Gi lenken Forside klassen aktiv i index.html, og lenken Turer klassen aktiv i turer.html. Gjør det samme på siden om turlaget.
  4. Hvorfor har vi gitt lenkene display: inline-block og fyll? Prøv å klikke på lenkene med og uten fyllet.
  5. Klikk på siden, og trykk flere ganger. Kan du se hvilken lenke som er valgt?

Fjern aldri streken nettleseren tegner rundt en lenke som er valgt med , uten å lage en annen tydelig markering. Uten markering vet ikke den som bruker tastatur, hvor hun er på siden.

  1. Lag en regel for lenker inne i <main>, med en farge som har god kontrast. Behold understrekingen.
  2. Velgeren a:visited gjelder for lenker brukeren har besøkt. Gi besøkte lenker i <main> en litt annen farge.

7.6 Bakgrunnsbilder

turlaget/stil.css
header {
  background-color: #1f5f8b;
  background-image: url("bilder/fjell.jpg");
  background-size: cover;
  background-position: center;
  padding: 3rem 1rem;
}

header h1 {
  color: white;
}

Med background-image legger du et bilde bak innholdet i en boks. Adressen i url() er en relativ sti fra stilarket, og ikke fra HTML-siden.

  1. Les koden ovenfor, og gjett hvordan toppen av siden kommer til å se ut.
  2. Lag mappen bilder, og legg inn et bilde av et fjell som du har tatt selv eller har lov til å bruke. Gi det navnet fjell.jpg. Legg til reglene i stil.css.
  3. Vises bildet på index.html? Vises det på sider/om-turlaget.html? Forklar hvorfor adressen i url() er den samme for begge sidene.
  4. Endre background-size: cover til contain. Hva skjer? Endre tilbake.
  5. Er det god kontrast mellom den hvite overskriften og bildet? Hvorfor er det vanskelig å måle?
  6. Endre background-position: center til top og deretter til bottom. Hva skjer?

Et bakgrunnsbilde har ingen alternativ tekst, og skjermleseren hopper over det. Bruk bakgrunnsbilder bare til pynt. Et bilde som viser noe viktig, skal være et <img>-element.

  1. Bildet kan gjøre overskriften vanskelig å lese. Gi overskriften en bakgrunnsfarge og fyll, slik at teksten blir lett å lese uansett hva bildet viser.
  2. background-color står foran background-image. Endre adressen til et bilde som ikke finnes. Hvorfor er det lurt å ha en bakgrunnsfarge også?

7.7 Et ryddig stilark

turlaget/stil.css
/* Farger for hele nettstedet */
:root {
  --fjell: #1f5f8b;
  --mork: #2b2d42;
  --lys: #f7f7f2;
}

/* Generelt */
body {
  background-color: var(--lys);
  color: var(--mork);
}

h1, h2 {
  color: var(--fjell);
}

Når stilarket blir langt, er det lurt å rydde. Tekst mellom /* og */ er en kommentar i CSS. Fargene kan du samle i variabler øverst. En variabel begynner med --, og du bruker den med var().

  1. Les koden ovenfor. Hvilken farge får <h1>? Hva tror du :root er?
  2. Lag variablene øverst i stil.css, og erstatt alle fargekodene i stilarket med variabler.
  3. Endre --fjell til #2a6f4e. Hva skjer på alle sidene? Endre tilbake.
  4. Del stilarket i deler med kommentarer, for eksempel Farger, Generelt, Toppen, Menyen, Hovedinnholdet, Tabeller og Bunnen. Flytt reglene til riktig del.

Skriv de generelle reglene først, som *, body og overskrifter, og de spesielle reglene etterpå. Da vinner de spesielle reglene når velgerne er like spesifikke.

Spør KI

Her er stilarket mitt: [lim inn stilarket]. Ikke skriv det om for meg. Foreslå hvordan jeg kan dele det i deler med kommentarer, og pek på regler som gjentar seg.

Oppsummering

I dette kapitlet har du laget et nettsted der alle sidene bruker det samme stilarket. Du har lært hvilken regel som vinner, hva som arves, og hvordan du holder orden i et stilark.

Tre måter å skrive CSS på

Attributtet style
<h1 style="color: #1f5f8b;">Turlaget</h1>
Elementet style
<style>
  h1 { color: #1f5f8b; }
</style>
Eget stilark
<link rel="stylesheet" href="stil.css">
Måte Hvor Gjelder for
style-attributt i starttaggen ett element
<style>-element i <head> én side
eget stilark i stil.css alle sidene som har <link>

Et ryddig stilark

turlaget/stil.css
/* Farger */
:root {
  --fjell: #1f5f8b;
}

/* Menyen */
nav a {
  color: var(--fjell);
  text-decoration: none;
}

nav a:hover,
nav a:focus {
  background-color: #e3eef6;
}

Merk deg følgende:

  • Adressen i href på <link> og i url() er relative stier. url() regnes fra stilarket.
  • En id slår en klasse, og en klasse slår et element. Er velgerne like spesifikke, vinner den som står sist.
  • Farge og skrift arves. Fyll, kant og marg arves ikke.
  • Lenker skal ha en tydelig markering når de er valgt med .

Oppgaver

Oppgave 7.1

oppg1-rett-feil/index.html
<head>
  <meta charset="utf-8">
  <title>Turer</title>
  <link rel="style" href="stil.css">
</head>
oppg1-rett-feil/stil.css
<style>
h1 {
  color: #1f5f8b;
}
</style>

Siden får ikke stilen fra stilarket. Lag mappen oppg1-rett-feil med de to filene, og rett de to feilene.

Oppgave 7.2

  • color: var(--gronn);
  • --gronn: #2e7d32;
  • }
  • :root {
  • h2 {
  • }

Sett sammen kodelinjene til en variabel og en regel som bruker variabelen.

Oppgave 7.3

oppg3-hvem-vinner.html
<style>
  #fjelltur { color: blue; }
  p { color: black; }
  .full { color: red; }
  p { color: green; }
</style>
<p class="full" id="fjelltur">Tur til Gaustatoppen</p>

Gjett hvilken farge avsnittet får. Forklar hvorfor. Hvilken farge får det hvis du fjerner id="fjelltur"? Sjekk svarene dine.

Oppgave 7.4

Forklar med egne ord hva arv er i CSS. Gi to eksempler på egenskaper som arves, og to som ikke arves.

Oppgave 7.5

Mappe
klubben
├── index.html
├── css
│   └── stil.css
├── bilder
│   └── bane.jpg
└── sider
    └── trening.html

Skriv adressen i href på <link> i index.html og i trening.html. Skriv også adressen i url() når stil.css skal bruke bane.jpg som bakgrunnsbilde.

B-oppgaver

Oppgave 7.6

Kopier mappen klubb fra kapittel 6 over til mappen kap07-stilark. Flytt all CSS-koden over i ett stilark som alle sidene bruker. Menyen skal vise hvilken side du er på, og fargene skal være variabler.

Oppgave 7.7

En side kan ha flere <link>-tagger. Lag mappen oppg7-to-stilark med to sider, stil.css med regler for begge sidene og spesiell.css med regler som bare gjelder for den ene siden. Hvilken rekkefølge må <link>-taggene ha? Lag en regel i spesiell.css som overstyrer en regel i stil.css, og forklar hvorfor den vinner.

Oppgave 7.8

Lag mappen oppg8-to-utseender med en side og to ulike stilark, lys.css og mork.css. Bytt mellom dem ved å endre adressen i <link>, uten å endre noe annet i HTML-koden. Hva forteller det deg om forskjellen på HTML og CSS?

Oppgave 7.9

Undersøk @media (prefers-color-scheme: dark). Lag en mørk utgave av stilarket til Turlaget ved å endre verdiene til fargevariablene inne i @media. Sjekk at kontrasten fortsatt er god nok. Hvordan tester du den mørke utgaven uten å endre innstillingene på datamaskinen?