Les 4
Achtergrond en kleur
In deze les leer je hoe je een achtergrond(kleur) en tekstkleur kunt instellen met behulp van CSS.
Background-color
Met de eigenschap background-color stel je de achtergrondkleur in. De waarde die je invult moet dus een kleur zijn.
Voor een overzicht van de verschillende kleurnamen en kleurcodes kun je hier klikken.
Een voorbeeld van background-color:
body { background-color: black }
Hiermee stel je dus een zwarte achtergrondkleur voor de pagina in.
Background-image
Hiermee kun je een afbeelding opgeven als achtergrond van je pagina. De waarde is een url. Deze wordt zo opgegeven: url(bestandsnaam.gif), waar "bestandsnaam.gif" de naam van je achtergrondafbeelding is.
Voorbeeld van background-image:
body { background-image: url(bestandsnaam.gif) }
Background-attachment
Met background-attachment kun je aangeven of je de achtergrond met de tekst wilt laten meescrollen of dat je een vaste achtergrond wilt hebben.
Mogelijke waarden zijn dus:
- scroll
- fixed
Voorbeeld van background-attachment:
body { background-image: url(bestandsnaam.gif); background-attachment: fixed }
Background-repeat
Met background-repeat kun je een achtergrondafbeelding op verschillende manieren herhalen.
Mogelijke waarden:
- no-repeat (herhaalt niet)
- repeat (herhaalt horizontaal en vertikaal)
- repeat-x (herhaalt horizontaal)
- repeat-y (herhaalt vertikaal)
Voorbeeld van background-repeat:
BODY { background-image: url(bestandsnaam.gif); background-repeat: repeat }
Color
Met de color eigenschap kun je de tekstkleur veranderen. De waarde van color is dus een
kleur.
Een overzicht van kleurnamen met hun codes kun je hier
vinden.
Een voorbeeld van color:
h1 { color: red }
p { color: brown }
Resultaat:
Rode H1 tekst
De tekstkleur in deze paragraaf is nu bruin.
Einde les 4
In deze les heb je geleerd hoe je een achtergrond en een tekstkleur kunt instellen met
Cascading Style Sheets.
In de volgende les komen de verschillende teksteigenschappen aan
bod.
MijnHomepage Tip
Heb je genoeg van je hostingprovider?
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij Alphamega Hosting. Hun klanten zijn over het algemeen erg tevreden waardoor er maar weinig mensen overstappen naar een andere webhost. En dat is altijd een goede graadmeter voor de kwaliteit van een host. Alphamega biedt zelfs een niet-tevreden-geld-terug-garantie van 100 dagen.
Het First-class hostingpakket is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:
100 MB» nu 512 MB schijfruimte2 GB» nu 10 GB dataverkeer- een eigen domeinnaam
- 1000 (pop)mailboxen
- 100 MySQL databases
- hoge kwaliteit techniek en prima support (helpdesk ook telefonisch bereikbaar)
Al met al is dit een prima pakket voor nog geen tientje per maand. Bekijk de site van Alphamega Hosting voor meer informatie!
