Een digitale nieuwsbrief maken met "inline CSS"

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:

<H2 style="font-weight: bold; font-size: 20px; font-family: Arial; color: #000000; text-align: left; margin: 0px; line-height: 150%;">Nieuwsbrief nummer 1, 12 september 2015 </H2>

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:

<A style="FONT-FAMILY: Arial; COLOR: green; FONT-SIZE: 14px; TEXT-DECORATION: none" href="http://naamwebsite">naamwebsite</A>

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:

<IMG hspace=0 src="http://naamwebsite/nieuwsbrief/plaatjenieuwsbrief.jpg" width=200 height=300></IMG>

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!

<HTML><HEAD>
<BODY bgcolor=#ffffff>

<TABLE WIDTH="750" BACKGROUND="#f3f3f3" TABLE-LAYOUT="fixed" HEIGHT="160" align=center VERTICAL-ALIGN="top" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD WIDTH="750"><IMG hspace="0" src="http://naamwebsite/nieuwsbrief/plaatjebovenaan.jpg"
width="750" height="160"></IMG></TD></TR></TBODY></TABLE>

<TABLE TEXT-ALIGN="left" WIDTH="750" BACKGROUND="#f3f3f3" TABLE-LAYOUT="fixed" HEIGHT="100%" align=center VERTICAL-ALIGN="top"
cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD width="40" bgcolor="#f3f3f3" align="left"></TD>
<TD TEXT-ALIGN="left" LINE-HEIGHT="150%" PADDING-LEFT="0" WIDTH="640"
BACKGROUND="#f3f3f3" TABLE-LAYOUT="fixed" bgcolor="#f3f3f3" VERTICAL-ALIGN="top"><BR>

<H2 style="font-weight: bold; font-size: 20px; font-family: Verdana; color: #000000; text-align: left; margin: 0px; LINE-HEIGHT: 150%;">Nieuwsbrief 12 september 2015 </H2>
<H4 style="font-weight: normal; font-size: 14px; font-family: Verdana; color: #000000; text-align: left; margin: 0px; LINE-HEIGHT: 150%;">
Voor je ligt onze eerste nieuwsbrief van dit jaar…..etc etc<p>
Meer info is te vinden op deze link:<br>
<a href="http://naamwebsite" style="FONT-SIZE: 14px; COLOR: blue; FONT-FAMILY: Verdana; TEXT-DECORATION: none;">naamwebsite</a>
<p>
<IMG hspace="0" src="http://naamwebsite/nieuwsbrief/plaatje2.jpg" width= "200" height= "220"></IMG><p>
Bedankt voor het lezen!<p>
</H4>

<H2 style="font-weight: bold; font-size: 20px; font-family: Verdana; color: #000000; text-align: left; margin: 0px; LINE-HEIGHT: 150%;">
Contactgegevens:<br></H2>
<H4 style="font-weight: normal; font-size: 12px; font-family: Verdana; color: #000000; text-align: left; margin: 0px; LINE-HEIGHT: 150%;">
E-mail: <a href="mailto:info@naamwebsite" style="FONT-SIZE: 12px; COLOR: blue; FONT-FAMILY: Verdana; TEXT-DECORATION: none;">info@naamwebsite</a><br>
Website: <a href="http://naamwebsite" style="FONT-SIZE: 12px; COLOR: blue; FONT-FAMILY: Verdana; TEXT-DECORATION: none;">naamwebsite</a><br>
</H4>
<BR></TD>
<TD width="70" bgcolor="#f3f3f3" align="right"></TD></TR></TBODY></TABLE>

<TABLE WIDTH="750" BACKGROUND="#f3f3f3" TABLE-LAYOUT="fixed" HEIGHT="110" align=center VERTICAL-ALIGN="top" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD WIDTH="750"><IMG hspace="0" src="http://naamwebsite/nieuwsbrief/plaatjeonderaan.jpg" width="750" height="110"></IMG></TD></TR></TBODY></TABLE>

<TABLE WIDTH="750" BACKGROUND="#ffffff" TABLE-LAYOUT="fixed" HEIGHT="40" align=center VERTICAL-ALIGN="top" cellSpacing="0" cellPadding="0">
<TBODY>
<TR>
<TD WIDTH="750">
<H5 style="font-weight: normal; font-size: 11px; font-family: new times roman; color: #000000; text-align: left; margin: 0px;">
Nieuwsbrief september 2015 nummer 1<br>
</H5>
</TD></TR></TBODY></TABLE>

</HEAD></BODY </HTML>
© 2015 - 2024 Blauwevinvis, het auteursrecht van dit artikel ligt bij de infoteur. Zonder toestemming is vermenigvuldiging verboden. Per 2021 gaat InfoNu verder als archief, artikelen worden nog maar beperkt geactualiseerd.
Gerelateerde artikelen
Skeeleren of inline-skating?Skeeleren of inline-skating?Wat is het, skeeleren of inline-skating? Deze namen voor dezelfde sport worden veelal door elkaar gebruikt en voor veel…
CSS - groeperen, class en idCSS - groeperen, class en idCSS (Cascading Style Sheets) is een taal waarmee je een internetpagina mooi kan vormgeven. Je kunt aan alle tags in HTML…
Beginnen met inline skatenBeginnen met inline skatenInline skaten is een sport en/of hobby die erg goed is voor uw conditie en spieropbouw. Het is intensief, maar het kan o…
Inline-skating, de indeling van trainingsgroepenMet een nieuw inline-skateseizoen voor de deur is het voor verenigingen, teams en selecties weer tijd om na te denken ov…

RSS-feed plaatsen op je WordPress-websiteRSS-feed plaatsen op je WordPress-websiteJe bent vast wel eens een oranje RSS-logo tegen gekomen op een website. Websites geven daarmee aan dat zij een RSS-feed…
Overzicht van de belangrijkste HTML-kleurcodesOverzicht van de belangrijkste HTML-kleurcodesBij het maken van een website is het handig een overzicht van alle HTML-kleurcodes bij de hand te hebben. In HTML-taal k…
Bronnen en referenties
  • Idee en ontwerp nieuwsbrief door de auteur Blauwe Vinvis
Blauwevinvis (114 artikelen)
Gepubliceerd: 14-09-2015
Rubriek: Pc en Internet
Subrubriek: Tutorials
Bronnen en referenties: 1
Per 2021 gaat InfoNu verder als archief. Het grote aanbod van artikelen blijft beschikbaar maar er worden geen nieuwe artikelen meer gepubliceerd en nog maar beperkt geactualiseerd, daardoor kunnen artikelen op bepaalde punten verouderd zijn. Reacties plaatsen bij artikelen is niet meer mogelijk.