Bakgrundsfärger - Bakgrundsfärg på webbsida med CSS

I den här artikeln lär du dig att skapa olika bakgrundsfärger på din webbsida med hjälp av CSS.

Bakgrundsfärg för taggen body

Taggen body omsluter allt som är synligt på din webbsida och därför är det enklast att stajla den taggen med CSS. Öppna därför upp stilmallen som du skapade tidigare och lägg till denna kod för att få en ljusblå bakgrundsfärg.

body {background-color: #8AA0C5;}

Vi använder hexadecimala färgkoder.
Hjälp: Hexadecimal färgkod | Referens för färgkoder

Bakgrundsfärg för huvudtexten

Det absolut bästa för att underlätta läsning är att använda svart text på vit bakgrund.

Så då ställer vi oss frågan - vad ska vi formatera för att få huvudtextens bakgrund vit? Kanske borde du ge stycketaggen p, en vit bakgrund? Nej, faktiskt inte - det resulterar bara i att den omedelbara bakgrunden för stycketaggen formateras och inte hela bakgrunden. Istället är det behållarelementen div#sidhuvud, div#huvudtext och div#sidfot som du ska sätta upp regler för.

Lägg därför till nedanstående deklaration för div-elementen sidhuvud och huvudtext i din CSS-fil:

background-color: white;

Hupps! Inga hexadecimala färger den här gången? Nej, faktiskt inte, du kan ange standardfärger i CSS genom att skriva in dem "som vanligt". I detta fall kan du alltså skriva "white" istället för den hexadecimala koden #FFFFFF.

Ändra bakgrundsfärg i sidfot och formatera text

Nu ska vi ge sidfoten en ljusgrå bakgrund samtidigt som vi ger texten en mörk gråton. Vi förminskar även texten så att den är något mindre än den övriga texten på sidan.

Lägg till följande kod, markerat med rött, till den gamla CSS-koden för sidfoten:

div#sidfot { text-align:center;background-color: #CCCCCC; color: #444444; font-size: 9px;}

Skriv in valfri text i sidfoten. I det här exemplet skriver jag in "©Copyright Testhemsida 2010".