De eerste alinea start met een grote initiaal en is leesbaar op alle schermen. De tekst is een beetje vet en cursief en heeft een grotere regelafstand.
De originele titel was te lang voor weergave op de mobiel. Je ziet dat de titel op de PC langer is. Deze tweede alinea heeft een serif lettertype. Op de telefoon is de tekst weergegeven in 1 kolom, op de ipad in 2 kolommen en op het beeldscherm in 3 kolommen. De kolommen zijn uitgebalanceerd en de tekst is volledig uitgevuld. is leesbaar op alle schermen.
Hoe pas ik de stylesheet aan?
- start met de mobiele versie. De stylesheet start met de instellingen die geldig zijn voor alle devices. Onderaan staan aparte gedeelten voor mobiele versie, ipad versie en PC versie. Je overschrijft de instellingen voor de verschillende devices en omdat er een voorwaarde bij staat wordt de juiste stijl gebruikt.
- start met de algemene vormgeving
- /* is een teken voor een opmerking, deze moet je verwijderen (ervoor en erachter) en vervolgens de waarde invullen
- bekijk het resultaat in je browser (gebruik F5 om te refreshen)
- kolommen stel je in met column-count (= aantal kolommen) en column-gap (ruimte tussen de kolommen)
Hoe begin je?
- open index.html in kladblok
- open style.css in kladblok
- vul de waarden aan in de stylesheet
- bekijk het resultaat in je browser (gebruik F5)
Oefenen met een tabel
| cell header | cell header | cell header |
|---|---|---|
| rij 1, kolom 1 | rij 1, kolom 2 | rij 1, kolom 3 |
| rij 2, kolom 1 | rij 2, kolom 2 | rij 2, kolom 3 |