HTML_lettertypegrootte

HTML Styles font-size (lettergrootte)

In de HTML codes kun je ook je style aanpassen. In de vorige bericht vertelde ik over hoe je de kleuren kan veranderen van paragrafen en headings. Vandaag ga ik laten zien hoe je de lettertype grootte kunt veranderen. Hieronder laat ik een paar voorbeelden zien.

Voorbeeld:

Ik ben een normale paragraph.

Ik ben een kleine paragraaf.

Ik ben een grote paragraaf.

Je kunt de grootte van een tekst vergroten en verkleinen. Hier boven zie je de voorbeelden van de verschillende groottes van de paragrafen. Je kunt de teksten groter en kleiner maken. Maar hoe kun je dat doen? Er zijn verschillende manieren om een tekst groter en kleiner te maken. De ‘Ik ben een normale paragraaf.’ is de normale <p> tag. Om de kleine paragraaf te krijgen, gebruik je de style. Net als bij de HTML Styles color (kleur) gebruiken we de style. Dus we voegen eerst de style code aan je <p> element, dat doen we als volgt: <p style=””> Ik ben nog normaal.</p>. Om een tekst grootte aan te passen moet je de code ‘font-size’ gebruiken.
Dat ziet er dan zo uit: <p style=”font-size:”> Ik ben nog normaal.</p>. Maar om de tekst dan nog groter of kleiner te maken moeten we een bepaalde eenheid eraan vast zetten. Dat doen we met pixels (px).

Bij de voorbeeld van de kleine paragraaf heb ik 10px gebruikt.

Ik ben een kleine paragraaf.

Ik ga jullie nu laten zien hoe het achter de schermen eruit zag: <p style=”font-size:14px;”>Ik ben een kleine paragraaf.<p/p>

Zo maak je ook een tekst groter. Om een tekst groter te maken moet je ook een groter aantal pixels gebruiken. Bij de grote paragraaf heb ik 50px gebruikt.

Ik ben een grote paragraaf.

Nu ga ik jullie laten zien hoe de grote paragraaf achter de schermen eruit zag: <p style=”font-size:50px;”>Ik ben een grote paragraaf.<p/p>

Nog een paar voorbeeld:

Dit is een grote heading

Dit is een grote paragraaf.

Je kunt het niet alleen met pixels groter of kleiner maken. Ook kun je het met de % aanpassen. Dit doe je ook met de style code. 100% is de originele grootte. Bij de grote heading heb ik dus een percentage gebruikt die groter is dan 100% om het groter te maken. Bij de grote heading heb ik 300% gebruikt bij de font-size code. Achter de schermen ziet het er dan dus zo uit <h1 style=”font-size:300%”;>Dit is een grote heading</h1> Dit is dus hoe je een heading (een h1) kunt vergoten. Je kan het natuurlijk ook verkleinen door de percentage te verkleinen. (dus onder de 100%)

Nu ga ik jullie vertellen hoe je de paragraaf kunt vergroten. Natuurlijk is de originele grootte ook 100%. Bij de voorbeeld heb ik 160% gebruikt. Dus dat ziet er zo uit: <p style=”font-size:160%”;>Dit is een grote paragraaf</h1>.

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *