Bruke CSS

Det er tre måter å bruke CSS med HTML: Inline, internt og eksternt.

Inline

Inline stiler legges rett på en HTML tag, som en style-attributt.
De kan se ut som dette:

<p style="color: red">text</p>

Og det vil gjøre det spesifikke avsnittet rødfarget.

Vi har et ønske om å holde presentasjon adskilt fra innhold, mens her blander vi det sammen. Inline stiler bør derfor unngåes hvis mulig.

Internt

Interne stilark brukes for en hel side. Inni head-elementet bruker man en style-tag for å omkranse alle stilene:

<!DOCTYPE html>
<html>
<title>CSS Example</title>
<style>

  p {
    color: red;
  }

  a {
    color: blue;
  }

</style>
</html>

Dette vil altså gjøre alle avsnitt få rød tekstfarge, og gi alle linker blå tekstfarge.

Selvom dette er ett steg bedre enn å legge style-attributt på alle tag’er, har vi fortsatt stiler i HTML-dokumentet. Da har vi bare én måte igjen, for å holde HTML og CSS adskilt, og det er …

Eksternt

Eksterne stilark brukes for ikke bare én, men flere websider på et nettsted. Man har da en egen, seperat CSS fil som bare ser slik ut:

p {
  color: red;
}

a {
  color: blue;
}

Hvis man lagrer fila som «style.css» i den samme mappa som en HTML-fil, så kan man hente inn stilarket slik:

<!DOCTYPE html>
<html>
<head>
  <title>CSS Example</title>
  <link rel="stylesheet" href="style.css">
...

Din tur

Lag en tom style.css fil i HTML-mappa di. Legg deretter dette til i HTML-fila, slik at vi får importert stilarket:

<!DOCTYPE html>
<html>
<head>
  <title>Min første webside</title>
  <link rel="stylesheet" href="style.css">
</head>
...

Lagre HTML-fila. Dette linker nå sammen CSS-fila med HTML-fila. CSS-fila er jo tom, så om du laster inn websiden på nytt vil du ikke se noe forskjell enda. Etterhvert som vi skal legge inn ting i CSS-fila vil du se at endringer ved å lagre fila og laste inn nettleseren på nytt, slik vi har gjort med HTML.