login  Naam:   Wachtwoord: 
Registreer je!
 Tutorials

Tutorials > CSS


Gegevens:
Geschreven door:
Joel
Moeilijkheidsgraad:
Gemakkelijk
Hits:
73849
Punten:
Aantal punten:
 (4.53)
Aantal stemmen:
17
Stem:
Niet ingelogd
Nota's:
 Lees de nota's (5)
 



Tutorial:

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:

Deze tekst is rood.


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:

Deze tekst is rood.


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:

Deze tekst is rood.


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:

Deze tekst is 150%


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:

Deze tekst is 15 points.


De derde methode werkt met "X aantal px (pixels)".

<STYLE TYPE="text/css">
P {font-size: 20px}
</STYLE>

Resultaat:

Deze tekst is 20 pixels.


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

« Vorige tutorial : Div element Volgende tutorial : Background »

© 2002-2021 Sitemasters.be - Regels - Laadtijd: 0.034s