Het kunnen stylen van verschillende aspecten van uw HTML-pagina is een belangrijke vaardigheid voor webdesigners en ontwikkelaars. Om uw HTML-webpagina's op te maken met lettertypekleuren en -groottes, moet u bekend zijn met CSS. Om de lettergrootte specifiek te targeten, kunt u de CSS. gebruiken lettertypegrootte eigendom.

Als u op zoek bent naar een manier om de HTML-lettergrootte te wijzigen met CSS, dan bent u bij ons aan het goede adres. Laten we een duik nemen door te beginnen met een inleiding tot de CSS lettertypegrootte eigendom.

De eigenschap CSS-lettergrootte begrijpen

De lettertypegrootte eigenschap in CSS is handig wanneer u de grootte van HTML-tekst moet wijzigen. U kunt deze eigenschap gebruiken om de grootte van elk stukje tekst op een HTML-pagina te wijzigen of om specifieke elementen aan te passen.

Het wordt meestal aanbevolen om specifieke elementen te targeten, omdat u meestal niet wilt dat alles dezelfde grootte heeft. Tekst die geen visuele hiërarchie volgt, is moeilijk te doorzoeken en onderscheid te maken tussen koppen op een hoger niveau en koppen op een lager niveau.

In eenvoudiger bewoordingen, maak geen misbruik van de lettertypegrootte eigendom. Als je wilt dat een kop opvalt, zijn daar verschillende HTML-koptags voor. Bekijk onze HTML-spiekbriefje voor essentiële zaken voor verschillende tags, attributen en meer, samen met uitleg.

De CSS lettertypegrootte eigenschap heeft twee soorten waarden: absoluut en relatief.

Absolute lengtewaarden (d.w.z. px) zijn vast terwijl relatieve (bijv. em en ex) zijn flexibel. Bijvoorbeeld voor een lettertype-relatieve eenheid zoals em, wordt de grootte meestal bepaald door de lettergrootte van het bovenliggende element. Echter, op root gebaseerde lettertype-relatieve eenheden zoals rem worden beïnvloed door de lettergrootte van het hoofdelement ().

Elk heeft zijn voor- en nadelen, maar om de zaken gefocust te houden, zullen we ze in dit artikel niet bespreken.

Hoe de lettergrootte van een HTML-element in CSS te wijzigen

U kunt de lettergrootte van HTML-tekst wijzigen door een standaard CSS-syntaxis te gebruiken.

Geef eerst de selector op (de tekst die u wilt wijzigen) en open enkele accolades. Voer vervolgens de. in lettertypegrootte eigenschap gevolgd door een dubbele punt, specificeert u de specifieke grootte waarin u uw HTML-tekst wilt presenteren en sluit u deze af met een puntkomma.

Hier is de syntaxis:

CSS-kiezer {
 lettergrootte: waarde;
}

Bekijk de volgende HTML-boilerplate met een paar extra regels code (een kop en een alinea) om het concept beter te begrijpen:

Dit is mijn eerste rubriek

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Als u de lettergrootte van het alinea-element wilt wijzigen, moet u het selecteren (via een klasse, tag of id) en, met behulp van de CSS lettertypegrootte eigenschap, stelt u een aangepaste waarde in met uw voorkeurseenheden. In ons voorbeeld gebruiken we pixels (px).

P {
 lettergrootte: 18px;
}

Hoewel inline CSS over het algemeen niet wordt aanbevolen in grote projecten, kun je het ook gebruiken om de grootte van HTML-tekst te wijzigen. Door aantekeningen te maken van de externe CSS-code hierboven, kunnen we hetzelfde inline als volgt implementeren:

Dit is mijn eerste rubriek

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Tekst in de P HTML-tag heeft nu een nieuw aangepast formaat.

Verwant: Essentiële CSS-tips en -trucs die elke ontwikkelaar zou moeten weten

Problemen oplossen bij het wijzigen van de HTML-lettergrootte in CSS

Hoewel het hele proces van het wijzigen van de tekstgrootte in CSS misschien eenvoudig lijkt, loopt het misschien niet altijd precies zoals u verwacht. Als u problemen ondervindt, controleer dan eerst of u de wijzigingen in uw bestand hebt opgeslagen (zorg er ook voor dat u uw CSS-blad aan uw HTML-bestand koppelt). Als dat het geval is, probeer dan de inline-methode te gebruiken en vernieuw vervolgens de pagina.

Als het werkt, is er mogelijk een probleem met uw CSS-code. Probeer de !belangrijk tag, en als het werkt, moet er een conflicterende code zijn. Parseer uw CSS-code regel voor regel om te proberen die fout op te vangen.

10 eenvoudige voorbeelden van CSS-codes die u in 10 minuten kunt leren

Hulp nodig met CSS? Probeer deze standaard CSS-codevoorbeelden om mee te beginnen en pas ze vervolgens toe op uw eigen webpagina's.

Lees volgende

Over de auteur