Dit is de eerste paragraaf. Je kan deze paragraaf anders stylen. Dit is een goed idee als de eersre paragraaf altijd een samenvatting is van de rest van het artikel. Als de eerste paragraaf gewoon een eerste paragraaf is dan is het niet nodig om hem anders te stylen. Een groter font of vetgedrukte tekst wordt we gebruikt. Maar dat is natuurlijk aan jou, de designer, om te beslissen. Als je het niet zeker weet, bespreek de betekenis van de eerste paragraaf dan met je collega's. Als je geen content guide hebt die duidelijk uitlegt waar de eerste paragraaf voor staat, style hem dan niet.
Dit is een paragraaf die direct na een heading 2 staat. Je kan de relatie tussen een heading 2 en een paragraaf stylen. Je zou er bijvoorbeeld voor kunnen kiezen om de marge tussen de paragraaf en de heading te verkleinen. Zo creëer je de illusie van een gegroepeerd blok volgens de gestalt theorie. Je zou er ook voor kunnen kiezen om een verschillende relatie te maken tussen een heading twee en een geordende of ongeordende lijst. Maar deze relaties kunnen natuurlijk ook precies hetzelfde zijn.
Dit is een paragraaf die direct na een paragraaf staat. De meeste browsers zullen standaard een lege witregel tussen deze paragrafen tonen, maar er zijn meer mogelijkheden om dit te stylen. Voor sommige teksten is het veel beter om de eerste regel één em te laten inspringen, zonder witregel.
- Dit is een ongeordende lijst
- Je kunt de opsommingstekens stylen.
- Je kan ook de marges en paddings van de lijst aanpassen.
- En van de individuele elementen in de lijst
- En je kan de relatie tussen de lijst en de elementen er omheen stylen
Dit is de paragraaf direct na een ongeordende lijst. CSS werk zo dat het element direct na een ander element kunt stylen, maar niet het element voor het volgende. Deze paragraaf weet dus wat er voor staat, maat het heeft geen idee van wat er na komt. Ik kan dus bepalen dat de marge tussen een paragraaf en de ongeordende lijst er voor 2em moet zijn, als ik dat zou willen, maar het is niet mogelijk om de afstand tussen de ongeordende lijst en de paragraaf er achter te bepalen. Ik kan beslissen dat de standaard ruimte boven en onder een paragraaf 1em moet zijn. Het element na deze paragraaf kan deze standaard waarde dan overschrijven.
- Dit is een geordende lijst
- Net als in een ongeordende lijst kan je ook hier dingen vormgeven
- Je kan ook andere manieren van nummering kiezen, zoals
- Romeinse cijfers
- Letters
- En meer
- Lijsten in lijsten kunnen weer apart vormgegeven worden.
Dit is de paragraaf direct na een geordende lijst. CSS werk zo dat het element direct na een ander element kunt stylen, maar niet het element voor het volgende. Deze paragraaf weet dus wat er voor staat, maat het heeft geen idee van wat er na komt. Ik kan dus bepalen dat de marge tussen een paragraaf en de geordende lijst er voor 3em moet zijn, als ik dat zou willen, maar het is niet mogelijk om de afstand tussen de geordende lijst en de paragraaf er achter te bepalen. Ik kan beslissen dat de standaard ruimte boven en onder een paragraaf 1em moet zijn. Het element na deze paragraaf kan deze standaard waarde dan overschrijven.
/* Dit is de code voor een standaard paragraaf */
p {
margin: 1em 0;
}
/* Dit is de code voor een paragraaf na een paragraaf */
p + p {
margin: -1em 0 1em;
text-indent: 1em;
}
Er zijn bizar veel mogelijke combinaties van verschillende elementen die elkaar opvolgen. Begin met uitgangspunten die zin hebben, en overschrijf deze uitgangspunten voor veelvoorkomende combinaties die specifiekere styling nodig hebben
Er zijn niet alleen tekstblokken, er zijn ook inline elementen. Zoals tekst die benadrukt moet worden, of tekst die extra zware nadruk verdient. Teksten die anders uitgesproken worden kan je ook stijlen, par example buitenlandse woorden of ironische opmerkingen. Je kan er zelfs voor kiezen om onderdelen van de tekst er visueel uit te laten springen, zoals Vasilis van Gemert, als naam in een roddelblad. Vergeet niet om geneste elementen vorm te geven! Er bestaat ook de mogelijkheid om elementen nadruk te geven met een underline (waarvoor het u element bedoeld is), maar dit moet je nooit doen. Gebruik underlines alleen voor links.
Elk goed, lang artikel zou een tweetal block quotes moeten bevatten. Anders ziet het er saai uit.
Er is veel meer wat je kunt vormgeven. Je kan tabellen met alle mogelijke onderdelen vormgeven, iets wat je zeker moet doen. Er bestaan definitielijsten. Er zijn veel manieren waarop je plaatjes in een tekst kunt plaatsen, met verschillende betekninssen. Hier een paar voorbeelden.
Als je zeker weet dat de verschillende formaten voor plaatjes juist worden gebruikt dan kan je er voor kiezen om de onderschrijften bij deze specifieke formaten ander vorm te geven. Maar ik zou niet te veel aannames over het juiste gebruik van formaten doen.
Een laatste opmerking. veel CMS'en geven redacteuren niet de tools die ze nodig hebben om goed gestructureerde teksten in te voeren. Tenminste, niet out-of-the-box. Het is een goed idee om hier voldoende tijd in te stoppen. De teksten worden er beter van en de site wordt er mooier van.