Homepage » Tutorials » HTML & CSS » Meer over styles

Meer over styles

Info
Door:	Rick	Moeilijkheidsgraad:
Geplaatst op:	09-02-2004	Reacties:	12(Bekijken)
Views:	24940 (gem. 10.3830 per week)	Log in om zelf te reageren
		Waardering:	7/10 (3 stemmen)

Uitgebreide cursus CSS» Inleiding: wat is CSS? | Linked stylesheets | Embedded stylesheets | Inline stylesheets | Je eigen styles maken | Meer over styles | Tekst en CSS | Achtergronden met CSS

Links omschrijf je in CSS als volgt

#	Code
1 2 3 4 5 6 7 8	a:link {  font-size: 11pt; color: blue; text-decoration: underline;} a:visited { font-size: 11pt; color: black; text-decoration: none;} a:hover {  font-size: 11pt; color: red; text-decoration: underline;} a:active { font-size: 11pt; color: black; text-decoration: underline;}

Dat is even heel wat informatie, we zullen het eerst bespreken. a.link geeft aan dat als we te maken hebben met een link, dus alles wat tussen <a href="blabla"> en </a> staat, 11 punten groot moet zijn, de kleur blauw moet zijn en dat er een streepje onder moet zitten. dat laatste geven we aan met text-decoration: underline;

Vervolgens zie je a.visited, a.over en a.active. De eerste geeft een link aan die door de bezoeker al eens bezocht is, de tweede geeft aan wat er moet gebeuren als je met je muis over de link zweeft (zweven=to hover) en de derde geeft de eigenschappen van een link aan die is aangeklikt. Let op: de vier linkproperties moeten altijd in deze volgorde worden gebruikt, omdat anders het effect van hover en active verdwijnen!

Verder kunnen we zo'n beetje iedere tag wel een een style meegeven. Bij de body kan dat ook, hier kunnen we wat meer mee dan met gewone tags. Ten eerste kun je door

#	Code
1 2	body{ font-size: 11pt; color: black;}

op te geven alle tekst die niet binnen een <p> of een ander attribuut staat een kleur, grootte en dergelijke meegeven.

Ten tweede, en nu wordt het leuk, kunnen we de randen van de pagina opgeven. Zoals je ook op deze site ziet, is er links een witte rand. Wil je boven geen rand, dan kun je dat ook opgeven. Dit kan overigens ook in HTML, maar we leren het je nu in een stylesheet te doen.

#	Code
1 2 3 4 5	body {  margin-left:0.5%; margin-right:0.5%; margin-bottom:0.5%; margin-top:0%;}

Dit spreek allemaal voor zich, maar toch nog even: left is de linkerkant, right de rechter, bottom is de onderkant en top, je raadt het nooit, de bovenkant. Verder kun je de marges opgeven in pixels maar ook zoals hierboven in procenten. Pixels doe je door bijvoorbeeld margin-left: 2px;.

De margins kun je ook bij andere elementen gebruiken, zoals de <p>-tag. Dan krijg je een soort inspring-effect. Je kunt op de pixel nauwkeurig bepalen waar de tekst begint. Dit is met HTML onmogelijk.

«Je eigen styles maken Tekst en CSS »

12 reacties
Sunnywout	Geplaatst op 04-05-2010 om 09:24
Regular	Met deze tutorial kon ik mijn nieuwe project beginnen. Heel duidelijk, bedankt!
baske123	Geplaatst op 19-04-2009 om 13:36
Regular	kan je er ook voor zorgen dat de randen van de pagina een andere kleur hebben?
baske123	Geplaatst op 19-04-2009 om 12:27
Regular	kan je er ook voor zorgen dat de randen van de pagina een andere kleur hebben?
ThePlague	Geplaatst op 25-04-2007 om 20:49
Regular	waarschijnlijk wel
Susanh	Geplaatst op 24-01-2007 om 17:24
Regular	Jeej.. dit is zo duidelijk! Geweldig! En toch heb ik nog een vraagje: Werkt font-family ook in body?? Alvast bedankt! Susan.
joevan74	Geplaatst op 04-11-2006 om 11:26
Regular	body { margin-left:0.5%; margin-right:0.5%; margin-bottom:0.5%; margin-top:0%;} waar moet je dat nu zetten tussen de head tags of ... en waar moet die link naar daar staan ..
Chalk	Geplaatst op 02-03-2006 om 11:46
Regular	dus je moet deze 3 css deeltjes in je .css bestand stoppen maar kan iemand een .html stuk geven want bij mij lukt het namelijk niet :o bij mij bljift alles wit.. dus zou iemand een stukje .html tekst willen ' schrijven ' met de juiste code's erin zodat ik kan zien wat er juist gebeurt ? alvast bedankt
maccadon	Geplaatst op 03-01-2006 om 13:34
Regular	Perfecte uitleg! Ik had al wat over css geleerd via engelse site maar dit is een stuk duidelijker. :)
Razorke	Geplaatst op 19-11-2005 om 09:05
Regular	goeie tutorial!! @ HotMan: ik denk gewoon dat (als ik je goed versta) je bij a:visited ipv 'none' dat je 'underline' moet invullen, als je nu je link zou zien, ga je er eerst op klikken, daarna blijft het lijntje. alink en visited ben je best altijd het zelfde te houden qua opmaak.
HotMan	Geplaatst op 01-03-2005 om 10:15
Regular	hoe kan ik ervoor zorgen dat er een streep onder de link blijft verschijnen als je erover gaat als deze link in een ander frame bevind, en dus niet ververst na het klikken erop?
Joniethan	Geplaatst op 14-01-2005 om 20:28
Regular	Inderdaad! Zeer duidelijk :D Ben blij dat ik deze site gevonden heb.
Xylonite	Geplaatst op 09-12-2004 om 08:21
Nieuwsposter	Weer wat geleerd :-) Héél duidelijk..

Om te reageren moet je ingelogd zijn.
Nog niet geregistreerd? Doe dat dan nu!

Terug naar gewone pagina