Bakgrundsfärger
Välja färg till bakgrunden med CSS och Dreamweaver
I den här artikeln lär du dig att skapa olika bakgrundsfärger på din webbsida. För att du ska hänga med är det viktigt att du läst de föregående artiklarna i Dreamweaver-guiden.
Välj en bakgrundsfärg för webbsidan
Body-taggen innehåller alla taggar/element som visas i din webbläsare och därför är det lämpligt att stajla just denna tagg med CSS om du vill sätta en bakgrundsfärg som påverkar hela webbsidan.
Öppna alltså upp stilmallen som du skapade tidigare och lägg till denna kod för att få en ljusblå bakgrundsfärg:
body {background-color: #8AA0C5;}
Kommentar: Kom ihåg att DreamWeaver ofta ger förslag när du skriver in en egenskap som ska bestämmas. Exempelvis kommer det fram en palett där du kan välja den färg som du vill ha, efter att du skrivit in kolonet i ovanståend kod och trycker mellanslag.
Skapa en bakgrundsfärg för huvudtexten
Att ha en bakgrund som är vit brukar oftast vara den bästa färgen för huvudtexten och du bör heller aldrig experimentera med färger som rör text och bakgrunden för texten. Svart text (eventuellt mörka gråtoner) är det som fungerar bäst. Det finns ingen anledning att experimentera här.
Så vad ska du då formatera för att få huvudtextens bakgrund vit. Kanske borde du ge stycketaggen p, en vit bakgrund? Nej, faktiskt inte - det resulterar bara att den omedelbara bakgrunden för stycketaggen formateras och inte hela bakgrunden. Som i det här exemplet med ljusbrun bakgrund. Istället är det behållarelementen div#sidhuvud, div#huvudtext och div#sidfot som du bör formatera.
Lägg till nedanstående deklaration för div-elementen sidhuvud, huvudtext och sidfot 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. Här hittar du de färger som går att skriva med sitt vanliga namn.
Ändra bakgrundsfärgen i sidfoten och formatera texten
- För att göra detta så ersätter du den gamla raden för sidfoten i din CSS-fil med:
div#sidfot {background-color: #CCCCCC; color: #444444; text-align:center; font-size: 0.8em;}
Det gör att bakgrunden blir ljusgrå samtidigt som all text får en mörkare gråton (eftersom du inte valde någon speciell selektor.) Texten är centrerad som tidigare, men är förminskad med "font-size"-deklarationen.
- Skriv in valfri text i sidfoten. Förslagsvis kontaktinformation eller dylikt tills vidare. Klart.
Bakgrundsfärger för andra element
Så länge som du använder dig av enkla layouter så blir det aldrig svårare än så här. Du kan grunderna - prova dig fram själv så lär du dig bäst.
Så här bör din webbsida se ut nu: HTML-version
Filer för nedladdning: HTML (.txt) CSS (.txt)
Nästa artikel: Kantlinjer
