Ændring af H2-elementfarve

Ved kodning er der ofte mange forskellige løsninger på et givet problem. Dette gælder især når det gælder styling af et HTML-element.

En af de nemmeste ting at ændre er tekstens farve. Men nogle gange ser det ud til, at intet du prøver fungerer:

 h2 .red-text { color: red; }  

CatPhotoApp

Så hvordan kan du ændre farven på H2-elementet til rødt?

Mulighed nr. 1: Inline CSS

En måde ville være at bruge inline CSS til at style elementet direkte.

Som med de andre metoder er formatering vigtig. Se igen på koden ovenfor:

CatPhotoApp

For at bruge inline styling skal du sørge for at bruge styleattributten og indpakke egenskaberne og værdierne i dobbelt anførselstegn ("):

CatPhotoApp

Mulighed nr. 2: Brug CSS-vælgere

I stedet for at bruge integreret styling kan du adskille din HTML eller sidens struktur og indhold fra stylingen eller CSS.

Slip først med den integrerede CSS:

 h2 .red-text { color: red; }  

CatPhotoApp

Men du skal være forsigtig med den CSS-vælger, du bruger. Se på elementet:

h2 .red-text { color: red; }

Når der er et mellemrum, h2 .red-textfortæller vælgeren browseren om at målrette elementet mod den klasse, red-textder er barn af h2. H2-elementet har dog ikke et barn - du prøver at style H2-elementet selv.

For at løse dette skal du fjerne pladsen:

h2.red-text { color: red; }

Eller målret red-textklassen direkte:

.red-text { color: red; }