CSS hoofdletters

Al je kopjes automatisch naar hoofdletters omzetten, hoe doe je dat? Je kunt met CSS hoofdletters maken van ‘lowercase’, oftewel, normale tekst. Is dat niet handig? Maar als je CSS leest…grote kans dat je meteen de rillingen krijgt. Want misschien heb je er wel ooit van gehoord, maar wat is het nou precies? En programmeren, dat is toch heel erg moeilijk?! Maar ik heb goed nieuws voor je, het hoeft helemaal niet moeilijk te zijn. In een eerdere blog heb ik uitgelegd wat CSS nou precies is. Maar in het kort nog even een kleine samenvatting daarvan: CSS staat voor Cascading Style Sheet en is een coding pagina waarmee je jouw website kunt stylen. Hierdoor hoef je het niet meer met standaard WordPress thema’s te doen, maar kan je deze aanpassen zoals je het zelf graag zou willen.

Zo kun je bijvoorbeeld met CSS de kleur van je letters aanpassen, of tekst dik gedrukt of italic is, of bijvoorbeeld met CSS hoofdletters naar kleine letters veranderen of andersom. In deze blog zal ik je uitleggen hoe je dit laatste doet.

Hoe maak je met CSS hoofdletters?

Er zijn 3 codes waarmee je met CSS je letters kunt aanpassen.

CSS hoofdletters code 1:

De eerste code die je kunt gebruiken is: [text-transform: uppercase;]

Deze code zorgt ervoor dat de tekst volledig in hoofdletters wordt weergegeven.
In de afbeelding hieronder zie je hoe mijn tekst er uit ziet in HTML (links) en hoe ik de CSS code voor uppercase heb gebruikt (rechts). Zoals je ziet heb ik in de HTML tekst een deel in kleine letters geschreven en een deel in grote letters. Als je echter kijkt in de bovenste foto in deze blog (Voorbeeld CSS) zie je bij alles in hoofdletters hoe mijn HTML tekst er dankzij de CSS code uit ziet op mijn website. En inderdaad, de hele zin wordt in hoofdletters weergeven op mijn site.

Wat je dus ok kunt doen is dat je dit in de styling van je <h2 style=”text-transform: uppercase;”> toe kunt voegen. Waar je hierboven bijvoorbeeld de H2 gestyled ziet met een achtergrondkleur. Maar je kunt het ook toevoegen aan je CSS-sheet zodat alle ‘heading 2’-kopjes, over de gehele website hoofdletters worden. Hoe je dit het beste kunt doen, kun je leren in de CSS cursus.

CSS hoofdletters code 2:

De volgende code die je kunt gebruiken is de code: [text-transform: lowercase;]

Deze code zorgt ervoor dat de tekst volledig in kleine letters wordt weergegeven.
Ook hiervan heb ik weer een voorbeeld. In de HTML code (weer links) heb ik de voorbeeldzin weer met grote en kleine letters getypt. Vervolgens heb ik de CSS code toegepast (rechts). In het voorbeeld in de CSS voorbeeld foto zie je bij alles in kleine letters hoe het er uit komt te zien op mijn website. En inderdaad, hier wordt de zin in kleine letters weergegeven.

CSS hoofdletters code 3:

De laatste code die je kunt gebruiken is de code: text-transform: capitalize;

Deze code zorgt ervoor dat alle eerste letters van de woorden in de tekst hoofdletters worden. Als deze letters al hoofdletters zijn in je HTML tekst (links) dan blijven deze ook groot op je website. Daarom heb ik hier in mijn voorbeeld HTML tekst alleen maar kleine letters getypt. Na het toepassen van de CSS code (rechts) kun je in het voorbeeld in de foto zien dat inderdaad elke eerste letter een hoofdletter is geworden.

let op bij het gebruiken van een CSS code dat je deze afsluit met een puntkomma ( ; ). Wanneer je dit niet doet zal de code niet volledig zijn en daarmee ook niet werken.

Ik hoop dat ik je met deze blog weer wat nieuws heb kunnen leren over CSS. Mocht je nog meer willen leren over CSS kijk dan hier om te leren hoe je de lettertype op een WordPress pagina aanpast, leer hier hoe je een bold tekst maakt of leer hier hoe je tekst schuingedrukt maakt met CSS.

Of, Wil je nou graag een echte expert worden op het gebied van CSS en het optimale uit je site halen? Volg dan vooral de uitgebreide cursus, waar ik nog verder in ga op het stylen van je teksten.