Bakgrundsfärger med CSS
I den här artikeln lär du dig att skapa olika bakgrundsfärger på din webbsida. Artikelseriens början hittar du här.
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".
Slutresultat
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: XHTML (.txt) CSS (.txt)
<<< Formatering av rubriker och stycken || Kantlinjer >>>
Relaterade artiklar
