Een unieke website die er professioneel uitziet, zal sneller bezoekers trekken én ze ook op de pagina houden. Dat betekent dus een grotere kans tot omzet. Met behulp van CSS kan je je pagina aanpassen tot jouw unieke stijl. Na het lezen van deze blog kan je zelf met drie eenvoudige CSS voorbeelden aan de slag om jouw site een ander ontwerp te geven.

CSS voorbeeld 1: lettertype

Voor de kopjes van je teksten kan je een uniek lettertype gebruiken. Op mijn site zie je daar een voorbeeld van. Het kopje hierboven is een ander lettertype in een andere stijl dan de rest van de tekst. Dit gebruik ik over heel de site zodat het een geheel is en het er professioneel uitziet. Een van de makkelijkere CSS voorbeelden is dus je lettertypen aanpassen.

Op de site CSS Font Stack staan allerlei font-family’s die je kan gebruiken voor je lettertypen. Maar, het is niet zo eenvoudig als een lettertypen uitkiezen en je bent klaar. Je ziet namelijk onder de fonts staan hoeveel procent van de Windows-gebruikers en hoeveel procent van de Mac-gebruikers het lettertypen heeft. Dit is wel iets waar je rekening mee wil houden, want als je een font gebruikt die nauwelijks beschikbaar is voor je bezoekers, kan je misschien beter een alternatief kiezen. Hoe je er voor zorgt dat je tekst toch voor iedereen beschikbaar is, leer je verder in de CSS cursus.

CSS voorbeeld 2: links

Zoals je ook op mijn pagina kan zien, zijn mijn linkjes anders opgemaakt. In plaats van gewoon een blauwe, klikbare tekst, is de mijne roze onderstreept. Op deze pagina gebruik ik het weer anders. Dan is de link roze en klikbaar. Zo zie je dus dat je verschillende mogelijkheden hebt om je links aan te passen. Een linkje aanpassen is misschien niet het eerste waar je aan denkt bij CSS voorbeelden, maar het is erg makkelijk gedaan en zorgt weer voor een beter uiterlijk van je site.

Het makkelijkste wat je kan aanpassen aan de link is de kleur ervan. Dat klinkt misschien onbelangrijk, maar kan wel voor een samenhang binnen je pagina zorgen. Op mijn site gebruik ik bijvoorbeeld steeds dezelfde kleur oranje, mijn linkjes heb ik dezelfde kleur gegeven. Zo is het allemaal een geheel. Daarnaast kan je ze onderstrepen, doorstrepen, in hoofdletters of kleine letters weergeven. Er is van alles mogelijk. Verdere uitleg daarover krijg je in de Code Godess Cursus.

CSS voorbeeld 3: Bold

De laatste van de CSS voorbeelden die we in deze blog geven is je tekst bold maken. Dat kan natuurlijk altijd al door gewoon je lettertypen in bold te zetten. Dus misschien denk je: hier heb ik geen CSS voor nodig. Maar met CSS kan je dit weer net wat anders aanpakken. Als mijn tekst namelijk in bold staat, dan is die tekst zwarter terwijl de rest van mijn tekst grijzer is. Hierdoor valt bold nog meer op dan normaal. De stukken tekst die belangrijk zijn, vallen zo beter op en het ziet er professioneler uit.