CSS Weblog-kunst
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 »
7 Responses to “CSS Weblog-kunst”
Make PDF
(1966-1974)
ElMarStel on 23 Jan 2007 at 12:02 am #
ik heb het net wel tot het einde toe gelezen, maar het is mij te technisch, ik ben niet zo’n kneutselaar.
Tri Pham on 23 Jan 2007 at 1:30 am #
Het grote voordeel van CSS is dat het ‘herbruikbaar’ (daarmee laad je site ook sneller) is en dat je makkelijk van stijl kunt veranderen. Tevens is het goed voor webstandaarden en goed voor SEO gezien spiders je broncode beter kunnen lezen (CSS > tables).
Wendy on 23 Jan 2007 at 2:06 am #
Ondanks je waarschuwing toch doorgelezen, maar had weer beter kunnen luisteren.
Eigenwijs hè?
Anders on 23 Jan 2007 at 8:32 am #
Goeie tip ! Werkbalkje gelijk binnengehaald. Zulk soort gadgets heeft IE lekker niet…
Patrick on 23 Jan 2007 at 1:52 pm #
Voor webdesign, gebruik ik ook vaak de firefox entension: ColorZilla om de kleuren te “matchen”.
Na het installeren van een CSS template wel even de site op de CSS code laten valideren: http://jigsaw.w3.org/css-validator/
Rebecca on 23 Jan 2007 at 3:39 pm #
Inderdaad een technisch verhaal. Waarschijnlijk niet voor mij weg gelegd. Ik ben blij met mijn blog template en dat ik er eigenlijk weinig aan hoef te doen. Af en toe zou ik het een en ander wel willen veranderen hoor, maar dan kom je toch weer terug op het technische…….
blips on 23 Jan 2007 at 9:51 pm #
Gemengde reacties zoals ik al wel verwachtte maar dat geft niks. Een goede tip van Patrick die ik opgevolgd heb door de code te valideren, http://blipsdemo.com bevatte een fout die ik inmiddels hersteld heb.