Tekstopmaak

In CSS kan je op veel manieren de opmaak van de tekst veranderen. Hieronder bespreken we een paar van de meest gebruikte. Het is natuurlijk ook mogelijk om ze te combineren.

font-size

Geeft grootte van tekst aan. Waardes:

xx-small
x-small
small
medium
large
x-large
xx-large
Een expliciete grootte, bijvoorbeeld: 40pt


      
p {
    font-size: ;
}
      
      <p>Een grote tekst</p>

line-height

De regelhoogte van de tekst. Wordt vaak aangegeven in em


    
p {
    line-height: em;
}
    
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus porta velit interdum eleifend dignissim. Vestibulum sagittis iaculis tempus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Curabitur facilisis tellus in ultricies dictum. Cras quam velit, convallis sed diam et, dignissim iaculis neque. Suspendisse mollis massa ligula, non consequat dolor scelerisque et. In at placerat eros, commodo vehicula orci.</p>

font-weight

Dikgedrukte tekst. Waardes: bold, normal


    
p {
    font-weight: ;
}
    
    <p>Een vette tekst!</p>

font-style

Schuingedrukte tekst. Waardes: bold, normal


    
p {
  font-style: ;
}
  
  <p>Schuingedrukte tekst</p>

font-family

Lettertype


      
p {
    font-family: "";
}
      
      <p>Een ander lettertype...</p>

color

De kleur van de tekst


      
p {
    color: ;
}
      
      <p>Mooie rode tekst</p>

text-decoration

Geeft aan of tekst onderstreept moet worden of niet. Waardes: none, underline, line-through


    
p {
    text-decoration: ;
}
    
    <p>Tekst met een lijntje</p>

text-shadow

Schaduw achter de tekst. Deze definieer je in de volgorde: ruimte naar links, ruimte naar beneden, blur, kleur.


    
p {
    text-shadow: 5px 5px px #666666;
}
    
    <p>Tekst met schaduw</p>

text-transform

Verandert de hoofdletters / kleine letters. Waardes: lowercase, uppercase, capitalize


    
p {
    text-transform: ;
}
    
    <p>Deze tekst wordt automatisch hoofdletters</p>

text-align

Uitlijning van de tekst


    
p {
    text-align: ;
}
    
    <p>Gecentreerd</p>