Met dit truukje leer je razendsnel hoe CSS werkt

Met dit truukje leer je razendsnel hoe CSS werkt

Als je een website of blog hebt via bijvoorbeeld WordPress en je hebt een thema geïnstalleerd, zul je merken dat je veel kunt aanpassen. Maar veel helaas ook niet. Het ligt een beetje aan welk thema je hebt gekozen. Over het algemeen geldt voor gratis of goedkopere thema’s dat je minder kunt aanpassen dan wanneer je een wat duurder thema hebt gekocht.

Maar gelukkig bestaat er CSS. CSS staat voor Cascading Style Sheet. Dit is een bestandje waarmee de complete layout van je website wordt bepaald. Lettertypes, kleuren, lettergrootte, maar ook de plaatsing van bepaalde elementen tot op de pixel nauwkeurig. Dit bestandje heet meestal style.css en kun je vinden in WordPress door op Weergave en dan Editor te klikken. Het voordeel van CSS is, dat je een aanpassing in één keer op je hele website toe kan passen. Heel anders dan HTML dus.

Wanneer je het style.css bestandje opent in WordPress, kan ik me voorstellen dat je even schrikt. Het ziet er ook best ingewikkeld uit allemaal en als je geen verstand van coderen hebt, raad ik ook zeker niet aan om er zomaar in te gaan rommelen. Je kunt hier onherstelbare fouten mee maken.

Leren hoe je je CSS aanpast met een simpele truc

Zelf heb ik ook absoluut geen verstand van coderen. En toch lukt het me om een website compleet naar mijn zin te maken en hoef ik me niet tegen te laten houden door de restricties van het thema. Hoe ik datdoe ? Daar is een heel simpel trucje voor.

Wist je namelijk dat jij eigenhandig elke website op de wereld kan veranderen? Ja, niet echt natuurlijk! Maar wel in je eigen browser. Met behulp van een mega handige functie in Chrome (internetbrowser) kun jij de css van bijna elke website bekijken en aanpassen. Je ziet dan direct welke veranderingen dit teweeg brengt, zonder dat je onherstelbare fouten veroorzaakt. Dit is heel leerzaam, want als je dit maar vaak genoeg doet, zul je steeds sneller in staat zijn bepaalde elementen aan te passen in je eigen CSS.

css

Ik gebruik voor het gemak even mijn eigen website als voorbeeld. Ga met je muis op het element staan wat je aan wilt passen. Klik vervolgens op je rechtermuisknop en klik op Inspecteren. Er verschijnt dan een scherm met verschillende codes.

css

Je zult merken dat wanneer je met je muis over de verschillende codes zweeft (1), je precies kunt zien (2) welke code bij welk element hoort. Maar dit is nog niet je CSS. Het CSS stylesheet vind je in het kleine vakje aan de rechterkant (3).

css

Stel, je wilt de lettergrootte van de tekst “Waarom je als ondernemer een Virtueel Assistent nodig hebt” aanpassen. Je klikt dan in (1) op die regel, zodat het een blauwe highlight krijgt en check in (2) of je de goede regel hebt) Je ziet meteen dat er in vak (3) iets verspringt. Door op de regel te klikken die je zou willen veranderen, wordt je in (3) meteen naar het juiste CSS onderdeel geleidt. Hier kan je aanpassingen maken. Je ziet dan meteen in het scherm of het wat doet (het kan zijn dat je aan de verkeerde code sleutelt), wát het doet en of je het mooi vindt.

css

Zoals je ziet heb ik hier de lettergrootte veranderd van 24 naar 50. Je kunt je afvragen of het een verbetering is, maar door het even extra groot te maken, kan je wel makkelijk zien of je verandering ook echt iets doet. En het leuke is, als je de editor afsluit en de pagina ververst, is alles weer zoals het was. Maar ondertussen weet jij nu wel precies waar en hoe je een aanpassing moet doen in CSS! Geweldig toch?

Mocht je vragen hebben of tegen problemen aan lopen, voel je niet bezwaard om me een mailtje te sturen. Dan kijk ik of en hoe ik jou het beste kan helpen.

Leave comments

Your email is safe with us.