Hoe kun je tekst laten in- en uitklappen

#tekst {display: none;width: 250px;border: 1px solid black;background-color: #cccccc;padding: 5px;font-size: 12px;margin-bottom: 10px;}

Lees verder »

Positioneren met CSS


Er zijn een aantal manieren waarop je elementen een positie kunt geven met behulp van CSS.
Wanneer je welke manier gebruikt hang af van een paar zaken. Ten eerste wat je als basis wilt
gebruiken voor het te plaatsen element. Ten tweede de invloed van andere elementen op dat ene
element. We hebben het in dit artikel over statisch positioneren, relatief positioneren,
absoluut positioneren en over vast positioneren.

Lees verder »

CSS properties

Naar aanleiding van een eerder artikel waarin ik schreef over de basis van css, ga ik nu in op de verschillende properties van CSS. Wat kun je nu in de praktijk met CSS. Hoe pas je het toe? De belangrijkste properties op een rij gezet.

Lettertypes

Voor het lettertype te veranderen hebben we verschillende properties, denk maar eens aan grote, type, kleur, … Hieronder vind je een lijst van de belangrijkste properties.

font-family
Font-family is het attribuut om je lettertype van een een stijl te bepalen. Het is niet enkel mogelijk om 1 lettertype te kiezen maar ook om een voorkeurslijst te maken. Dit wil zeggen dat je meerdere lettertypes opgeeft in een bepaalde volgorde. In het geval dat hij het 1ste lettertype niet kan terug vinden, neemt hij het volgende op de voorkeurslijst.

CSS syntax:

.voorbeeld {font-family:"Times New Roman", Times, serif;}

Resultaat:

Times New Roman met alternatieven.

font-style
Font-style geeft een stijl aan je lettertype. Een stijl zoals cursief of de tekst schuin trekken.
Opgelet vet en onderlijnde tekst horen hier niet bij! Hiervoor gebruiken we een ander attribuut.

CSS syntax:

.voorbeeld{font-style:italic}

Resultaat:

Italic tekst.

CSS syntax:

.voorbeeld{font-style:oblique}

Resultaat:

Oblique tekst.

font-size
Font-size bepaalt de grote van je lettertype. Dit is heel nuttig om bijvoorbeeld titels aan te duiden en ze te laten opvallen. De waarde voor dit attribuut kan ook ingegeven worden onder verschillende types. Percentage tegenover het standaard lettertype, puntgrootte of een standaard waarde zoals small.
Alle waarden kan je terugvinden in de propertylijst.
We illustreren hier 2 voorbeelden.

CSS syntax:

.voorbeeld{font-size:x-large}

Resultaat:

x-large

CSS syntax:

.voorbeeld{font-size:15pt}

Resultaat:

Puntgrootte 15

font-variant
Je kunt ook kiezen tussen normale hoofdletters en kleine hoofdletters, voor minder opvallende tekst.

CSS syntax:

.voorbeeld{ font-variant:normal}

Resultaat:

normale tekst

CSS syntax:

.voorbeeld{ font-variant:small-caps}

Resultaat:

kleine hoofdletters

font-weight
Dit geeft letterlijk aan hoe ‘vet’ de letters moeten zijn. Het is mogelijk om 2 soorten waarden hieraan toe te kennen, een getalwaarde of een vooraf ingestelde standaardwaarde.

CSS syntax:

.voorbeeld{ font-weight:bold;}

Resultaat:

tekst in bold

CSS syntax:

.voorbeeld{ font-weight:900;}

Resultaat:

font weight van 900

Tekst opmaak

We kunnen nu al het lettertype aanpassen in een bepaalde tekst maar we mogen ook niet te vergeten de tekst zelf op te maken.
Zaken zoals uitlijning, regelhoogte, ze zijn even belangrijk in de opmaak van een stuk tekst.

letter-spacing
Je kunt de afstand tussen de verschillende letters aanpassen om zo de aandacht te trekken. Dit kan een alternatief zijn om tekst in het vet te plaatsen.

CSS syntax:

.voorbeeld{ letter-spacing: 4px;}

resultaat:

spacing 4, meer ruimte tussen de letters onderling

text-decoration
Text-decoration geef je de mogelijkheid om je tekst te onderlijnen of te doorhalen. Ook een lijntje
boven je tekst is hier mogelijk.

CSS syntax:

.voorbeeld{text-decoration: underline}

resultaat:

onderlijnen
.voorbeeld{text-decoration: overline}

resultaat:

lijn boven de tekst
.voorbeeld{text-decoration: line-trough}

resultaat:

doorstreepte tekst

vertical-align
Vertical-align geef je de mogelijkheid om Subscript en Superscript te plaatsen.
Dit is zwevende tekst of tekst onderaan een woord. Opgelet dit kan enkel gebruikt worden in
een in-line opmaak. Opmaak die in een lijn geldig is voor 1 of meerdere woorden of letters, niet voor een volledige body.

CSS syntax:

.voorbeeld{vertical-align: sub}

resultaat:
Subscriptsub

CSS syntax:

.voorbeeld{vertical-align: super}

resultaat:
Subscriptsuper

text-transform
Tekst kun je met css ook zo bewerken dat hij automatisch een volledige tekst of deel van een tekst zelf in hoofdletters plaats.
ook net anders om, in kleine letters.

CSS syntax:

.voorbeeld{text-transform: uppercase}

Lees verder »

DIV layers

Textbox in CSS met div

Je kunt met behulp van tabellen behoorlijk goed een pagina indelen en beheersbaar maken, maar met behulp van de div-tag kun je nog veel meer voor elkaar krijgen en heb je tabellen niet eens meer nodig. Je gaat textboxen maken, die je tot op de pixel nauwkeurig kunt neerzetten. Ook zetten we deze textbox in lagen.

Lees verder »