Ved at bruge denne side acceptere du samtidig Brugbarts og vores partneres brug af cookies.

Læs mere

En Indledning til CSS

Denne indledning til CSS viser hvordan man angiver sine CSS egenskaber.

Redigeret: 2015-05-10 08:30

Når man stiler (styler) sine sider bruges Cascading Style Sheets (CSS), det mulig gøre en lang række ting. Alt fra at opdele siden i flere kolonner, helt ned til at angive tekst-størrelse og font-type.

Inline Styles

Inline eller Linjestil angives ved brug af Style attributten - det er dog en af de dårligste måder at angive stil på, idet at man kommer til at angive samme stil mange gange igennem HTMLen, og da det ikke er alt man kan ændre. Linjestil angives på følgende måde:

<p><a href="about.html"><img src="EtBillede.jpg" alt="Bare Et Billede" style="border:0;"></a></p>

Ovenstående vil fjerne kanten på billedet, ved brug af border: 0;, og style attributten.

Embedded Styles

En anden og bedre måde at anvende stil på, er ved brugen Integreret Stil, eller såkaldte Interne Stilark - det er CSS koder som inkluderes i head sektionen i en side eller dokument. Eks.

<style type="text/css">
a img {
  border: 0;
}
</style>

Det fulde eksempel vil altså komme til at se således ud:

<!DOCTYPE html>
<html lang="da">

  <head>
    <title>Min første Hjemmeside</title>
    <style type="text/css">
    a img {
     border: 0;
    }
    </style>
  </head>

  <body>
    <p>Min første hjemmeside</p>
    <p><a href="about.html"><img src="EtBillede.jpg" alt="Bare Et Billede"></a></p>

  </body>

</html>

External StyleSheets

Også kaldet Eksterne Stilark, er den bedste metode man kan bruge, også da Eksterne Stilark bliver husket (Cached) af browseren, det betyder den nødvendigvis ikke behøver indlæse dem vær gang den besøger en side, hvilket spare båndbrede for serveren. Eksterne StilArk bliver indsat enten med Link Elementet i head sektionen, eller med @import i den Integreret Stil.

Ved brug af Link Elementet

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

Ved brug af @import

<style type="text/css">
  @import url("StyleSheet.css");
</style>

Husk at deres placering skal være i head sektionen, det er forbudt at bruge andet end LinjeStil i body sektionen.

En Indledning til HTML - Paragraffer, Overskrifter og sektioner i HTML