Meny: Hovedsiden; Om Martin; Ta kontakt; Foto; RSS

Hvordan bruker jeg CSS?

Som nevnt innledningsvis, er det flere måter å implementere CSS på:

I hver nettside
Med denne teknikken skriver man alle CSS-instruksjoner i hodet på hver enkelt nettside ((X)HTML-dokument). Egner seg hovedsaklig for nettsider som ikke inngår i en overordnet profil. Se eksempel lenger ned i artikkelen.
I enkeltelementer på nettsiden.
På denne måten kan man for eksempel overstyre eksisterende stiler, dersom man ønsker design som avviker fra det opprinnelige. Se eksempel lenger ned i artikkelen.
Koble hver nettside til en ekstern fil
Her lager man en separat CSS-fil som man lenker til i hodet på (X)HTML-dokumentet. Denne måten er å foretrekke for et gjennomgående design på et helt nettsted. Ved å gjøre endringer i CSS-filen, vil designet være gjeldende umiddelbart i alle (X)HTML-dokument som har lenket til denne. Se eksempel lenger ned i artikkelen.

Eksempler

Her viser jeg tre eksempler; ett fra hver av alternativene nevnt over. Merk at teksten /* CSS-instruksjoner skrives her */ erstattes med CSS-instruksjoner.

I hver nettside

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<style type="text/css">
/* CSS-instruksjoner skrives her */
</style>
</head>
<body>
</body>
</html>

I enkeltelementer på nettsiden

<p style="/* CSS-instruksjoner her */">Tekst her.</p>

Koble hver nettside til en ekstern fil

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Untitled</title>
<link rel="stylesheet" type="text/css" href="fil.css" />
</head>
<body>
</body>
</html>

Hvorpå man i fil.css skriver CSS-instruksjoner.

Hovedsaklig henger (X)HTML sammen med et (X)HTML-dokument på følgende måte:

CSS-modell

Dersom det finnes to forekomster av et statement, for eksempel både i en ekstern fil, samt i et (X)HTML-dokument, vil nettleseren prioritere i følgende rekkefølge:

CSS-instruksjon i (X)HTML-elementet
CSS-instruksjon i (X)HTML-elementets hode
CSS-instruksjon i ekstern fil
CSS-instruksjon etter nettleserens standard

I listen overstyrer nummer 1 nummer 2, nummer 2 nummer 3 og nummer 3 nummer 4.

Neste: Innhold i CSS