We gaan nu een basis stylesheet maken.
De code heeft de volgende vorm:
element {attribuut1:waarde1; attribuut2:waarde2; ....}
We beginnen met de onderstaande alinea.
@charset "iso-8859-1";
/* CSS Document */
Deze eerste regel vertelt de browser welke karakterset de stylesheet gebruikt.
De tweede regel is een opmerking. In dit geval dat het om een stylesheet gaat. Een opmerking begint met /* en eindigt met */. Opmerkingen mogen niet genest worden.
We schrijven alle code in uitsluitend kleine letters. Dus geen hoofdletters gebruiken.
We slaan dit bestand op met de naam super.css. De extensie van stylesheets is altijd .css.
Het is het makkelijkste om van laag naar hoog te declareren. We beginnen met de body:
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:13px;
margin:0;
padding:0;
background-color:#fff;
color:#000}
Met font-family stellen we de lettertype in. We zien dat er vier staan. Dit werkt als volgt: Eerst wordt verdana gekozen. Indien deze niet geïnstalleerd is wordt arial gebruikt. Hierna helvetica en daarna een sans-serif type.
Met fontsize kiezen we de lettergrootte. Deze is standaard 16px, maar met het staanddaard lettertype times new roman, welke kleinere letters genereert. 16px in verdana wordt te groot, vandaar 13px. Dit wordt ook op deze site gebruikt.
Door margin en padding op 0 ze zetten komen de teksten e.d. tegen de randen van de browservenster te staan, dit geeft de maximale werkbreedte van een scherm. We gaan later bij de indeling dit weer corrigeren.
De background-color steld de achtergrond kleur in. In dit geval op wit (#rgb). Deze is standaard. Maar oude browsers zoals IE 4.0 hebben grijs als achtergrond.
Met color stellen we de kleur van de letters in. In dit geval op zwart. Deze is ook standaard.
We hebben nu de body geset voor onze wijze van werken. Dit wordt onze basis.
We gaan nu de tabel aanpassen aan onze wensen.
table {margin-bottom:12px}
caption {text-align:left; font-weight:bold}
th {text-align:left}
tr {vertical-align:top}
Omdat tabellen genest kunnen worden hebben ze standaard een marge van 0. Als we twee tabellen onder elkaar willen plaatsen, zullen deze elkaar aanraken. Dit voorkomen we door de margin-bottom in te stellen op 12px.
De caption is een tekst waarmee we de tabel van een titel of beschrijving voorzien. Deze is standaard gecentreerd en wordt met text-align naar links verschoven. Met font-weight maken we deze vet.
De tabel heeft twee type cellen, n.l. de header-cel (th) en de data-cel(td).
De tekst in een celheader wordt standaard gecentreerd weergegeven. Om deze ook links in de cel te plaatsen zoals de celdata gebruiken we text-align:left.
img {border:0}
Met border:0 voorkomen we dat als een afbeelding als link gebruikt wordt deze een blauwe rand krijgt zoals tekstlinken.
Om een dunne horizontale scheidingslijn te maken gebruiken we de onderstaande code:
hr {
color:#000;
background-color:#000;
border:0 solid;
height:1px}
Hieronder wat voorbeelden:
ul {list-style-type:disc}
ul li ul {list-style-type:circle}
ol {list-style-type:decimal}
De waardes voor ul en ol zijn de standaard waarden.
De combinatie van ul li ul is een manier van zeggen dat de geneste ul een andere list-type-style gebruikt. De combinatie ol li ol kan ook gebruikt worden. We zouden dan low-latin kunnen toe wijzen aan de tweede ol.
De hieronder vermelde font-sizes zijn de standaard waarden. Indien gewenst kunt u ze aanpassen.
h1 {font-size: 32px}
h2 {font-size: 24px}
h3 {font-size: 19px}
h4 {font-size: 16px}
h5 {font-size: 13px}
h6 {font-size: 11px}
Het lettertype en maat zijn al in de body gedeclareerd en worden overgenomen.
Het is wel mogelijk om aan alinea's nog wat te sleutelen. Wat dacht u van de eerste letter van een alinea groter maken zoals vroeger in de boeken. Dat doet u met de code:
p:first-letter {font-size:15px; font-weight:bold}
Dit is het resultaat.
Een andere techniek om alinea's te laten beginnen is door de tekst aan het begin te laten inspringen. Deze techniek is vooral handig als je pagina's laat uitprinten en de lege ruimte tussen de alinea kwijt wilt om papier te sparen. De code hiervoor is:
p {text-indent: 20px}.
Dit is het resultaat.
Hier zit en addertje onder het gras. De volgorde van de pseudoklassen is van belang voor een goede werking hiervan. De volgorde hieronder is de juiste en kan met het ezelsbruggetje LoVeHAte onthouden worden.
a:link {color:#00f; text-decoration:none}
a:visited {color:#a0a; text-decoration:none}
a:hover {color:#f00; text-decoration:underline}
a:active {color:#f00; text-decoration:none}
Effecten van de instellen zijn als volgt:
We gaan nu enkele classes aanmaken. Het voordeel is dat classes bij meerdere elementen gebruikt kunnen worden. We gebruiken ze als we van de standaard af willen wijken. Wat we tot nu toe aan de stylesheet hebben toegevoegd dient nu als standaard te worden beschouwd.
De naam van de class mag je zelf bedenken en begint met een punt.
.note {font-size:9px; font-weight:bold; vertical-align:super}
.code {font-family:"Courier New", Courier, monospace; font-size:16px}
Als een afbeelding in een zin wordt geplaatst dan worden deze onder uitgelijnd. Om bij een vergelijking de tekst verticaal te centreren t.o.v. de afbeelding geven we de afbeelding de class eq.
.eq {vertical-align:middle}
We hebben onder voorbeelden van hoe je een kleur definieert. Het gaat in dit geval om tekst kleuren.
.wit {color:#fff}
.rood {color:#f00}
.geel {color:#ff0}
.groen {color:#0f0}
.cyan {color:#0ff}
.blauw {color:#00f}
.magenta {color:#f0f}
.zwart {color:#000}
Wilt u een blok tekst in rood dan maakt u de onderstaande code:
<p class="rood">Deze tekst is rood afgedrukt.</p>
Deze tekst is rood afgedrukt.