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 id-navn eller et class-navn.

 

Udvælg class

Med attributten class er det muligt at tilegne hvert HTML-element en class-værdi, som kan være et hvilket som helst navn der klassificerer elementet. class 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 class. I HTML-dokumentet kan man tilegne et element en class-værdi på følgende måde:

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

Dette <h1>-element har fået class-værdien “Overskrift”. Bemærk at andre elementer også kan få den samme overskrift. Når man skal style elementet med den class-værdi så skal man sætte et punktum foran og angive class-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 class-værdier for det samme element ved at separere dem med et mellemrum. Det betyder, at man ikke behøver at lave en ny class for hvert enkelt element.

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

Nu har <h1>-elementet fået class-værdierne “Overskrift” og “Forside”. Det betyder at når vi refererer til en class 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 <h1>-elementet både har fået en rød baggrundsfarve og en grøn skriftfarve.

 

Udvælg id

Med attributten id er det muligt at tilegne hvert HTML-element en id-værdi, som kan være et hvilket som helst navn der kan bruges til at identificere elementet. Bemærk at forskellen på class og id er, at id er unikt, hvilket betyder, at det kun kan høre til ét element. id overskrider class, så derfor er det en god ide holde sig til at benytte class og kun benytte id 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 id-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 id der skal styles, så skal man sætte et nummertegn (#) foran id-navnet. Det vil se sådan her ud:

#Forsidetekst {
  font-size: 16px;
}

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

 

Gå videre til Farver i CSS her →