Tekst opmaak
1. Color (kleur van de tekst)
2. Font-size (grootte van de tekst)
3. Font-family (lettertype van de tekst)
4. Font-style (stijl van de tekst)
5. Font-weight (dikte van de tekst)
6. Text-transform (uppercase/capitalize/lowercase)
7. Text-decoration (decoratie van de tekst)
8. Letter-spacing (ruimte tussen de letters)
9. Text-align (uitlijning van de tekst)
Inleiding
In deze tutorial gaan we het hebben over hoe we tekst kunnen opmaken met CSS eigenschappen. De meeste eigenschappen vind je terug op deze pagina. Nog niet alle eigenschappen i.v.m. tekst zijn in deze tutorial vermeld.
1. Color (kleur van de tekst)
Er zijn drie methodes om tekst te kleuren in CSS. Bij de eerste methode schrijf je de kleur voluit (vb: red, black, green,...). Het nadeel van deze methode is dat je maar een beperkt aantal kleuren tot beschikking hebt.
<STYLE TYPE="text/css">
P {color: red}
</STYLE>
|
Resultaat:
Bij de volgende methode
vul je de hexadecimale code in van de kleur (vb: #000000, #FFFFFF, #FF0000, ...). Het voordeel van deze methode is dat je mar liefst 16.777.216 verschillende kleuren kunt gebruiken. Deze methode wordt ook het meeste gebruikt..
<STYLE TYPE="text/css">
P {color: #FF0000}
</STYLE> |
Resultaat:
De derde methode is ongeveer dezelfde als de tweede methode, alleen vul je hier niet de hexadecimale code in maar de RGB code. (rood groen
blauw). Het kleinst mogelijke waarde is 0, het grootst mogelijk is 255.
<STYLE TYPE="text/css">
P {color: RGB(255,0,0)}
</STYLE> |
Resultaat:
 top
2. Font-size (grootte van de tekst)
Met "font-size" kunnen we de grootte van het lettertype bepalen. Ook bij dit eigenschap zijn er drie verschillende manieren om de grootte van het lettertype te bepalen. De eerste methode werkt met "X aantal %". 100% is de standaard grootte.
<STYLE TYPE="text/css">
P {font-size: 150%}
</STYLE> |
Resultaat:
De tweede methode werkt met "X aantal pt (points)". Vele programma's zoals "Microsoft Word" werkt met pt.
Een voorbeeldje met points:
<STYLE TYPE="text/css">
P {font-size: 15pt}
</STYLE> |
Resultaat:
De derde methode werkt
met "X aantal px (pixels)".
<STYLE TYPE="text/css">
P {font-size: 20px}
</STYLE> |
Resultaat:
top
3. Font-family (soort lettertype)
Met het eigenschap "font-family" kunnen we het lettertype veranderen in CSS.
<STYLE TYPE="text/css">
H3 {font-family: Verdana}
H4 {font-family: Arial}
H5 {font-family: Courier}
</STYLE> |
Resultaat:
H3:Deze tekst is verdana
H4:Deze tekst is arial
H5:Deze tekst is courier |
top
4. Font-style (stijl van de tekst)
Met het
eigenschap "font-style" kunnen we de stijl veranderen in CSS. Verschillende mogelijkheden zijn normal, italic en oblique.
<STYLE TYPE="text/css">
H3 {font-style: Oblique}
H4 {font-style: Italic}
</STYLE> |
Resultaat:
H3:Deze tekst is vet gedrukt
H4:Deze tekst is schuin gedrukt |
top
5. Font-weight (dikte van de tekst)
Met het
eigenschap "font-weight" kunnen we de dikte veranderen in CSS. Dit kan op twee verschillende methodes gedaan worden. Bij de eerste methode kun je deze waardes gebruiken: (normal, bold, bolder, lighter).
<STYLE TYPE="text/css">
H3 {font-weight: Bold}
H4 {font-weight: Normal}
</STYLE> |
Resultaat:
H3:Deze tekst is dik
H4:Deze tekst heeft een normale dikte |
Bij de tweede manier heb je keuze tussen deze waardes:
(100, 200, 300, 400, 500, 600, 700, 800 en 900).
<STYLE TYPE="text/css">
H3 {font-weight: 900}
H4 {font-weight: 300}
</STYLE> |
Resultaat:
H3:Deze tekst is 900
H4:Deze tekst is 300 |
top
6. Text-transform (uppercase/capitalize/lowercase)
Met "text-transform" kun je de tekst transformeren naar allemaal hoofdletters (uppercase) of kleine letters (lowercase) met CSS. Het is ook mogelijk om van de eerste letter van een woord een hoofdletter te maken (capitalize).
<STYLE TYPE="text/css">
H3 {text-transform: Uppercase}
H4 {text-transform: Capitalize}
H5 {text-transform: Lowercase}
</STYLE> |
Resultaat:
H3:Deze tekst is in hoofdletters
H4:In deze tekst begint elk woord
met een hoofdletter
H5:Deze tekst is in kleine letters |
top
7. Text-decoration (decoratie van de tekst)
Met "text-decoration" kunnen we de tekst decoreren (versieren) met CSS.
<STYLE TYPE="text/css">
H2 {text-decoration: Line-through}
H3 {text-decoration: Normal}
H4 {text-decoration: Overline}
H5 {text-decoration: Underline}
</STYLE> |
Resultaat:
H2:Deze tekst is doorstreept
H3:Deze tekst is normaal
H4:Deze tekst is overlijnd
H5:Deze tekst is onderlijnd |
top
8. Letter-spacing (ruimte tussen de letters)
Met "letter-spacing" kunnen we de ruimte tussen de letters bepalen in centimeter (cm) of pixels (px).
<STYLE TYPE="text/css">
H2 {letter-spacing: -1px}
H3 {letter-spacing: 0.4cm}
</STYLE> |
Resultaat:
H2:Deze letters plakken op elkaar
H3:Veel spatie tussen de letters |
top
9. Text-align (uitlijning van de tekst)
Met "text-align" kunnen we de tekst uitlijnen op verschillende manieren (center, left, right en justify).
<STYLE TYPE="text/css">
H2 {text-align: left}
H3 {text-align: right}
H4 {text-align: center}
</STYLE> |
Resultaat:
H2:Deze tekst staat links
H3:Deze tekst staat rechts
H4:Deze tekst staat in het midden |
top
|
Wat is jouw favoriete javascript framework? (S: 18, R: 2)
(4.53) 