Hoe maak je tekst schuingedrukt of cursief in HTML en CSS?

Schuingedrukte of cursieve tekst in HTML is eenvoudig te genereren. Dit doe je met de tag <i>...</i>. De i staat voor italic, wat cursief betekent.
Deze HTML code gebruik je als je een tekstgedeelte op een net wat andere, opvallende manier wilt weergeven zonder dat je het vetgedrukt wilt maken. Vetgedrukt heeft namelijk een bepaalde urgentie, iets van: deze tekst is belangrijk. Cursief gebruik je bijvoorbeeld bij namen van planten of schepen, bij technische termen of andere woorden.

Je kunt cursieve tekst ook maken met de HTML code <em>...</em>. In dit geval krijgt de tekst net een klein beetje meer nadruk. Em staat voor emphasis wat nadruk betekent. Je kunt dit bijvoorbeeld gebruiken om in een zin de klemtoon, de nadruk weer te geven.

Ik heb een e-boek gemaakt: HTML & CSS voor bloggers.
Voorzien van een stappenplannen en heldere afbeeldingen om mee aan de slag te gaan.
Vul hieronder je mailadres in en krijg dit e-boek in je mailbox!

Voorbeeld:

<p><em>Ik</em> vind dat Vincent het gekst is.</p>
<p>Ik vind dat <em>Vincent</em> het gekst is.</p>
<p>Ik vind dat Vincent het <em>gekst</em> is.</p>

Resultaat:

Ik vind dat Vincent het gekst is.

Ik vind dat Vincent het gekst is.

Ik vind dat Vincent het gekst is.

Er zijn andere html codes die de tekst cursief weergeven, maar daarbij is het eigenlijk de bedoeling dat deze met CSS aangepast worden naar een andere stijl. Denk bijvoorbeeld aan

Het lettertype Jost met normal en italic versie

Cursief of schuingedrukt in CSS

Natuurlijk kun je met behulp van CSS ook teksten cursief en schuingedrukt weergeven.
Je gebruikt daarvoor de declaratie font-style.

Er zijn drie opties, de standaard instelling is ‘normal’. Dan heb je italic, zoals gezegd dat is cursief. Daarnaast heb je oblique. Daarmee zet je rechte letters schuin. Bij italic maak je gebruik van lettertypes waarbij ook een cursieve versie zit. Veel lettertypes hebben echter geen cursieve versie dus kun je die letters obliek maken, schuin zetten. Eigenlijk is er dus een verschil tussen schuingedrukt (obliek) en cursief (italic).

Voorbeeld:

<h3>Grote woorden</h3>
<p style="font-style: italic">door Jan Janssen</p>
<p>Het was een mooie dag met grote woorden...</p>

Resultaat:

Grote woorden

door Jan Janssen

Het was een mooie dag met grote woorden…