Hvordan man opretter CSS

Hvordan man indsætter et stilark

Når en stilark læses, formaterer browseren HTML-dokumentet efter det. Der er tre måder at indsætte en stilark på:

Eksterne stilark

Når stilarter skal anvendes på mange sider, er eksterne stilark det ideelle valg. Når du bruger eksterne stilark, kan du ændre hele stedets udseende ved at ændre én fil. Hver side bruger <link>-etiketten for at linke til stilarket. <link>-etiketten findes i (dokumentets) hoveddel:

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

Browseren læser stildeklarationerne fra filen mystyle.css og formaterer dokumentet efter dem.

Eksterne stilark kan redigeres i ethvert tekstredigeringsprogram. Filen må ikke indeholde nogen html-taggene. Stilarkene skal gemmes med .css-udvidelsen. Her er et eksempel på en stilarkfil:

hr {color: sienna;}
p {margin-left: 20px;}
body {background-image: url("images/back40.gif");}

Undlad at lade der være et mellemrum mellem værdien og enheden. Hvis du bruger "margin-left: 20 px" i stedet for "margin-left: 20px", fungerer det kun i IE 6, men ikke i Mozilla/Firefox eller Netscape.

Intern stilark

Når en enkelt dokument har brug for specielle stilarter, bør du bruge en intern stilark. Du kan definere en intern stilark ved hjælp af <style>-etiketten i dokumentets hoveddel, som vist her:

<head>
<style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

Indlejrede stilarter

Da fremtoning og indhold blander sig sammen, mister indlejrede stilarter mange af fordelene ved stilarter. Brug denne metode med forsigtighed, for eksempel når stilen kun skal anvendes én gang på et element.

For at bruge indlejrede stilarter, skal du bruge style-attributten inden for de relevante etiketter. Style-attributten kan indeholde alle CSS-ejenskaber. Dette eksempel viser, hvordan du kan ændre afsnittets farve og venstre ekstern kant:

<p> style="color: sienna; margin-left: 20px">
Dette er en afsnit
</p>

Flere stilarter

Hvis nogle egenskaber er defineret med samme vælger i forskellige stilskemaer, så vil værdierne blive arvet fra det mere specifikke stilskema.

For eksempel har den eksterne stilskema tre egenskaber for h3 vælgeren:

h3 {
  color: rød;
  text-align: venstre;
  font-size: 8pt;
  }

og den interne stilskema har to egenskaber for h3 vælgeren:

h3 {
  text-align: højre; 
  font-size: 20pt;
  }

Hvis denne side med den interne stilskema samtidig er forbundet med den eksterne stilskema, så vil h3 få følgende stil:

color: rød; 
text-align: højre; 
font-size: 20pt;

Farveegenskaben vil arves fra den eksterne stilskema, mens tekstafstivning (text-alignment) og skriftstørrelse (font-size) vil blive erstattet af regler i den interne stilskema.