Introduktion til CSS

 

Hvad er CSS?

CSS står for Cascading Style Sheets og er et assisterende sprog til HTML. Hvis du ikke allerede kender til HTML så anbefales det, at du først læser om HTML, før du begiver dig videre med at lære hvad CSS er.

CSS benyttes til at danne den visuelle del af en hjemmeside. Det vil sige, at alle de elementer som er tilføjet på hjemmesiden ved hjælp af HTML kan styles for at gøre hjemmesiden mere visuelt interessant at se på. Man kan style mange forskellige aspekter af hvert element, bl.a. kan man ændre på skrifttyper, tekststørrelser, farver, baggrundsbilleder, skygger, placeringer og meget mere. Sagt på en anden måde, så er det HTML som skaber hjemmesidens struktur og CSS som skaber hjemmesidens udsmykning.

CSS blev opfundet i 1994 af Håkon Wium Lie, som fremlagde sproget til sin daværende kollega, Tim Berners-Lee, opfinderen af HTML og World Wide Web. Den første version af CSS, som hedder CSS1, blev udgivet kommercielt i 1996. Programmeringssproget er blevet opdateret sidenhen og bliver det stadigvæk helt frem til den dag i dag. CSS2 blev udgivet i 1998 og CSS3, som er den nuværende version, blev udgivet i 1999. 

 

Strukturen i CSS

Der er grundlæggende tre metoder hvorpå man kan tilføje CSS-koder til sin hjemmeside:

  • Inline styling
  • Internt style sheet
  • Eksternt style sheet

Alle tre metoder kan blive brugt samtidigt, men det anbefales at men generelt holder sig til én af dem. Der er en rækkefølge for, hvilke metoder der overskrider hvilke. Det vil sige, at hvis det samme element bliver stylet på to forskellige måder med to forskellige metoder, så vil én af metoderne overskride den anden metode:

  • Inline styling overskrider både internt og eksternt style sheet
  • Internt style sheet overskrider eksternt style sheet
  • Eksternt style sheet overskrider ikke nogle af de andre metoder

De tre metoder vil blive gennemgået her.

 

Inline styling

Den første metode er inline styling. Det betyder at man tilføjer CSS-koden direkte inde i HTML-filen ved hjælp af attributten style. Det vil se sådan her ud:

<h1 style = "color: blue; font-size: 20px;">Denne titel bliver farvet blå ved hjælp af inline styling!</h1>

På ovenstående kode tilføjede vi en overskrift med <h1>-tagget. Inde i åbningstagget tilføjede vi attributten style som vi satte til at være lig med teksten “color: blue; font-size: 20px;”. Denne tilføjelse medfører, at overskriftens farve bliver blå og overskriftens størrelse bliver 20 pixels. Selve koden som bestemmer hvordan elementet styles skal stå mellem to anførselstegn (” “).

 

Internt style sheet

Den anden metode er styling via et internt style sheet. Det betyder at man tilføjer hele sin CSS-kode inde imellem <head>-tagget i sin HTML-fil ved hjælp at tagget <style>. Det vil se sådan her ud:

<head>
  <style>
p {
color: green;
}
</style> </head>

I ovenstående eksempel er <style>-tagget blevet indsat inde i <head>-tagget. Koden som er inde i <style> skifter farven på alle paragraf-tekster til grøn. Læg mærke til, at “p” specificerer at CSS-koden gælder for alle <p>-elementer. På den måde kan man specificere hvilke elementer der skal styles. Imellem de to turborgklammer skal selve koden som bestemmer hvordan elementet skal styles angives.

 

Eksternt style sheet

Den sidste metode er styling via et eksternt style sheet. Denne metode anbefales her på siden, da det er den mest overskuelige af de tre valgmuligheder. Derudover overskrider de to andre metoder et eksternt style sheet, så hvis man hurtigt vil ændre på et element som allerede er ændret, så kan man altid overskride den tidligere kode med de andre metoder. Men det er selvfølgelig op til en selv hvilken metode man vil benytte.

I denne metode skriver man alle sine CSS-koder i en ekstern fil, som har filformatet “.css”, separat fra HTML-filen. De to filer skal kobles sammen ved hjælp af et tag som sættes ind imellem <head>-tagget i HTML-filen. Tagget kan ses på nedenstående kodestykke:

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

I kodestykket indtastes et <link>-tag. Læg mærke til at <link>-tagget ikke har noget luknings-tag. Inde i tagget er der tilføjet tre attributter. Den første attribut hedder href og den skal være lig med filnavnet på din CSS-fil og slutte med “.css”. Den næste attribut hedder type og specificerer den type dokument som du forbinder til. Den skal være lig med “text/css”. Den sidste attribut hedder rel og den beskriver forholdet mellem HTML- og CSS-filen. den skal være lig med “stylesheet”. Når alt det er indtastet, så har du forbundet din HTML- og CSS-fil.

Koden i den eksterne CSS-fil er opbygget således:

h1 {
  font-size: 20px;
  color: yellow;
}

p {
  color: green; 
}

I det ovenstående kodestykke styles <h1>-tagget til at have en tekststørrelse på 20 pixels og en gul tekstfarve. Derudover styles <p>-tagget til at have en grøn tekstfarve. Imellem de to turborgklammer skal selve koden som bestemmer hvordan elementet skal styles angives.

 

Indholdet på denne side

Denne side om CSS indeholder vejledninger til alle de vigtigste funktioner i CSS. Man kan få et overblik over de forskellige sider i den højre side-menu i toppen. Siderne er struktureret som et opslagsværk, så de er meget korte og præcise, så du derved let kan kopiere dem over til dine egne noter, hvis du skulle få behov for det. Opslagsværket om CSS er delt op i følgende kategorier:

  1. Udvælg elementer: Vælg hvilke HTML-elementer som vil style i CSS
  2. Farver: Lær hvordan man angiver farver på de forskellige elementer, samt hvordan man vælger de rigtige farver
  3. Typografi: Juster teksternes størrelse, type, vægt, position, linjehøjde, formatering og afstand
  4. Boks-modellen: Lær hvordan boks-modellen er bygget op samt hvordan man justerer de forskellige dimensioner i modellen
  5. Elementplacering: Juster elementernes placering på siden, samt hvordan de skal blive vist og hvordan de skal interagere med andre elementer

 

Gå videre til Udvælg elementer i CSS her →