In het vorige artikel over CSS hebben we al heel even de box genoemd, waarin je bijvorbeeld een tekst kunt plaatsen. Zo’n box heeft heel veel mogelijkheden en kan bij heel wat zaken van pas komen.

Bijvoorbeeld bij de manier waarop we op deze site een html-code weergeven. We gaan in dit artikel wat uitgebreider in op het maken van zo’n textbox, of, vrij vertaald, een tekstvak (kun je natuurlijk voor van alles gebruiken).

We gaan even uit van het volgende artikeltje:

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, 
sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna 
aliquam erat volutpat. Duis autum vel eum iriure dolor in 
hendrerit in vulputate velit esse molestie consequat, 
vel illum dolore eu feugiat nulla facillisis at vero eros 
et accumsan et iusto odio dignissim qui blandit praesent 
luptatum zzril delenit augue duis dolore te feugait nulla facillisi.</p>

Tekst die heel handig is en veelgebruikt wordt voor dit soort voorbeelden. De pagina met deze tekst ziet er heel simpel uit. Geen opmaak, of eigenlijk, alleen opmaak die door de browser zelf gegenereerd is.

Tekstvak zonder CSS

Tekstvak zonder CSS

Nu gaan we eens bekijken welke mogelijkheden er allemaal zijn voor ons artikeltje, eigenlijk voor ons tekstvak. Ten eerste gaan we er een rand omheen zetten. Ook moet de achtergrondkleur veranderen. Het lettertype passen we aan. Ook moet de tekst niet helemaal vooraan de kant beginnen. De regeleindes moeten ook mooi gelijk zijn, en het plaatje moet onderdeel worden van de tekst.

Eerst maken we een stijlblad. Daar moet de html-pagina heen verwijzen. dat verwijzen gaat als volgt:
<link rel="stylesheet" type="text/css" href="stijl.css" />

het stijblad kan nu apart gemaakt worden en heeft als naam stijl en als extentie .css (het stijlblad heet dus stijl.css).

Omdat de stijl geldt voor dit tekstvak gebruiken we de tag p (paragraph) en daar geven we een naam aan (class). De naam is ‘nummer1’. Het eerste wat nu op het stijlblad komt is deze naam en accolades. Dus als volgt:

p.nummer1 {
 
}

Nu gaan we de verschillende onderdelen er aan toevoegen. De rand er omheen bepaal je met de ‘border’. In ons geval kiezen we voor een border om de hele tekst heen. Je kunt alle vier de randen apart benoemen door te kiezen voor border-left, border-bottom, border-right en border-top.

Voor alle borders kun je weer een aantal onderdelen benoemen, namelijk de kleur (color), de dikte (width) en de stijl (style). Dit kun je allemaal apart benoemen, maar ook samenvoegen. In ons voorbeeld voegen we het samen als volgt:

p.nummer1 {
   border: 1px solid gray;
}

Hierbij is de hele rand 1 pixel dik (1px), doorlopend (solid) en grijs van kleur (gray).

Een regel met CSS, een lijn om het tekstvak

Een regel met CSS, een lijn om het tekstvak

We gaan verder en willen nu dat de achtergrond van ons tekstvak blauw wordt. Dat gaat met ‘background-color‘.

Met background-image kun je een plaatje als achtergrond maken en met ‘background-repeat‘ kun je bepalen hoe vaak dat plaatje terug komt.

Voor ons niet nodig, maar het kan allemaal. Nu gaan we het lettertype aanpassen. We kiezen voor een pakketje, waarbij de browser kiest voor het eerste hem bekende lettertype. Dat gaat met ‘font-family‘. Ook de lettergrootte passen we aan en dat doen we met font-size. Dit kan in px, pt, em en nog een paar mogelijke maten.

Het is ook nog eens handig om de tekst wat vanaf de kantlijn te laten beginnen. Dat doen we met padding-left. Hierbij kun je ook weer boven (top), onder (bottom), links (left) en rechts (right) aanpassen. Zet je alleen padding neer met een maat dan wordt alles aangepast aan die afstand.

De regeleindes moeten allemaal gelijk zijn en dat kan met text-align: justify;.

De breedte van de kolom bepalen we met width. Ook de hoogte kun je eventueel bepalen met height.

We krijgen na deze veranderingen de volgende code:

p.nummer1 {
  border: 1px solid gray;
  background-color: #ADD8E6;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 9pt;
  padding: 5px;
  text-align: justify;
  width: 150px; }

Uiteindelijk krijgen we dan dit tekstvak. Zie hier de kracht van CSS!

Tekstvak met CSS

Tekstvak met CSS

Wil of heb jij ook een website?

  • Krijg elke dinsdag tips en ideeën voor je website
  • Ontvang het ‘Het Complete Blog Ideeën boek‘ helemaal voor niks
  • Iedere week een update van nieuwe artikelen op mijn website

Meld je ook aan!