CSS grundlæggende syntaks

CSS syntaks

CSS-regler består af to hoveddele: vælgeren og en eller flere deklarationer.

selector {deklaration1; deklaration2; ... deklarationN }

Vælgeren er typisk det HTML-element, du ønsker at ændre stil på.

Hver deklaration består af en egenskab og en værdi.

Egenskaber (property) er de stilattributter (style attribute), du ønsker at indstille. Hver egenskab har en værdi. Egenskaber og værdier adskilles af et kolon.

selector {property: value}

Denne linje kode definerer farven på teksten i h1-elementet som rød og sætter skriftstørrelsen til 14 pixel.

I dette eksempel er h1 vælgeren, farve og skriftstørrelse er egenskaber, og rød og 14px er værdier.

h1 {farve: rød; skriftstørrelse: 14px;}

Denne illustration viser strukturen på det foregående kodeafsnit:

CSS syntaks

Tip:Brug klamme for at omgive deklarationerne.

Forskellige skrivemåder og enheder

Udover engelske ord som red, kan vi også bruge de sekventielle farveværdier #ff0000:

p {farve: #ff0000; }

For at spare bytes kan vi bruge CSS's kortform:

p {farve: #f00; }

Vi kan bruge RGB-værdier på to måder:

p {farve: rgb(255,0,0); }
p {farve: rgb(100%,0%,0%); }

Bemærk, at når du bruger RGB-procent, skal du skrive procenttegnene, selvom værdien er 0. I andre tilfælde behøver du dog ikke gøre det. For eksempel, når størrelsen er 0 pixel, behøver du ikke at bruge px-enheden efter 0, fordi 0 er 0, uanset enheden.

Kom ihjem til at skrive anførselstegnene

Tip:Hvis værdien består af flere ord, skal værdien indgives i anførselstegn:

p {font-family: "sans-serif";}

Flere deklarationer:

Tip:Hvis du vil definere flere deklarationer på én gang, skal hver deklaration adskilles med semikolon. Nedenstående eksempel viser, hvordan du definerer en centreret tekst med rødt skrift. Sidste regel er, at der ikke skal bruges semikolon, fordi semikolon er en adskiller, ikke en afslutningstegn. Dog bruger de fleste erfarne designere at tilføje semikolon ved slutningen af hver deklaration, hvilket gør det lettere at undgå fejl, når du tilføjer eller fjerner deklarationer fra eksisterende regler. Som dette:

p {tekstjustering: sentrum; color:red;}

Du bør beskrive kun én egenskab pr. linje, hvilket forbedrer læsbarheden af stildefinitionen, som f.eks. her:

p {
  text-align: center;
  color: black;
  font-family: arial;
}

Mellemrum og store/små bogstaver

De fleste stilskemaer indeholder ikke kun én regel, og de fleste regler indeholder ikke kun én deklaration. Brug af flere deklarationer og mellemrum gør stilskemaet lettere at redigere:

body {
  color: #000;
  background: #fff;
  margin: 0;
  padding: 0;
  font-family: Georgia, Palatino, serif;
  }

Inkludering af mellemrum påvirker ikke CSS's funktionalitet i browseren, ligesom det er tilfældet med XHTML, er CSS ikke følsom over for store og små bogstaver. Der er dog en undtagelse: Hvis det gælder at arbejde sammen med HTML-dokumenter, er class- og id-navne følsomme over for store og små bogstaver.