Basis webdesign med XHTML og CSS/Lav din CSS fil

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

Indtil vidre har vi kun beskeftiged 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 gelde for. Derudover er der selve reglerne som er en property med en value. Synkatsen 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 regl der skal gælde for den mellem "{" og "}". Property'en color, som styre tekst farven, bliver valgt og sat til green (engelse 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å gelder 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 udnuttet så prøv CSSZengarden.com. Her kan du se den samme side med mange forskelling CSS filer og se den store forskel.

Næste kapitel: Basis_webdesign_med_XHTML_og_CSS/Hvad_nu?.