De CSS van deze site uitgelegd

Algemene styles

Katinka Hesselink januari 2006

De algemene styles voor deze site is als volgt gekoppeld aan elke HTML-pagina:

<link title="standaard" media="screen" 
rel="stylesheet" href="style.css"
type="text/css">
Het stylesheet begint als volgt:
body {background: #FaFdFf url(achter_wit.gif);
font-family: Helvetica, sans-serif;
color: #303;}

In de body tag definieer je de stijlen die voor de hele pagina gelden en de stijlen die voor de achtergrond van de hele pagina gelden. Ik stel de achtergrond kleur in op een heel licht blauw en daarover heen zet ik een zelf gemaakt achtergrond-plaatje dat grotendeels doorzichtig is: De witte rookpluimen die je over het blauw heen ziet gaan.Doordat het lichte blauw zo weinig verschilt van het wit, is het effect heel genuanceerd, al zeg ik het zelf. 

Voor de font-family heb ik helvetica gekozen. De gebruikers die geen helvetica op hun computer hebben zien een ander schreefloos (sans-serif) lettertje voor de tekst die niet verderop gedefinieerd is. De kleur is een paars-zwart: #303. Dit zie ik er niet aan af, maar ik zie wel dat het net wat warmer is dan gewoon zwart. Ik gebruik de verkorte notatie die het zelfde betekent als: #330033, voor wie de oude hex-beschrijvingen uit HTML gewend is. 

p {margin: 0.5em 0;
padding: 5px 12px 10px 0;}

De paragrafen krijgen een margin van een halve letter naar boven en beneden en geen margin links. Door de padding rechts, steken ze minder uit dan de koppen die je hier onder en boven ziet. 

Beide hebben de verkorte notatie, dat wil zeggen dat je rekent van bovenaf en dan met de klok mee. Omdat er slechts twee gegeven zijn, worden de andere twee genomen vanuit de tegenover liggende. Dus onder wordt het zelfde als boven ( 0.5em ) en links wordt het zelfde als rechts: 0. Omdat 0 altijd 0 is, welke maat je ook gebruikt, hoef je die maat niet mee te geven. Vandaar dat er 0 staat en niet bijvoorbeeld 0px.

Merk op dat ik geen font-size heb mee gegeven. Ik was wel tevreden met wat de browsers standaard aan lettergrootte hadden.

Op een aantal pagina's heb ik een regel benadrukt, door een klasse 'nadruk' mee te geven. HTML: 

<p class="nadruk">...</p>

CSS:

p.nadruk
{float: right;
width: 50%;
font-size: 1.5em;
margin: 5px 0 5px 15px;
padding: 0;}

Float: right , zorgt ervoor dat dit binnen het element waar het in zit ( #main in dit geval) rechts drijft (float) en vervolgens slechts half zo breed is als dat element. De grootte van de letters is 1.5em , oftewel anderhalf keer zo groot als het standaard lettertype. Vervolgens heb ik nog wat margin en padding mee gegeven. Met de klok mee, bovenaan begonnen: 5pixels, 0, 5 pixels en 15 pixels. 0 rechts om te zorgen dat de tekst zoveel mogelijk naar rechts gaat. Daar is tenslotte ruimte genoeg. 

Ik vond dat bij dit lettertype de ongenummerde lijsten ( UL ) er te verkrampt uit zagen. Om de regels uit elkaar te halen heb ik het volgende gedaan (standaard lineheight is 1.2em . De em is default dus die hoeft niet in de definitie.) Verder heb ik de ongenummerde lijsten wat padding rechts en links mee gegeven om het uitsteken naar rechts te verminderen, ook wordt hierdoor het contrast met gewone tekst wat groter (zie bovenaan deze pagina voor het resultaat.

ul li {line-height: 1.4;
padding: 0 15px;}

Pre is de code die ik gebruik voor het coderen van al de code die ik in deze site gebruik. Meestal gebruik ik meer citaten ( blockquote ). In dit geval krijgen ze gedeeltelijk dezelfde opmaak:

pre, blockquote 
{ margin: 0.5em 1em 0.5em 20px;
padding: 1.2em;
background: #EAECEE}
blockquote p
{ margin: 0;
padding: 0;
width: 100%;}

Een p in een blockquote krijgt geen marge en geen padding, omdat de blockquote zelf al zoveel lege ruimte heeft. 

Ik heb een aantal voetnoten in de tekst staan. Om daarnaar te verwijzen gebruik ik een klasse ( class ) voet, als volgt gedefinieerd:

.voet { vertical-align: 60%;
font-size: x-small;}

Er zijn wat stukken tekst geweest die ik vet wil laten zien. EM staat voor emphasize, oftewel benadrukken. De standaard instelling voor em is italic, maar dat ziet er op het scherm bij de meeste lettertypes niet goed uit. In plaats daarvan heb ik gekozen voor font-weight: bold (vet) en font-style: normal - niet italic. Dt staat voor 'definition term' Deze gebruik ik als onderdeel van definitie lijst ( dl ) in de lijst met website terminologie

em, pre em, dt
{font-weight: bold;
font-style: normal;}

dt {margin: 10px 0 3px 0;}

Voor de vele coderingen op deze site gebruik ik de codes <code> en <pre> . Code voor tekst in een paragraaf en pre voor de grijze stukken code. Omdat Courier New een term is die uit twee woorden bestaat, moeten deze omgeven worden door aanhalingstekens.

code, pre
{font-family: "Courier New",Courier,
monospace;
font-style: normal; }

Alle tekst zonder specifieke font-familiy aanduiding krijgt een sans-serif (schreefloos) font 'helvetica' of . Pre en code krijgen dus een monospace font. Voor de kopjes heb ik gekozen voor een serif font. Bij voorkeur Georgia , maar als dat niet geïnstalleerd is op de computer dan times new Roman .

Verder heb ik wat leuke achtergrond-kleuren voor de belangrijkste kopjes gekozen. De kleur (van de letters) die ik gekozen heb is dezelfde als die in body ook al was aangegeven. In het geval dat een gebruiker echter zelf kleuren in gaat stellen, over mijn kleuren heen, is het handig als zowel kleur als achtergrond-kleur gegeven zijn in het stylesheet. Het lukt niet altijd om daaraan te voldoen, maar in dit geval kan het geen kwaad.

h1, h2, h3, h4, h5
{padding: 5px;
margin: 5px 0;
font-family: georgia,"times new roman",
serif;
font-style: italic;
font-weight: normal;}
h1 {background-color: #E8F0F9;
color: #303;}
h2 {background-color: #E9E2E1;
color: #303;}
h3 {background-color: #CBBBB8;
color: #303;}

A staat voor link. Hier heb ik wel de kleur, maar niet de achtergrondkleur gegeven. Dat komt doordat de achtergrond-kleur doorzichtig moet zijn om de leuke golfjes die ik achterin heb te laten zien. De volgorde van de link-definities is van belang. In CSS is wat later komt altijd belangrijker dan wat eerder komt. In dit geval: hover is belangrijker dan visited en visited is belangrijker dan de algemene a. Dat moet ook zo, want als een link bezocht is, moet deze een andere kleur krijgen (een bruin in dit geval). Als ik er vervolgens met mijn muis overheen ga ( hover ), moet de kleur die daarvoor staat verschijnen, of ik nu eerder naar die pagina geweest ben ( visited ) of niet.

a {color: #3B4Bd8;}
a:visited
{color: #8B4B48;}

a:hover {color: #fB4B48;}

De definities die volgen hebben te maken met zaken die ik elders al heb uitgelegd: plaatsing, regel-lengte en CSS-menu's.

#main {position: absolute;
width: 70%;
max-width: 33em;
left: 14em;
top: 0;
padding: 0 0 20px;
margin: 0;}
#menu {position: absolute;
width: 13em;
left: 2px;
top: 0;
padding: 1px;
margin: 5px 1px;
text-align:center;
background-color: #CBBBB8;
color: #fff;}
#menu ul li a
{background-color: #EAECEE;
color: #303;
padding: 5px;
margin: 1px;}
#menu ul,
#menu ul li
{list-style-type: none;
display: inline;
padding: 0;
margin:0;}
#menu a {display: block;
padding: 10px;
margin: 1px;
line-height: 1.5em;
text-decoration: none;
font-size: medium;}
#menu a:visited
{color:#8B4B48;
background-color: #EAECEE;}
#menu a:hover
{color: #303;
background-color: #E8F0F9;}

Onderaan het menu heb ik links naar artikelen gezet die wat onderwerp betreft lijken op het artikel waar men mee bezig is. Om de letters daarvan wat kleiner te maken dan van de rest van het menu, heb ik een klasse 'twee' toegevoegd. Meestal aan de ul-tag om de extra links heen, maar soms ook rechtstreeks aan de link. Om te zorgen dat er in elke browser contrast is, heb ik aan #menu a ook een font-size toegevoegd. Het ziet er weliswaar heel verschillend uit in verschillende browsers, maar ik vind het er in elke browser die ik gecontroleerd heb aardig uit zien.

#menu ul.twee a, #menu a.twee
{font-size: small;}

Ik heb google-advertenties op mijn site staan, omdat ik ook ergens mijn brood mee moet verdienen. Om voor wat ruimte tussen de ads en de rest van het menu te zorgen, heb ik de ads in een div met class="google" gezet en de div vervolgens een marge (margin) mee gegeven.

#menu div.google
{margin: 10px 0;}
de rest van de stijlen staan in twee andere stylesheets: