Blips…

Nee het is geen Centraal Station Schiphol maar Cascading Style Sheets. Het gaat een zeer technisch verhaal worden en je kunt hier stoppen als je dat wilt.

CSS wordt gebruikt om de vormgeving van je website te besturen. Er is heel veel informatie op het web te verkrijgen met de gebruikte schrijfwijze en hoe het allemaal werkt, dat ga ik dus niet uitleggen. Om dan meteen in het diepe te duiken zie je hier hoe een van mijn websites eruit zou kunnen zien, dit is http://blipsdemo.com

Die rode achtergrond ziet er natuurlijk niet uit. Door nu een heel klein stukje in de CSS te wijzigen krijgen we een veel beter beeld. Het gele gemarkeerde gedeelte aan de linkerkant zal worden gewijzigd, in zwart, de kleurcode in hexadecimaal voor zwart is #000000 (zie onderstaande code)

Opeens zien we een veel betere weergave;

De originele code op de website is echter nog niet gewijzigd. Dit is gewoon het uitproberen van de instellingen. Als alle instellingen zijn zoals je wilt kun je de css code opslaan en uploaden naar je website. Dit is dus echt WISYWIG oftewel wat je verknoeit zie je meteen. Zoals ik al zei pas als je de nieuwe CSS naar je website upload is het echt gewijzigd, maak dus eerst een copy van de file.
De manier hoe je dit allemaal doet is eigelijk vrij simpel (waarmee ik niet wil zeggen dat CSS simpel is). Ik maak gebruik van FireFox als mijn browser en heb de Web developer add-on van Chris Pederick geinstalleerd. https://addons.mozilla.org/firefox/60/ Nadat je die add-on hebt geinstalleerd krijg je een nieuwe tool-bar in Firefox en kun je CSS bekijken of wijzigen van iedere website die je tegenkomt. Dus ook websites die niet van jou zijn. Zo kun je bijvoorbeeld kijken naar anderen hoe die dingen oplossen met CSS. Natuurlijk kun je die CSS niet naar hun website uploaden.
Niet iedere website gebruikt CSS en soms gebeuren er dingen via gewoon html hard gecodeerd hou daar rekening mee.
Dus als je op een eenvoudige manier kleine dingen zoals kleur, lettertype, links en marges wilt wijzigen is dat nu heel eenvoudig mogelijk door het eerst uit te proberen, het is gemakkelijker dan je denkt.

Nou hoop ik dat je het tot deze zin hebt kunnen uithouden en er meer van wilt weten. Veel plezier ermee en vragen staat vrij.

En als je nu wilt weten hoe ik aan die hexadecimale kleurcodes kom, kijk hier maar eens; http://www.tbi.univie.ac.at/TBI/hex_color_chart.html

7 Comments »