Å vite forskjellen på eksterne og interne stiler og hvordan disse overlapper hverandre er nødvendig for å få kontroll på CSS. Når skal du bruke det ene og når skal du bruke det andre? Og hva skjer om du bruker begge deler?
Eksterne stiler
Eksterne stiler er stiler du lagrer i et CSS-dokument (.css) og som du linker inn i HTML-dokumentet som vist her:
<head> <link rel="stylesheet" type"text/css" href="minestiler.css"> </head>
Eksempel på en ekstern .css-fil
h1 {color:#000;}
p {font-size:100%;}
body {background-color: #CCC;}
En CSS-fil skal ikke inneholde noe annet enn definisjonen av stilene. Altså, ingen HTML-kode.
Hvor er eksterne stiler tilgjengelig?
Disse stilene er i prinsippet tilgjengelig for alle dokumentene dine, det vil si de er tilgjengelig for alle dokumenter du linker til CSS-filen slik som vist over.
Interne stiler
Interne stiler er stiler du oppretter/lagrer internt i et HTML-dokument. Disse legges i head-blokka øverst i dokumentet slik som vist nedenfor.
<head>
<style type="text/css">
h1 {color:#000;}
p {font-size:100%;}
body {background-color: #CCC;}
</style>
</head>
Hvor er interne stiler tilgjengelig?
Interne stiler er kun tilgjengelig i det HTML-dokumentet de er opprettet i. Interne stiler egner seg derfor for unike stiler for et dokument eller om du ønsker å overstyre en ekstern stil (se nedenfor).
Overlappende stiler
Ok, så vi kan lagre stiler eksternt (i .css) eller internt (i .html). Men, hva skjer dersom vi har samme stil både eksternt og internt? La oss si vi har opprettet en stil for h2 både eksternt og internt som vist nedenfor:
Ekstern stil:
h2
{
color: #CCC;
text-align:left;
font-size:130%;
}
Intern stil:
h2
{
font-size:150%;
}
På siden med den interne stilen og som også er linket til den eksterne .css-filen, vil h2 se slik ut:
color: #CCC; text-align:left; font-size:150%;
Siden interne stiler overstyrer eksterne stiler, vil de egenskapene satt på den interne stilen gjelde uansett. Men, siden det finnes egenskaper i den eksterne stilen som ikke er definert i den interne, får vi her en kombinasjon av de to stilene. Den interne stilen arver altså egenskaper fra den eksterne.
Rekkefølge på stiler og hvordan dette påvirker resultatet
Stiler kan opprettes i
- HTML-dokumentet (dette kalles inline styles og jeg har med vilje ikke omtalt dette tidligere i denne artikkelen, av den enkle grunn at dette bør du la vær å bruke)
- i head-blokka i HTML-dokumentet (intern stil)
- i en ekstern .css-fil (merk at du kan ha flere .css-filer linket til samme html-dokument)
Så, hvilken stil brukes dersom det er mer enn en stil definert for et element?
Du kan ta utgangspunkt i følgende generelle regel, hvor nummer 4 har høyest prioritet:
- standard i nettleser
- ekstern .css-fil
- interne stiler (i head-blokka)
inline style (som jeg altså har utelatt fra denne artikkelen)
Dette betyr at en inline stil har høyest prioritet, det som er satt på denne stilen overstyrer alt annet. Deretter kommer interne stiler, som igjen overstyrer eksterne stiler, som igjen overstyrer standard i nettleseren.
Det finnes andre mer kompliserte regler jeg ikke kommer inn på her, men forholder du deg til denne listen har du god kontroll i de aller fleste situasjoner.
Konklusjon
Bruk eksterne stiler så mye som mulig, da disse vil være tilgjengelig for alle sidene du har linket til .css-filen. Dette gjør opprettelse av nye sider og vedlikehold av eksisterende sider enklere.
Bruk interne stiler dersom du har behov for å overstyre en ekstern stil. I noen tilfeller kan det være du har behov for en unik formattering på en side (som ikke nødvendigvis overstyrer en ekstern stil), men du vet at akkurat dette vil du ikke ha behov for å gjøre på noen andre sider, da kan du også bruke en intern stil.
Qross tilbyr en rekke kurs for deg som ønsker å lære mer om CSS. Vi har kurs som går spesifikt på CSS og CSS3, og vi har kurs for deg som ønsker å bruke Adobe Dreamweaver editor.
Ta en titt på vår kursoversikt: www.qross.no/kurs/ eller kontakt oss på kurs@qross.no eller 22 07 00 90 om du har noen spørsmål knyttet til kurs.