Terug naar beginpagina Homepage-Maken.nl
Versio Webhosting   

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:

Een voorbeeld van text-align:

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

Resultaat:

Rechts uitgelijnde tekst.

Gecentreerde 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:

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.

Doorgestreepte tekst hier.

Letter-spacing

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

Mogelijke waarden:

Voorbeeld van letter-spacing:

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

Resultaat:

Hier is de ruimte tussen de letters 5 pixels.

Nu is de ruimte tussen de letters 7 points.

Word-spacing

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

Mogelijke waarden:

Voorbeeld van word-spacing:

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

Resultaat:

Nu is de ruimte tussen de woorden 5 pixels.

Hier is de ruimte tussen de woorden 7 points.

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:

Voorbeeld van text-transform:

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

Zo ziet de paragraaftekst met capitalize er uit.

Dit is uppercase tekst.

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:

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.

Homepage-Maken Tip

De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.

Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]