Basis webdesign med XHTML og CSS/Lav din CSS fil

Der arbejdes på denne tekst i øjeblikket!
Vent venligst med at redigere den.

Indtil videre har vi kun beskæftiget os med XHTML, men nu skal vi til at lave noget CSS. CSS bruges til at lave layout.

CSS

Der er tre måder at bruge CSS på, vi vil kun bruge den ene. Den går ud på at man i <head> fortæller hvor CSS-filen ligger, altså vi inkludere den. Det gøres sådan:

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

Her siger vi til browseren at den skal finde filen "basis.css"

En CSS fil består af nogen "regler". Hver regl skal have en eller flere selector, der vælger hvad reglerne skal gælde for. Derudover er der selve reglerne som er en property med en value. Syntaksen er sådan:

selector {
property: value;
}

Her er et eksempel:

h1 {
color:green;
}
a,p {
font-family:Verdana;
font-size:12px;
}

Først vælger vi h1 og skriver den regel der skal gælde for den mellem "{" og "}". Property'en color, som styre tekst farven, bliver valgt og sat til green (engelsk for grøn). Derfor vil alle overskrifter på sider hvor du inkluder denne fil være grønne.

Vil du prøve det? [1] Så skal du:

1. Lav en fil og gem som "side1.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Dette er title på min hjemmeside</title>
    <link rel="stylesheet" href="basis.css" type="text/css" />
  </head>
  <body>
    <h1>
      Min første hjemmeside
    </h1>
    <p>
      Hej verden! Her er min hjemmeside!
    </p>
    <a href="side2.html">side2</a>
  </body>
</html>

2. Lav en fil og gem som "side2.html":

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
  <head>
    <title>Dette er title på min hjemmeside</title>
    <link rel="stylesheet" href="basis.css" type="text/css" />
  </head>
  <body>
    <h1>
      Dette er side to
    </h1>
    <p>
      Hej verden! Her er min hjemmeside!
    </p>
    <a href="side1.html">side1</a>
  </body>
</html>

3. Lav en fil og gem som "basis.css":

h1 {
color:green;
}
a,p {
font-family:Verdana;
font-size:12px;
}

4. Åben side1 i din browser

Hvis du nu går til side2 vil du se at din css regler også gælder der, fordi også har inkluderet den der. På den måde kan du ændre dit layout på alle side på en gang. Dette er smart hvis du har 100 sider.

Mere om propertys

Mere om selectors

Hvad kan det blive til?

Det du har lært nu er meget simpelt. Hvis du vil se CSS fuldt udnyttet så prøv CSSZengarden.com. Her kan du se den samme side med mange forskellige CSS filer og se den store forskel.

Næste kapitel: Basis_webdesign_med_XHTML_og_CSS/Hvad_nu?.