Koble CSS til HTML

Det finnes tre måter å legge til CSS på en HTML-side. Hver metode har sine fordeler og ulemper.

1. Ekstern CSS (anbefalt)

CSS-koden ligger i en egen fil med .css-endelse. HTML-filen lenker til denne filen.

HTML-fil (index.html)

<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <title>Min side</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hei verden!</h1>
    <p>Dette er en paragraf.</p>
</body>
</html>

CSS-fil (style.css)

h1 {
    color: blue;
}

p {
    font-size: 18px;
}

Eksempel

Filstruktur

📁 min-nettside/
├── 📄 index.html
└── 📄 style.css

Beste praksis

Ekstern CSS er den anbefalte metoden fordi:

Samme CSS kan brukes på flere HTML-sider
Lettere å holde orden på koden
Nettleseren kan cache (lagre) CSS-filen

CSS i undermappe

Ofte legger man CSS-filer i en egen mappe:

📁 min-nettside/
├── 📄 index.html
└── 📁 css/
    └── 📄 style.css

Da må du oppdatere stien:

<link rel="stylesheet" href="css/style.css">

2. Intern CSS

CSS-koden skrives inne i <style>-taggen i HTML-filens <head>.

<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <title>Min side</title>
    <style>
        h1 {
            color: blue;
        }

        p {
            font-size: 18px;
        }
    </style>
</head>
<body>
    <h1>Hei verden!</h1>
    <p>Dette er en paragraf.</p>
</body>
</html>

Når bruke intern CSS?

Intern CSS kan være nyttig for:

Små prosjekter med bare én side
Rask testing av stiler
Stiler som bare gjelder én spesifikk side

3. Inline CSS

CSS skrives direkte på elementet med style-attributtet.

<h1 style="color: blue;">Hei verden!</h1>
<p style="font-size: 18px;">Dette er en paragraf.</p>

Unngå inline CSS

Inline CSS bør unngås fordi:

Vanskelig å vedlikeholde
Kan ikke gjenbrukes
Blander HTML og CSS
Overstyrer annen CSS (kan skape problemer)

Sammenligning

Metode	Fil	Gjenbrukbar	Anbefalt
Ekstern	`.css`-fil	Ja	✅ Ja
Intern	I `<style>`	Nei	For små prosjekter
Inline	På elementet	Nei	❌ Nei

Link-taggen forklart

<link rel="stylesheet" href="style.css">

Attributt	Betydning
`rel="stylesheet"`	Forteller at dette er en CSS-fil
`href="../style.css"`	Stien til CSS-filen

Flere CSS-filer

Du kan lenke til flere CSS-filer:

<head>
    <link rel="stylesheet" href="reset.css">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="responsive.css">
</head>

Rekkefølge

CSS-filer lastes i rekkefølge. Stiler i senere filer kan overskrive tidligere stiler.

Prioritet (Specificity)

Når samme element har flere stiler, bestemmer CSS hvilken som "vinner". Se Selektorer for en mer detaljert forklaring.

1. Inline CSS        → Høyest prioritet
2. Intern CSS        → Middels prioritet
3. Ekstern CSS       → Lavest prioritet

<!-- Ekstern CSS sier: color: blue -->
<!-- Intern CSS sier: color: green -->
<h1 style="color: red;">Hvilken farge?</h1>
<!-- Svaret: RØD (inline vinner) -->

Praktisk eksempel

Filstruktur

📁 portfolio/
├── 📄 index.html
├── 📄 about.html
├── 📄 contact.html
└── 📁 css/
    └── 📄 style.css

index.html

<!DOCTYPE html>
<html lang="no">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Min Portfolio</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
        <h1>Velkommen</h1>
        <nav>
            <a href="index.html">Hjem</a>
            <a href="about.html">Om meg</a>
            <a href="contact.html">Kontakt</a>
        </nav>
    </header>
    <main>
        <p>Dette er min portfolio!</p>
    </main>
</body>
</html>

css/style.css

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}

header {
    background: #333;
    color: white;
    padding: 1rem;
}

nav a {
    color: white;
    margin-right: 1rem;
}

main {
    padding: 2rem;
}

Samme style.css brukes på alle tre HTML-sidene!

Oppsummering

Gjør dette	Ikke gjør dette
Bruk ekstern CSS	Bruk inline CSS overalt
Organiser filer i mapper	Ha all kode i én fil
Bruk beskrivende filnavn	Bruk `style1.css`, `style2.css`
Lenk CSS i `<head>`	Lenk CSS i `<body>`