Letters en tekst hebben eigenschappen die je wel kent, zoals bold of italic. Met css kunnen we deze (en nog veel meer) teksteigenschappen aanpassen. In deze oefening nemen we aan de hand van een songtekst een korte duik in de mogelijkheden.
De volgende CSS ‘declaraties’ voor tekst zijn de meest gebruikte:
font-size
font-weight
font-family
font-variant
font-styletext-decoration
text-decoration-color
text-decoration-style
text-align
text-indent
text-shadow
text-transformline-height
letter-spacing
white-space
word-spacing
overflow-wrap
word-wrap
list-style-type
list-style-positionBekijk deze CSS in actie op deze voorbeeldpagina.
Download dit basisdocument voor html en werk hierin verder. Maak een eigen externe style.css aan.
Opdracht► Zet een html-pagina op volgens een van de onderstaande voorbeelden. Verwerk hierin een zelfgekozen songtekst.
Let op! Bekijk tabblad “Theorie” voor hulp bij het opzetten van deze layout. Je pagina bestaat uit de volgende onderdelen:
Header
- De header is een vensterbrede <div> (bij versie 2 is de header vastgezet en scrollt niet mee).
- De header bevat een gecentreerde <h3> voor de Paginatitel.
- De header bevat een gecentreerde <p> voor jouw naam.
Titel
- Hierna volgt een gecentreerde <h1> met de Song title.
- Hierna volgt een gecentreerde <p> met het jaar van uitgave.
Songtekst
- De pagina inhoud staat in een gecentreerde <div> van 800px breed.
- Bij versie 1 staat hier nóg een gecentreerde <div> in voor de songtekst.
- De songtekst is opgebouwd met links uitgelijnde <ul> of <p> tags.
- Gebruik <br> om een regel om te slaan.
- Bij versie 2 staan links en rechts uitgelijnde <img>
- Onderaan staat een gecentreerde <p> met Copyright en jaartal.
Footer
- De footer is een paginabrede <div>.
- Hierin staat een gecentreerde <p> met de naam van de opdrachtgever en het jaartal.
Bezoek Google Fonts en kies hier twee lettertypes uit. Gebruik de embed code om de fonts in de <head> van je index.html te plaatsen.
Opdracht► Verwerk minimaal 2 fonts van Google Fonts in je pagina.
Opdracht► Verwerk minimaal de onderstaande declaraties in je ontwerp via je style-sheet.
font-size
font-weight
font-family
font-styletext-decoration
text-align
text-indent
text-shadow
text-transformline-height
letter-spacing
word-spacing
Maar hou jezelf niet in en pimp je pagina met overige style-declaraties (denk bv. aan ‘color’ voor tekstkleur of ‘background-color’ of meer…).
Je kunt ook nog spelen met plaatjes; die je links of rechts uitlijnt langs de tekst (zie het tweede voorbeeld onder stap 1).
- Hoe gebruik ik de “width” property?
- Hoe centreer ik een element?
- Hoe lijn ik een plaatje links of rechts uit?
- Hoe geef ik een element witruimte aan de buitenkant?
- Hoe geef ik een element witruimte aan de binnenkant?
- Hoe zet ik een element vast (fixed)?
- Hoe geef ik een element een achtergrond (afbeelding)?