Highlight jouw tekst

Altijd al willen leren hoe je tekst kan markeren door te coderen? Dan is dit jouw kans! Leer teksten te highlighten!

HTML

Allereerst begin je met het schrijven van de content. Zoals je weet start je altijd door een te openen

vervolgens vul je je id of class in

tot slot sluit je de div af. In dit voorbeeld gebruiken wij een h1 tag, ofwel de title tag. Door in de span de class highlight aan te geven kan vervolgens met de CSS het element vormgeven.

Highlight jouw tekst - Techness

Plak de onderstaande code in je tekst editor

<div id=”text”>
<h1>Highlight jouw tekst</h1>
<p><p>Wil jij leren hoe je tekst kan highlighten door te coderen? <span class=”highlight”>Stapje voor stapje! <span class=”highlight”></span> In dit blogartikel leggen wij het precies uit! </p></p>
</div>

CSS

Nu de HTML geschreven is, kan er stijl opgemaakt worden. Voor dit voorbeeld is er gekozen voor een Google Font, font-family: Coming Soon.
Wat staat er in de onderstaande code?
• Font
• Grootte
• Kleur
• Breedte
• Margin

Plak de onderstaande code in je tekst editor om te highlighten

@import url(https://fonts.googleapis.com/css?family=Coming+Soon);
 
body{
font-family: “Coming Soon”;
line-height: 2;
}
 
.highlight{
background-image: linear-gradient(-100deg, rgba(255, 255, 255, 0), yellow 85%, rgba(255, 255, 255, 0));
}
 
#text{
width: 40%;
margin: 0 auto;
}
 
#text p{
font-size: 18px;
}

Leave a Reply