CSS algemeen

Home

Opmaken met CSS

Cascading Style Sheets (CSS) zijn een uitbreiding van HTML en vele beperkingen van HTML hiermee tot het verleden. Alle actuele browsers beheersen het merendeel van de functieomvang van deze taal. Terwijl HTML eigenlijk maar heel beperkt voor controle op de layout zorgt en de attributen van de <FONT>-tag hier al een aanmerkelijke verbeteringen levert is het pas met CSS dat de maker echt controle krijgt.

Met CSS kun je je layout op verschillende manieren bewerken:

Je legt vast hoe de normale tags door de browser weergegeven moeten worden. Je kunt er bijvoorbeeld voor zorgen dat een kop <H1> altijd met de vastgelegde eigenschappen (bijv. roodgekleurd, vetgedrukt en gecentreerd) wordt weergegeven.
Je definieert je eigen pseudo-tags voor specifieke opmaak. Je kunt een tag samenstellen voor informatiekaders (met een omlijsting en achtergrondkleur). Je hoeft dan in het document alleen nog de nieuwe tag te gebruiken en je hoeft de opmaak niet steeds opnieuw te definiëren.
Je wijzigt het uiterlijk van de volledige site door simpelweg een enkel document te bewerken, in plaats van elke pagina afzonderlijk. Vooral bij omvangrijke websites bespaar je jezelf op die manier veel tijd bij de aanpassing. Je legt in een centraal bestand vast hoe bijvoorbeeld de achtergrond eruit moet zien. Als je later deze instelling alleen in dit éne bestand wijzigt, dan nemen alle pagina's die daarna geladen worden de wijziging onmiddellijk over.

§ Uitgebreide style sheet-aanwijzingen

Op deze site wordt de uitgebreide CSS-specificatie niet behandeld. Ga hiervoor naar de Nederlanstalige Cascading Style Sheets Wikipedia, de CSS Startpagina of rechtstreeks naar Handleiding HTML sectie CSS

De style sheets voor tags gebruiken

Om bestaande HTML-tags van een enkele pagina een doelgerichte opmaak toe te wijzen, maak je in de <HEAD>-sectie van de betreffende pagina een <STYLE> gedeelte aan, die de volgende opbouw moet hebben:

<STYLE TYPE="text/css">
<!--
/* ... Cascading Style Sheet ... */
-->
</STYLE>

Tussen <STYLE> en </STYLE> volgen dan de verdere definities.
*/...*/ markeren een opmerking in de CSS waarmee je de style sheet definities kunt becommentariën. Door de  tekens te plaatsen worden alle CSS-definities in een meerregelig HTML-commentaar geplaats en daardoor genegeerd bij het renderen, zodat oudere browsers die CSS niet beheersen in ieder geval geen foutmeldingen produceren.