Les 5

Tekst

Met CSS kun je verschillende teksteigenschappen opgeven, zoals de ruimte tussen letters en woorden en het uitlijnen van de tekst. Deze dingen zijn vaak niet of nauwelijks mogelijk met HTML alleen.
Hieronder worden de verschillende teksteigenschappen besproken.

Text-align

Met text-align kun je een tekst uitlijnen.

Mogelijke waarden:

• center
• left
• right
• justify

Een voorbeeld van text-align:

p { text-align: right }
div { text-align: center }

Resultaat:

Rechts uitgelijnde tekst.

Text-indent

Met text-indent kun je de eerste regel tekst van een paragraaf laten inspringen.
De waarde van text-indent is een lengte, zoals bijv. pt, px, of een percentage, %.

Voorbeeld van text-indent:

p { text-indent: 35px }

Resultaat:

Zoals je ziet is nu de eerste regel tekst van deze paragraaf 35 pixels ingesprongen. De tweede regel is weer normaal.

Text-decoration

Met text-decoration kun je een tekst versieren.

Mogelijke waarden zijn:

• none
• underline
• overline
• line-through
• blink

Voorbeeld van text-decoration:

h1 { text-decoration: overline }
p { text-decoration: underline }
div { text-decoration: line-through }

Resultaat:

H1 overline

Onderstreepte tekst in deze paragraaf.

Letter-spacing

Met letter-spacing stel je de ruimte tussen de letters in.

Mogelijke waarden:

• normal
• auto
• of een lengte (zoals px, pt)

Voorbeeld van letter-spacing:

p { letter-spacing: 5px }
div { letter-spacing: 7pt }

Resultaat:

Hier is de ruimte tussen de letters 5 pixels.

Word-spacing

Word-spacing is soortgelijk aan letter-spacing, alleen stel je nu de ruimte tussen de woorden in.

Mogelijke waarden:

• normal
• of een lengte (zoals px, pt)

Voorbeeld van word-spacing:

p { word-spacing: 5px }
div { word-spacing: 7pt }

Resultaat:

Nu is de ruimte tussen de woorden 5 pixels.

N.B. Als je geen verschil ziet, dan kan dat kloppen.
Word-spacing wordt niet ondersteund door Internet Explorer 5, dus daar kan het aan liggen.

Text-transform

Met text-transform kun je hoofdletterinstellingen opgeven.

Mogelijke waarden:

• none
• capitalize
• uppercase
• lowercase

Voorbeeld van text-transform:

p { text-transform: capitalize }
div { text-transform: uppercase }

Zo ziet de paragraaftekst met capitalize er uit.

Line-height

Met line-height kun je de afstand tussen de regels van een paragraaf of een ander stuk tekst bepalen. Dit is erg handig, vooral omdat dit met HTML moeilijk te bereiken is.

Mogelijke waarden:

• normal
• of een eenheid als pt of px, of een percentage

Voorbeeld van line-height:

p { line-height: 20pt }

Resultaat:

Je ziet nu dat de afstand tussen de verschillende regels in deze paragraaf 20 points groot is geworden. Zo kun je dus heel makkelijk de regelafstand instellen met behulp van Cascading Style Sheets.

Einde les 5

In deze les heb je gezien hoe je allerlei teksteigenschappen kunt instellen met CSS.
De volgende les gaat over Classes en ID's.

• Verder naar les 6!
• Terug naar het lessenoverzicht

MijnHomepage Tip