Cascading Style Sheets (deze pagina vereist een CSS ondersteunende browser)



Inleiding

Een mooie uitleg wat CSS nu eigenlijk is, is de volgende: wat opmaakprofielen voor Wordt zijn, dat is Cascading Style Sheets voor HTML. In de loop van de jaren zijn Netscape en Microsoft zoveel nieuwe eigen tags gaan invoeren dat er nood was aan een veralgemening. Daarom heeft men CSS toegevoegd. CSS staat in voor de opmaak van een pagina of je hele site. Het is maar hoe je het wilt.

Standaard Code

Een style sheet is opgebouwd uit een of meer rules. Een voorbeeld is
H1 { color : blue }
Op die manier kan je dus veranderen aanbregen voor in dit geval de stamdaard instellingen van H1. In versie 1 van CSS zijn er ongeveer een 50 tal eigenschappen voor tags gedefiniëerd.
De CSS defenitie wordt tussen de <HEAD></HEAD> tags geplaatst. Ook ben je verplicht de browser duidelijk te maken met welke versie van CSS hij te doen heeft, dit doen we met:
<STYLE TYPE="text/css">
  H1 { color : blue }
</STYLE>

Nu is er wel een klein probleempje. Browsers die CSS niet kennen zullen de tekst tussen
<STYLE></STYLE> weergeven. Om dat te voorkomen gebruiken we de commentaartags:
<STYLE TYPE="text/css">
  <!--
  H1 { color : blue }
  -->
</STYLE>

Nu kunnen we alle documenten zo editten. We kunnen echter ook een bestand maken, een CSS bestand, en dan alle pagina's van onze site linken met die pagina. Dit doe je door de volgende regel aan het begin van je document te zetten:
<LINK REL=STYLESHEET HREF="opmaak.css">

Voorbeeld.1:

<STYLE TYPE="text/css">
  <!--
  BODY { font-family: Comic Sans MS;
  font size: 9pt;
  color: #2C2C6F;
  text-align: Left;
  background: #FFFFFF
  }
  -->
</STYLE>

Als je dit gebruikt, bekom je het volgende:  Klik hier

Voorbeeld.2:

door gebruik te maken van de volgende tag:
EM { color: #0000FF ; background: url(../jpg/pinstr.jpg) repeat #FFFFFF }

bekom je het volgende:   Klik hier

Als je wilt dat de afbeelding maar één maal getoond wordt, gebruik dan no-repeat.
Met #FFFFFF geef je aan wat de achtergrondkleur is op de plekken waar de afbeelding niet staat.

Meer info