De layout aanpassen met CSS

Wat is CSS?

Cascading Style Sheets (afgekort tot CSS) is een manier om de vormgeving voor een serie webpagina’s in één keer vast te leggen. De informatie over de vormgeving voor het hele document wordt toegevoegd aan de HTML-code ervan. Die informatie kan in het document zelf staan, maar ook in een extern document dat wordt geïmporteerd. Een dergelijk apart geïmporteerd document wordt ook wel stylesheet genoemd.

Een stylesheet biedt de mogelijkheid inhoud en vormgeving van een document van elkaar te scheiden en op die manier een consistente vormgeving over meerdere documenten te bereiken.

Lettertype en tekstversiering veranderen

Om te beginnen gaan we het lettertype van de links uit het menu aanpassen:

 Klik rechts op de <a>-tag onderaan (of dubbelklik de A-knop in HTML-tags weergave en kies ’Geavanceerd bewerken’) en selecteer het tabblad ’Tekst’ in het venster ’Inline stijlen’
 Verander het lettertype naar Arial
 Vink bij ’Tekstversiering’ het vakje ’geen’ aan; de onderstreping onder de link verdwijnt.

De menu-items van een onderrand voorzien

Om het menu een duidelijker structuur te geven gaat u nu onder elk item een rand plaatsen.

 Plaats uw cursor in de tekst ’Contact’
 Klik rechts op de <li>-tag onderaan (of dubbelklik de LI-knop in HTML-tags weergave en kies ’Geavanceerd bewerken’) en selecteer het tabblad ’Tekst’ in het venster ’Inline stijlen; zoals u al gezien hebt is <li> de code voor een ongenummerde lijst
 Vink het vakje ’Alle zijden dezelfde rand laten gebruiken’ uit
 Nu kan u, enkel voor de onderrand, de waarden ’vast’ (voor de lijnstijl) en 1px (voor de lijndikte) ingeven.

De opsommingstekens weghalen

Tot slot kan u ook nog de opsommingstekens verwijderen (of veranderen).

 Selecteer eventueel opnieuw de linktekst die u wil bewerken en klik rechts op de <li>-tag
 Zet in het tabblad ’Lijsten’ het Lijststijltype op ’geen’.

Sla het resultaat op en bekijk het in Firefox.