Je kunt in principe elk lettertype instellen dat je wilt. Ook rare speciale lettertypes. Het nadeel is dat als mensen dat lettertype wat jij hebt ingesteld niet op hun pc hebben staan, ze het standaard lettertype krijgen en je letters dus niet zien. Je kunt ook meerdere lettertypes instellen door tussen ze te scheiden met een komma. Om zeker te zijn, kun je het beste als laatste altijd een standaard lettertype gebruiken.
Er zijn een paar standaard lettertypes die je kunt gebruiken in je html:
Deze lettertypes werken (bijna) altijd. Als je een lettertype gebruikt waar spaties in voorkomen, dan moet je single quotes ( ' ) om de naam zetten.
Je kunt op deze manier gebruiken:
body { font-family: arial, 'times new roman', serif; }
De eerste is arial. Deze zal niet werken op een Mac, dus dan gaat die naar de volgende. Daar zitten spaties in dus quotes eromheen. Als die ook niet aanwezig is, is er serif, want die is er (bijna) altijd.
Dan heb je natuurlijk ook nog bold (vet gedrukt), italic (schuin) en underlined (onderstreept). Bold doe je met font-weight. Mogelijke waardes van font-weigth zijn:
Italic kun je doen door de font-style te gebruiken. Mogelijke waardes van font-style zijn:
Oblique is het makkelijkste uit te leggen als een variant op italic. Italic is schuin. Onderstreept kun je doen met text-decoration. Mogelijke waardes van text-decoration zijn:
None zet alles uit, blink laat het knipperen (OFFICIEEL NIET VALID), line-trough zet er een streep door, underline onderstreept het en overline zet er een streep boven. Een voorbeeld waar de tekst dik, schuin en onderstreept van wordt:
body { font-weigth: bold; font-style: italic; font-decoration: underlined; }
Vaak is het ook het geval dat je het letterformaat wilt aanpassen. Daar is in css het attribuut font-size voor.
Font-size kan de volgende waardes hebben:
Het meest prakstische is om in je body een waarde in pixels(px) te geven. Dan is alle tekst even groot en is het makkelijk een klein beetje aan te passen.
Een voobeeld is:
body{ font-size: 13px; }
Om de kleur van je tekst te veranderen hebben we color.
Color kan de volgende waardes hebben:
Voorbeelden:
<code=css>body{
color: green;
color: #FF0000;
color: rgb(0,0,255);
}</code>
Tekst uitlijnen is erg simpel. Daar is het attribuut text-align voor.
De waardes van text-align zijn:
Left, right en center spreken aardig voor zich, justify zorgt dat we spaties in de tekst variabel worden, en dat de tekst aan beide kanten aan de kantlijn ligt, net als een krant doet.
Om het verticaal uit te lijnen kun je vertical-align gebruiken:
Vertical-align kan de volgende waardes hebben:
Er zijn er nog wat, maar dit zijn de meest gebruikte. Top bottom en middle spreken aardig voor zich, sub is lager en super is hoger.
Voorbeeld:
body{ text-align: center; vertical-align: top; }
In principe werkt een link maken exact hetzelfde als normale tekst, alleen moet je dan met a als object werken:
a{ color: #FF0000; }
Dan heb je ook nog zogenaamde pseudo classes. Dit zijn:
Die zet je achter je object. In ons voorbeeld doen we ze achter de a, maar het kan ook op andere objecten:
a{ color: #FF0000;} a:hover{ color: #00FF00;}
Dan is je link rood, maar als je je muis er op doet word deze groen.
Verder kun je alles met een link doen wat je met tekst ook kan
Deze cursus is afkomstig van Cursus CSS
Het is verboden zonder schriftelijke toestemming deze pagina in welke vorm dan ook te publiceren.