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.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
