Een website maken met css

Waarom zou ik een website maken met css?

Ja, waarom eigenlijk? Om die vraag te beantwoorden, leg ik je eerst even kort uit wat css eigenlijk is. Dat doe ik aan de hand van het tekstverwerkingsprogramma Word, omdat de meeste mensen daar wel bekend mee zijn.

Als je in Word bijvoorbeeld een kop boven een stuk tekst er vet en wat groter wil laten uitzien, dan kun je dat op twee manieren doen. Je kunt het stuk tekst selecteren, op de knop 'B' klikken in de werkbalk bovenaan, en het cijfer voor de tekstgrootte (die staat meestal standaard op '12') veranderen in '20'. Het stuk geselecteerde tekst neemt dan direct die beide kenmerken aan.

Maar je kunt het ook anders aanpakken. Je kunt ook hetzelfde stuk tekst selecteren, en vervolgens op het pijltje naast de knop 'Standaard' klikken. Er verschijnt nu een rijtje andere opties, waaronder 'Kop 1'. Klik je die optie aan, dan krijgt het stuk geselecteerde tekst in één keer de kenmerken die zijn toegekend aan 'Kop 1'. Het voordeel van deze manier van werken is dat je, als je in een later stadium besluit dat je alle koppen toch liever cursief hebt dan vet, dit in één keer kunt veranderen door de stijlkenmerken (in Word heten die 'opmaakprofielen') van 'Kop 1' aan te passen.

Als je een website maken gaat, kun je iets soortgelijks doen. Je bedenkt eerst uit welke onderdelen een webpagina moet bestaan (gewone tekst, één of twee (of nog meer) verschillende koppen, citaten, voorbeelden, enz.). Dan bedenk je hoe die verschillende onderdelen eruit moeten komen te zien en dat leg je vast. Voor een webpagina worden die kenmerken vastgelegd in een css-bestand ofwel stijlblad (css = cascading style sheet).

Behalve dat je op deze manier je website (of alleen enkele onderdelen daarvan) snel kunt aanpassen, is er nog een ander voordeel. De afzonderlijke webpagina's van je site kunnen nu met veel minder code toe. Ze worden daardoor veel gemakkelijker te 'doorzien' (zowel voor jezelf als voor de zoekmachines).

Veel kant-en-klare websitemodellen zijn tegenwoordig gemaakt met gebruikmaking van css. Ook als je een website maken gaat met een van mijn gratis websitemodellen krijg je te maken met css. Als je de index-pagina (index.html) van een van deze modellen opent in een html-editor, zie je ergens bovenaan een van de volgende codeblokken staan:

Bovenstaande code wil zeggen dat de opmaakkenmerken voor deze pagina te vinden zijn in het document 'basis.css'. Wil je bijvoorbeeld de kleur van een kop aanpassen, dan doe je dat niet in de index-pagina zelf, maar in het bestand 'basis.css' of 'stijl.css' (zoals ook uitgelegd in mijn online handleiding bij de modellen).

Een css-bestand kun je openen met een gewone html-editor of zelfs met een teksteditor (zoals Kladblok). Het voordeel van het werken met een html-editor zoals HTML Kit, is dat je gebruik kunt maken van voorgedefinieerde stukjes code, wat de kans op fouten verkleint. Ook geeft HTML Kit de verschillende onderdelen van het css-bestand in verschillende kleuren weer, waardoor je snel kunt zien of er ergens een foutje in de code zit.

Om in HTML Kit toegang te krijgen tot de css-codes, klik je op het tabblad 'Style':

Met de knoppen die dan aan de linkerkant van de werkbalk verschijnen, kun je de verschillende css-codes invoegen:

Wat al die verschillende stukjes css-code betekenen en wat ze precies doen, lees je in het onderdeel css – eigenschappen van de Handleiding HTML.

Menu Zoek