Cursus CSS - Les 4: Tekst

Met CSS kun je heel nauwkeurig instellen hoe de tekst op het scherm moet komen, je kunt veel verder gaan dan alleen de kleur instellen, je kunt bijvoorbeeld ook de hoeveelheid ruimte tussen de letters aanpassen - iets wat met alleen HTML niet kan. In deze les leer je de mogelijkheden die CSS je geeft om tekst op te maken, behalve lettertypes, die krijg je pas volgende les. Verder is het misschien handig om te vermelden dat je deze eigenschappen niet alleen op gewone tekst in de body kunt toepassen, maar ook bijvoorbeeld op een cel in een tabel, of op een hyperlink of op ieder element dat tekst in zich heeft.

Kleur

Laten we toch maar met kleur beginnen, dat is het eenvoudigst. Een tekst een kleur geven gaat in CSS met de color-eigenschap. Om een kleur te kiezen kun je gebruik maken van onze kleurengenerator gebruiken. Dit voorbeeldje zal de tekst rood maken:

body {
	color: red;
}

Achtergrondkleur

In CSS kun je ook de achtergrond-kleur opgeven, dat gaat met de background-color eigenschap. Het kan bijvoorbeeld handig zijn om woorden of zinnen te markeren. Om een kleur te kiezen kun je ook weer gebruik maken van onze kleurengenerator gebruiken. Dit voorbeeldje zal de achtergrondkleur van de tekst geel maken:

body {
	background-color: yellow;
}

span.speciaal {
	background-color: #00FF00;
}

Tekstrichting

Ook de tekstrichting kun je instellen met CSS. Dat gaat met de direction-eigenschap. Je kunt kiezen uit ltr (left-to-right, van links naar rechts) en rtl (right-to-left, van rechts naar links). Dit voorbeeldje zal bij alle div's met als class "ltr" de tekstrichting van links naar rechts maken, en bi alle div's met als class "rtl" de tekstrichting van rechts naar links maken.

div.ltr {
	direction: ltr;
}

div.rtl {
	direction: rtl;
}

Letterafstand

Je kunt de letterafstand veranderen met de letter-spacing-eigenschap. Je kunt een afstand opgeven, of normal opgeven. Je mag ook een negatieve waarde opgeven. Bij een negatieve waarde zal de tekst dichter op elkaar komen, terwijl bij een positieve waarde de tekst verder van elkaar af komt te staan.

div.normaal {
	letter-spacing: normal;
}

div.verder {
	letter-spacing: 15px;
}

div.dichter {
	letter-spacing: -5px;
}

Regelhoogte

Je kunt de hoogte van een regel instellen met de line-height-eigenschap. Je kunt kiezen uit:

• normal: dit is de standaardwaarde.
• een getal: de regelhoogte wordt berekend door het getal te vermenigvuldigen met de huidige lettergrootte
• een hoogte: de hoogte van 1 regel is de opgegeven hoogte
• een percentage: de regelhoogte wordt berekend door het opgegeven percentage te nemen van de huidige lettergrootte

div.normaal {
	line-height: normal;
}

div.hoger {
	line-height: 2.5;
}

div.lager {
	line-height: 10px;
}

Tekstuitlijning

Je kunt de tekst in CSS uitlijnen met de text-align-eigenschap. Je kunt kiezen uit:

• left: lijnt de tekst links uit. Meestal is dit de standaardwaarde, maar dat is browser-afhankelijk.
• right: lijnt de tekst rechts uit.
• center: centreert de tekst.
• justify: zorgt dat de tekst precies past (zoals je bij bijvoorbeeld kranten ziet: eventueel voegt hij witruimte toe om ervoor te zorgen dat het precies binnen de kolom past)

div.links {
	align: left;
}

div.midden {
	align: center;
}

div.rechts {
	align: right;
}

div.witruimte {
	align: justify;
}

Tekst-decoratie

Met de text-decoration-eigenschap kun je tekst speciale eigenschappen geven. Je kunt de tekst bijvoorbeeld onderstreept maken. De je kunt de volgende waardes gebruiken voor text-decoration:

• none: geen speciale eigenschappen, gewoon normale tekst. Is voor de meeste elementen de standaardwaarde (uitzonderingen zijn bijvoorbeeld hyperlinks)
• underline: onderstreept de tekst
• overline: zet een lijn over de tekst heen
• line-through: zet een lijn dwars door de tekst
• blink: laat de tekst knipperen (werkt niet in bijvoorbeeld Internet Explorer en Opera)

div.none {
	text-decoration: none;
}

div.underline {
	text-decoration: underline;
}

div.overline {
	text-decoration: overline;
}

div.linetrough {
	text-decoration: line-through;
}

div.blink {
	text-decoration: blink;
}

Tekst-insprong

Met CSS kun je de tekst-insprong aangeven met de text-indent-eigenschap. Met de tekst-insprong wordt bedoeld hoeveel de bovenste regel van dat element naar rechts moet inspringen. Je kunt een lengte opgeven, zoals bijvoorbeeld hoeveel pixels of hoeveel centimeter de tekst moet inspringen. Je kunt ook een percentage opgeven.

body {
	text-indent: 30%;
}