Ändra H2-elementfärg

Vid kodning finns det ofta många olika lösningar på ett givet problem. Detta gäller särskilt när det gäller att utforma ett HTML-element.

En av de enklaste sakerna att ändra är färgen på texten. Men ibland verkar det som att inget du försöker fungerar:

 h2 .red-text { color: red; }  

CatPhotoApp

Så hur kan du ändra färgen på H2-elementet till rött?

Alternativ 1: Inbyggd CSS

Ett sätt skulle vara att använda inbyggd CSS för att utforma elementet direkt.

Som med de andra metoderna är formatering viktigt. Ta en titt igen på koden ovan:

CatPhotoApp

För att använda inline-styling, se till att använda styleattributet och slå in egenskaperna och värdena i dubbla citattecken ("):

CatPhotoApp

Alternativ 2: Använd CSS-väljare

I stället för att använda inline-styling kan du skilja din HTML, eller sidans struktur och innehåll, från stylingen eller CSS.

Bli först med den inbyggda CSS:

 h2 .red-text { color: red; }  

CatPhotoApp

Men du måste vara försiktig med den CSS-väljare du använder. Ta en titt på elementet:

h2 .red-text { color: red; }

När det finns ett mellanslag h2 .red-textsäger väljaren till webbläsaren att rikta in sig på elementet med den klass red-textsom är barn till h2. H2-elementet har dock inget barn - du försöker utforma H2-elementet själv.

För att åtgärda detta, ta bort mellanslaget:

h2.red-text { color: red; }

Eller bara rikta in red-textklassen direkt:

.red-text { color: red; }