Bij de font-eigenschappen heb je de eigenschappen gezien die samenhangen met het lettertype. Daarnaast is het mogelijk tekst (tekens, woorden en alinea's) op te maken.

U beschikt daarvoor over de volgende eigenschappen:

  • text-indent = inspringen
  • text-align = uitlijnen
  • text-decoration = versiering
  • text-transform = hoofdlettergebruik
  • text-shadow = schaduw
  • letter-spacing en word-spacing = spatiëring

Inspringen

De eerste regel van een tekstblok kan worden ingesprongen. Je stelt dit in met text-indent. De standaardwaarde is 0. De verschuiving naar rechts kan een lengte zijn, een percentage of een geërfde waarde (inherit). De volgende declaratie zorgt ervoor dat elke eerste regel van een alinea 25 px inspringt.

p {
text-indent: 50px;
}

Tekst kan worden uitgelijnd tegen de linker- of rechterkant, worden gecentreerd of worden uitgevuld. de eigenschappen waarmee u dit bereikt is text-align.

Mogelijk waarden zijn:

  • left (standaard)
  • right
  • center
  • justify

Deze declaratie zorgt ervoor dat alinea's rechts worden uitgelijnd.

h1 {
text-align: center;
}
h2 {
text-align: left;
}
h3 {
text-align: right;
}
div {
width: 200px;
height: 200px;
text-align: justify;
}

Je kunt tekst 'opleuken' met verschillende effecten. Geef daarvoor de eigenschap text-decoration mee met de volgende waarden:

  • underline = onderstrepen
  • overline = lijn boven tekst
  • line-through = doorhalen
  • none = geen versiering, standaard

De standaardwaarde is none, maar browsers zijn zo geprogrammeerd dat hyperlinks worden onderstreept. de eigenschap wordt vaak gebruikt om de onderstreping van links aan te passen, in combinatie met de pseudo-klassen a:hover. Zo kunt u links ontdoen van hun onderstreping en de lijn

a {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}

Je wilt op uw nieuwspagina koppen waarvan elk woord met een hoofdletter begint? Gebruik dan de eigenschap text-transform.

De volgende waarden zijn mogelijk:

  • capitalize = beginkapitalen
  • uppercase = allemaal hoofdletters-kapitaal
  • lowercase = alle klene letters - onderkast
  • none = standaard

De volgende declaratie geeft koppen beginkapitalen:

p.uppercase {
text-transform: uppercase;
}
p.capitalize {
text-transform: capitalize;
}

De text-shadow hanteert schaduw tekst. Het volgende voorbeeld geeft de positie van de horizontale shadow (3px), de positie van de verticale shadow (2px) en de kleur van de schaduw (rood):

h1 {
text-shadow: 3px 2px red;
}
h2 {
text-shadow: 3px 2px 5px red;
}

Met letter-spacing en word-spacing beïnvloedt u de witruimte, de spatiëring, tussen tekens en woorden. Je kunt ook een negatieve waarde gebruiken, maar het resultaat is onvoorspelbaar.

De eigenschappen kunnen de volgende waarden hebben:

  • normal = standaard
  • een lengte
h1 {
letter-spacing: 2px;
}
h2 {
letter-spacing: -3px;
}
p {
word-spacing: 30px;
}

Voor afdruk kan het voor de leesbaardheid nuttig zijn de regelafstand groter te maken. Met de eigenschap line-height .

Deze kan de volgende waarden krijgen:

  • normal = standaard
  • nummer
  • lengte
  • percentage

Met een nummer wordt de regelafstand de grootte van het lettertype maal het nummer. Bijvoorbeeld als u gebruik maakt van 13 pixels en een line-height van 2, wordt de regelafstand dus 26 pixels.

p {
line-height: 1.5;
}

We kunnen hier ook em gebruiken die is relatief ten opzichte van de grootte van het gebruikte lettertype. Eeen regelafstand van 1.5 em wordt dus groter als het lettertype groter wordt door een gebruiker

p {
line-height: 1.5em;
}

Je kan ook dankzij de regelafstand tekst verticaal centreren.

.center p {
line-height: 1.5;
display: inline-block;
vertical-align: middle;
}