Cascading Style Sheets

Geen formele beschrijving, geen cursus, alleen maar voorbeelden met code.
Ik zoek veel naar voorbeelden, soms vind ik iets heel moois. Meestal vind ik iets wat wel ongeveer is wat ik zoek, soms helemaal niets. Wat ik vond en wat ikzelf maakte zet ik hier zodat ik nooit meer hoef te zoeken...

Voor wie meer wil:

CSS 1 de officiële specs, versie 1
CSS 2 de officiële specs, versie 2
CSS check, goed, geeft 'warnings' waar anderen het al lang best vinden.
WDG, goede reference
W3schools, heel goed over CSS.
TU Delft, cursus HTML & CSS, NL-talig.
Edwin, eenvoudig, NL-talig.
Quick reference

List

Zie de keuzelijsten hierboven, en de code in, aan het eind. Niet echt interessant.

Table

Niet waanzinnig interessant. Zelfs W3schools heeft geen 'on-line examples'.

aap	noot
mies	wim

aap	noot
mies	wim

<table cellspacing="8"><tr><td>
<table border="2" bordercolor="red"
style="border-collapse:collapse"><tr><td>aap</td><td>noot</td></tr>
<tr><td>mies</td><td>wim</td></tr></table>
</td><td>
<table border="2" bordercolor="blue"
style="border-collapse:separate"><tr><td>aap</td><td>noot</td></tr>
<tr><td>mies</td><td>wim</td></tr></table>
</td></tr></table>

Zowel IE als OP als MOZ kennen het, maar ze doen het alledrie anders.

Dimension

Kijk bij W3schools, ik vind dit niet interessant genoeg om zelf fascinerende voorbeelden te maken.

Maat

Hoogte, breedte, afstand: alles kan op veel manieren:

in: inch, 25.4 millimeter
cm: centimeter
mm: millimeter
pc: pica, 1 pc = 12 pt.
pt: 1 in = 72 pt, 1 pt = 0.35 mm
px: 1 pixel, daar kan je iets mee
em: maat van het font
ex: maat van letter X
%: percentage van een voorgaande definitie

Kijk eens bij Text, hoeveel is een halve centimeter op jouw scherm? En kijk eens bij Font, die 20 pts f is op mijn scherm 6 mm.

X, ex

X, em

Het verschil tussen EM en EX, varieer ook de tekengrootte.

<font size=1>
<div style="width:10ex; height:10ex; 
background:#fbb">X, ex</div><p>
</font>
<div style="width:10ex; height:10ex; 
background:#bbf">X, ex</div><p>
<font size=1>
<div style="width:10em; height:10em; 
background:#bfb">X, em</div><p>
</font>
<div style="width:10em; height:10em; 
background:#bff">X, em</div><p>

Een ingelijst plaatje:

een klein gifje, 131 bytes.

Een ingelijst plaatje:<p>
<div style="width:400px; height:150px; border:4px solid #F90; padding:4px;">
<img src="vierkleur.gif" width="400" height="150" alt="vierkleur 1"></div>

(perfect met Mozilla en Opera, Als je </div> niet op een nieuwe regel zet, ook perfect met IE6.)

<DIV style="width:120px; height:170px; border:5px solid red;">
  <DIV style="width:110px; height:160px; border:5px solid white;">
    <DIV style="width:100px; height:150px; border:5px solid blue;">
      <img src="vierkleur.gif" width="100" height="150" alt="vierkleur 2"></div>
</div></div>

zie ook: overlappende plaatjes

mijn tekst

een structuur als:

#mid80, #midden, td{background:#fbb; border:none;}

maakt het eenvoudig om meerdere dingen dezelfde kleur te geven. Ook gemakkelijk als je die kleur wilt veranderen. (Dit komt uit 'rozegeur.css')
Een wat gecompliceerder voorbeeld van hetzelfde principe zit in centra4, het stukje style waar het om gaat is:

#im1, #im2, #im3, #im4{
	position:absolute;
	left:35%;
	top:25%;
	margin-left:-100px;
	margin-top:-75px;
	width:200px;
	height:150px;
	padding:10px;
	background:#0c0;
	border:3px solid #080;
}

#im2, #im4{left:75%;}

#im3, #im4{top:75%;}

im1, 2, 3 en 4 krijgen in beginsel dezelfde positie: 35% vanaf de linkerkant en 25% vanaf de bovenkant. Im2 wordt dan wat verder naar rechts gezet, im3 wat verder naar beneden. Im4 wordt zowel naar rechts als naar beneden gezet.

Let op het ontbreken van een komma tussen #boven en a:hover:

#boven a:hover{
	color:#448;
	background:#fff;
}

Hier wordt maar één ding gemaakt: de kleuren van a:hover binnen een #boven gedeelte. (a:hover wordt actief als je muis boven een link hovert.) Hier een komma teveel of te weinig geeft een soms lastig te vinden fout: syntactisch kan het allebei.

deze bladzij

begint met:

<html><head><title>cascade</title>
<link rel="stylesheet" type="text/css" href="cascade.css">
</head>
<body>
<script>
IE4 = (document.all);
function p(t){document.write(t);}
if(IE4){
 p('<style>');
 p('pre{width:300px;font-size:80%;}');
 p('</style>');
}
</script>

De broncode van is hier te vinden. De <pre> blokken krijgen de breedte van het ding waarin ze staan. Het script wat test of je IE hebt maakt die breedte 300 als dat zo is. Internet Explorer beschouwt dat als de minimum breedte, Opera en Mozilla doen dat niet. Ik zou de lettergrootte bij Mozilla ook nog aan moeten passen...