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 . 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 -tagget. Inde i åbningstagget tilføjede vi attributten 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 -tagget i sin HTML-fil ved hjælp at tagget . Det vil se sådan her ud:

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

I ovenstående eksempel er -tagget blevet indsat inde i -tagget. Koden som er inde i skifter farven på alle paragraf-tekster til grøn. Læg mærke til, at “p” specificerer at CSS-koden gælder for alle -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 -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 -tag. Læg mærke til at -tagget ikke har noget luknings-tag. Inde i tagget er der tilføjet tre attributter. Den første attribut hedder og den skal være lig med filnavnet på din CSS-fil og slutte med “.css”. Den næste attribut hedder og specificerer den type dokument som du forbinder til. Den skal være lig med “text/css”. Den sidste attribut hedder 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 -tagget til at have en tekststørrelse på 20 pixels og en gul tekstfarve. Derudover styles -tagget til at have en grøn tekstfarve. Imellem de to turborgklammer skal selve koden som bestemmer hvordan elementet skal styles angives.

.Tekst_1 {
  line-height: 1.2;
}

.Tekst_2 {
  line-height: 30px;
}

Udvælg elementer i CSS

Indhold på denne side

Udvælg elementer i CSS

Når man styler sin hjemmeside med inline styling, så skriver man CSS-koden inde i det element man vil style, så med inline styling er det meget nemt at vælge hvilke elementer der skal styles. Når man derimod styler elementer ved hjælp af et internt eller eksternt style sheet, så skal man angive, hvilke elementer på hjemmesiden der skal styles. Heldigvis er det ikke så svært. Man skal bare vide hvilke metoder der kan benyttes til at udvælge de elementer der skal styles. Disse metoder vil blive gennemgået her.

Udvælg tag

I CSS kan man angive hvilke slags elementer som man vil style ved at benytte tag-navnet, som er navnet mellem taggets åbnings- og lukningsklamme (< >).

Hvis man f.eks. ville ændre på alle paragrafelementerne, så skal man skrive følgende:

p {
  color: green;
}

I ovenstående eksempel er “p” angivet, da det er tag-navnet for paragraffer. Efter “p” er der benyttet to tuborgklammer. Imellem de to turborgklammer skal koden som styler elementet angives. I det her tilfælde er det angivet, at tekstfarven skal ændres til grøn. I stedet for “p” kan tagget også være for alle andre slags elementer, som f.eks. “h1”, “body” og “a”.

Det upraktiske ved at benytte tag-navne når man skal angive hvad der skal styles er, at det vil gælde for alle af den slags tags på hjemmesiden. Hvis man vil være mere specifik med hvad der skal styles, så skal man benytte et -navn eller et -navn.

Udvælg class

Med attributten er det muligt at tilegne hvert HTML-element en -værdi, som kan være et hvilket som helst navn der klassificerer elementet. overskrider tags, så derfor er det en god ide at benytte tags, hvis man skal angive styling der gælder for alle elementer af samme slags. Hvis man skal være mere specifik med hvilke elementer der skal styles, så skal man benytte . I HTML-dokumentet kan man tilegne et element en -værdi på følgende måde:

<h1 class = "Overskrift">Dette er en overskrift</h1>

Dette -element har fået -værdien “Overskrift”. Bemærk at andre elementer også kan få den samme overskrift. Når man skal style elementet med den -værdi så skal man sætte et punktum foran og angive -værdien, som vist her:

.Overskrift {
  color: green;
}

Ovenstående kodestykke vil resultere i, at alle elementer, hvis class er lig med “Overskrift” vil få en grøn tekstfarve.

Det er også muligt at lave flere -værdier for det samme element ved at separere dem med et mellemrum. Det betyder, at man ikke behøver at lave en ny for hvert enkelt element.

<h1 class = "Overskrift Forside">Dette er en overskrift</h1>

Nu har -elementet fået -værdierne “Overskrift” og “Forside”. Det betyder at når vi refererer til en som enten hedder “Overskrift” eller “Forside” så vil det gælde for elementet.

.Overskrift {
  color: green;
}

.Forside{
background-color: red;
}

Ovenstående kodestykke resulterer i at -elementet både har fået en rød baggrundsfarve og en grøn skriftfarve.

Udvælg id

Med attributten er det muligt at tilegne hvert HTML-element en -værdi, som kan være et hvilket som helst navn der kan bruges til at identificere elementet. Bemærk at forskellen på og er, at er unikt, hvilket betyder, at det kun kan høre til ét element. overskrider , så derfor er det en god ide holde sig til at benytte og kun benytte når det er nødvendigt og når det kun er ét element som skal styles på én bestemt måde. Man kan tilegne et element en -værdi på følgende måde:

<p id = "Forsidetekst">Dette er en paragraf</p>

Dette paragrafelement har fået id’et “Forsidetekst”. For at angive hvilket der skal styles, så skal man sætte et nummertegn (#) foran -navnet. Det vil se sådan her ud:

#Forsidetekst {
  font-size: 16px;
}

Ovenstående kodestykke styler paragraf-elementet, så skriftstørrelsen bliver 16 pixels.

.komm {
“has-text-align-right”

line-height: 1;
}

^{“Noget går tabt, som skal kompenseres gennem hele livet,
jeg ved ikke rigtig hvad jeg mister, men så kan jeg rage til mig!
Alt jeg kan få fat i, så meget jeg kan. Det giver kort lindring.
Jeg opdager de tomme værdier jeg går efter. Så er det for sent, så kommer skuffelsen.
Jeg bebrejder mig selv, bortforklarer, fralægger mig skyld, skuffelsen tynger alligevel.
Spildt tid, spildte kræfter. Spildt liv!
Jeg omdefinerer værdierne og sætter mig selv højere:
Rigdom er roden og midlet til magt!
Magt gir respekt og agtelse, men i hvis øjne?
I mine egne øjne! Lige så sygt?”}