Skip to main content

De lettertype-tag versus Cascading Style Sheets (CSS)

9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | HTML Tutorial (Juni- 2026)

9: CSS Text Styling Tutorial | Basics of CSS | Learn HTML and CSS | HTML Tutorial (Juni- 2026)
Anonim

Heb je een heel oude website bekeken en een ongebruikelijke tag in de HTML gezien? Vele jaren geleden zouden webontwerpers de lettertypen van hun webpagina's eigenlijk in de HTML zelf plaatsen, maar de scheiding van structuur (HTML) en stijl (CSS) heeft deze praktijk enige tijd geleden weggedaan.

In het webontwerp van vandaag is de tag verouderd. Dit betekent dat de tag niet langer deel uitmaakt van de HTML-specificatie. Hoewel sommige browsers deze tag nog steeds ondersteunden nadat deze was verouderd, wordt deze helemaal niet meer ondersteund in HTML5, wat de nieuwste iteratie van de taal is. Dit betekent dat de tag niet meer te vinden is in uw HTML-documenten.

Het alternatief voor de lettertypetag

Als u het lettertype van de tekst niet binnen de HTML-pagina met de tag kunt instellen, wat moet u dan gebruiken? Cascading style sheets (CSS) zijn de manier waarop u letterstijlen (en alle visuele stijlen) op websites van vandaag instelt. CSS kan alle dingen doen die de tag kan doen, plus nog veel meer. Laten we eens kijken wat de tag zou kunnen doen als het een optie was voor onze HTML-pagina's (onthoud, het wordt helemaal niet meer ondersteund, dus het is geen optie) en vergelijk hoe het te doen is met CSS.

De lettertypefamilie wijzigen

Het lettertype is het gezicht of de familie van het lettertype. Met de lettertypetag zou u het attribuut "gezicht" gebruiken en u zou dit in een document heel vaak moeten plaatsen om de afzonderlijke lettertypen voor elk tekstgedeelte in te stellen. Als u een ingrijpende wijziging in dat lettertype moest aanbrengen, moest u elk van deze afzonderlijke tags wijzigen. Bijvoorbeeld:

dit lettertype is niet schreefloos

In CSS in plaats van lettertype "gezicht", wordt dit het lettertype "familie" genoemd. U schrijft een CSS-stijl die het lettertype zou instellen. Als u bijvoorbeeld alle tekst in een pagina op Garamond wilt instellen, kunt u die visuele stijl als volgt toevoegen:

lichaam {font-family: Garamond, Times, serif; }

Deze CSS-stijl past de lettertypefamilie van Garamond toe op alles op de webpagina, aangezien elk element in het document een afstammeling is van de

De letterkleur wijzigen

Net als bij het gezicht, gebruikt u het attribuut "kleur" en hex-codes of kleurnamen om de kleur van uw tekst te wijzigen. Jaren geleden zou je dit ook individueel instellen op tekstelementen, zoals een header-tag.

dit lettertype is paars

Vandaag zou je gewoon een regel CSS schrijven.

Dit is zoveel flexibeler. Als u de

op elke pagina van uw site kunt u één wijziging aanbrengen in uw CSS-bestand en elke pagina die dat bestand gebruikt, zou worden bijgewerkt.

Met het oude

CSS gebruiken om visuele stijlen te dicteren is al jaren een standaard voor webdesigners, dus als je inderdaad naar een pagina kijkt die nog steeds de tag gebruikt, dan is het een heel oude pagina en moet deze opnieuw worden ontwikkeld om te voldoen aan het huidige web best practices en moderne webstandaarden ontwerpen.

Bewerkt door Jeremy Girard