Een digitale nieuwsbrief maken met "inline CSS"

Als we via e-mail een digitale nieuwsbrief willen versturen dan volstaat het niet meer om deze te schrijven in eenvoudige “e-mail”-opmaak met platte tekst en onderaan ergens een plaatje. Nee, we willen natuurlijk een fraai ogend bericht maken dat eruitziet als een strakke webpagina, voorzien van goede foto’s, mooie kleuren en goed leesbare tekst. De mogelijkheden om dit te doen zijn legio, er bestaan vele gratis en niet gratis aanbieders waarmee je een nieuwsbrief kunt laten maken en versturen. Maar wat als je de nieuwsbrief helemaal zelf wilt maken en wilt versturen vanuit je eigen e-mailprogramma? Hoe kun je dan toch een strakke en mooie nieuwsbrief maken? Het geheim om dit te kunnen doen heet “inline CSS”.

Wat is CSS?

CSS staat voor Cascading Style Sheets en is een soort extra code die aan de HTML-opmaak van een webpagina wordt toegevoegd. Met CSS wordt als het ware de standaard weergave-instructies van de HTML code omzeild, op deze wijze zien webpagina’s er fraaier uit en blijft de weergave altijd hetzelfde, ongeacht het type webbrowser. We herinneren ons allemaal wel de tamelijk lompe weergaven waarmee websites in de jaren 90 zich kenmerkten, dit zijn websites met enkel eenvoudige HTML-opmaak zonder CSS. Ook een e-mail die in een e-mailprogramma als Outlook of Outlook Express wordt geschreven is opgebouwd uit eenvoudige HTML. In een e-mailprogramma is altijd ergens een optie te vinden waarmee de broncode van een e-mail kan worden weergegeven en worden bewerkt. Het is dit veld dat je nodig hebt om zelf een nieuwsbrief te maken en te voorzien van tussen de tekst geplaatste CSS, oftewel “inline CSS”.

Problemen met CSS-weergave en webmailaanbieders

Bij het maken van een website is het gebruikelijk om de CSS-code in een apart bestand op te slaan en op elke webpagina een kleine verwijzing (link) naar dit CSS-bestand te vermelden. De weergave-instructies uit het CSS-bestand worden dan vanzelf op elke pagina ingelezen. Bij het maken van een digitale nieuwsbrief zou deze methode ook zeer geschikt zijn, in alle e-mailprogramma’s (Outlook, Firebird) wordt de nieuwsbrief zonder problemen goed weergegeven. Echter veel mensen gebruiken webmail als Gmail of Hotmail, en het geval wil dat deze webmailaanbieders CSS-instructies blokkeren.

Wat is er aan de hand?

Webmailaanbieders zoals Gmail en Hotmail hebben een bescherming ingebouwd waarmee verwijzingen naar CSS-codes worden geblokkeerd. Waarom dat zo is, is voor veel mensen nog steeds een raadsel, het zou iets te maken kunnen hebben met bescherming tegen externe CSS-instructies die voor een geheel eigen opmaak zorgen. Hoe dan ook, wanneer je een zelfgemaakte nieuwsbrief met externe CSS-code naar iemand zou versturen met een Gmail-account, dan krijgt de ontvanger een zeer lelijke nieuwsbrief te zien, hoogstwaarschijnlijk weergegeven in zeer grote chocoladeletters!

De oplossing: inline CSS

Om de blokkades van Gmail, Hotmail en ander webmail aanbieders te omzeilen is er een manier, en dit heet inline CSS, oftewel stukjes CSS-code worden ter plekke in de tekst geplaatst. Dit is wel veel meer werk dan wanneer je met een extern CSS-bestand werkt, maar het levert wel meteen het resultaat op dat je wilt. Het toverwoord om inline CSS te plaatsen heet “style”. Met “style” kan in de HTML-code worden aangegeven dat er een stijltoevoeging gaat plaatsvinden:


De code die tussen de twee aanhalingstekens staat achter “style=”, dát is de CSS-code, en het feit dat deze code meteen achter de HTML-code “<H2>” is geplaatst wil zeggen dat de code “inline” dus tussen de tekst is geplaatst. Probeer deze code maar eens te kopiëren en te plakken in het HTML-veld van een e-mail, en zie wat er gebeurt. Probeer ook eens te spelen met het lettertype, en kijk wat er gebeurt als “line-height” wordt aangepast.

In de nieuwsbrief kan ook een link worden geplaatst waar ontvangers op kunnen klikken:


Merk op dat het niets uitmaakt of de CSS-instructies in grote of kleine letters worden geschreven, “font-family” of “FONT-FAMILY”, het is om het even. Dit geldt overigens ook voor HTML-code. Probeer eens te variëren met “color” en met “font-size”. De link “naamwebsite” is uiteraard fictief gekozen ten behoeve van dit voorbeeld, normaal moet hier een volledig adres komen beginnend met www en eindigend op nl of bijvoorbeeld com. Probeer ook weer deze code in een eigen e-mail te plakken en bekijk wat er gebeurt.

In een digitale nieuwsbrief horen ook goede afbeeldingen

Goede illustraties of banners met strakke logo’s horen uiteraard thuis in een digitale nieuwsbrief. Nu moet er wel rekening mee worden gehouden dat afbeeldingen niet mee worden verstuurd met de e-mail waarin de digitale nieuwsbrief wordt opgemaakt. Afbeeldingen worden namelijk automatisch door de ontvanger gedownload vanaf een externe server wanneer de ontvanger de nieuwsbrief opent. Als server kan bijvoorbeeld het adres en locatie van een eigen website worden gebruikt:


Dit voorbeeld bevat geen inline CSS, maar het is bedoeld om te laten zien op welke manier de maker van de nieuwsbrief een verwijzing kan opnemen naar afbeeldingen die van een externe locatie worden gedownload. Je kan zien dat door de verzender een map "nieuwsbrief" is gemaakt op de server van de eigen website "naamwebsite", en dat in die map een plaatje "plaatjenieuwsbrief.jpg" is geplaatst. Vervolgens is bij het opmaken van de nieuwsbrief een verwijzing naar dit plaatje gemaakt, zodat de ontvanger het krijgt te zien. Hou er rekening mee dat verwijzingen en links in kleine letters moeten worden geschreven.

De digitale nieuwsbrief printen

Het is belangrijk dat de nieuwsbrief op juiste wijze geprint kan worden door de ontvanger. Een probleem dat zich voordoet met “externe” CSS is dat de printer aparte instructies nodig heeft om de nieuwsbrief goed uit te kunnen printen. Dit kan via de HTML-code <STYLE media=screen>, welke achter <META> wordt geplaatst. In ons voorbeeld met inline CSS doet zich het voordeel voor dat de printer deze extra instructies niet meer nodig heeft, de nieuwsbrief wordt gewoon goed uitgeprint.

Een compleet ontwikkelde lay-out voor een nieuwsbrief

Tot slot een complete lay-out voor een nieuwsbrief in HTML, met toegevoegde inline CSS, die je kunt gebruiken en aanpassen naar eigen wens! Daarvoor hoef je enkel deze code te plakken in het HTML-veld van jouw e-mail. Merk op dat er twee plekken zijn waar inline CSS wordt toegepast, binnen de HTML code <H> en binnen de HTML code <A>. Veel plezier met het maken van je nieuwsbrief!