Wanneer we CSS-stijlen gebruiken voor de opmaak van onze pagina, wordt de inhoud van de pagina gescheiden van de opmaak van de pagina.
De inhoud van onze pagina, dat zijn de teksten, afbeeldingen, tabellen, formulieren, etc..., bevindt zich in de HTML-code, terwijl de CSS-regels zich bevinden in een ander bestand (extern), of in een ander deel (meestal het bovenste deel) van de HTML-code (intern).

Je kunt ook beide gebruiken, zowel intern als extern.
Mocht om één of andere reden beide CSS-styles met elkaar in conflict komen, bijvoorbeeld de interne style sheet zegt dat de achtergrondkleur groen moet zijn, en de externe style sheet zegt dat de achtergrondkleur geel moet zijn, dan zal de interne style sheet worden toegepast.

Het gebruiken van CSS-regels geeft ons twee voordelen:

1. je hoeft niet steeds elke wijziging die je aanbrengt aan het uiterlijk van een pagina, te herhalen voor elke pagina. Althans toch niet wanneer je met externe CSS werkt.
2. het scheiden van de inhoud van de pagina met de opmaak van de pagina geeft een meer eenvoudige HTML-code, hetgeen dan weer leidt tot kortere laadtijden in de browser.

Om een pagina te voorzien van interne CSS open je eerst deze pagina.
Klik "Wijzigen" in de menubalk, en kies "Pagina-eigenschappen" in het drop-downmenu.
Dit opent het Pagina-eigenschappen dialoogvenster.
Aan de linkerzijde van het dialoogvenster hebben we verschillende categorieën, en aan de rechterzijde hebben we de instellingen voor de aan de linkerzijde geselecteerde categorie.

Zo hebben we in de categorie "Weergave" de instelling voor het te gebruiken lettertype op deze pagina, de tekstkleur, de tekstgrootte etc.
We hebben de categorie "Koppelingen" waar we de instellingen voor de weergave van de koppelingen ingeven.

We hebbende categorie "Koppen", waar we de instellingen voor de weergave van de gebruikte koppen in deze pagina wijzigen.

Mocht je niet meer weten wat de "Koppen" zijn, wel die vind je in het "Eigenschappenvenster" onder het vak "Formaat".

Dus door de categorie "Koppen" te kiezen, kunnen we de standaardinstellingen van deze verschillende koppen wijzigen.

De twee overige categorieën hebben weinig te maken met de opmaak van uw pagina. Het enige wat ik hierover kwijt wil is dat de categorie "Titel/Codering" te maken heeft met het documentcoderingstype, en dat de categorie "Overtrekafbeelding" gebruikt wordt wanneer je een afbeelding wenst te gebruiken als richtlijn bij het ontwerpen van je pagina.

We gaan verder met de categorie "Weergave".
In het bovenste vak kies je door te klikken op het naar benedenwijzend pijltje, het te gebruiken lettertype voor deze pagina. In dit geval kies ik voor het lettertype Verdana. Als grootte kies ik 12 pixels, voor de tekstkleur kies ik blauw. En voor de achtergrondkleur kies ik een kakikleurtje.
Je kan deze kleuren aanpassen door op de kleurkiezer te klikken, of door de HEX-code, dit is een Internetkleurcode, in te typen in het invulvak. Typ voor de kleurcode een hekje (#), zo voorkom je problemen in sommige Browsers.
Klik de knop OK wanneer je klaar bent.

Met dit allemaal ingesteld gaan we eens kijken wat dit heeft toegevoegd in de HTML-code van deze pagina. Selecteer hiervoor het tabblad "Code" voor de weergave van je document.

Zoals je kunt zien in onderstaande afbeelding, is er bovenaan de pagina een interne CSS-Style toegevoegd, waarin de vier zojuist ingegeven instellingen zijn opgenomen.

Een CSS-style wordt ingedeeld volgens CSS-Regels, of een samenstelling van verschillende Regels. Meer over CSS-regels in de volgende les.

Nu gaan we eens kijken wat we kunnen doen met de categorie "Koppelingen".
Open opnieuw het dialoogvenster "Pagina-eigenschappen", en kies de categorie "Koppelingen".
In het bovenste vak kunnen we eventueel het lettertype voor de koppelingen wijzigen.
In het tweede vak kunnen we de grootte aanpassen.
En we hebben de kleurvakken "Kleur van koppeling", "Bezochte koppelingen", "Koppelingen die worden aangewezen", en het vak "Actieve koppelingen".

Het eerste, "Kleur van koppeling", bepaald de kleur van de koppeling.
Het tweede, "Bezochte koppelingen", bepaald de kleur van de koppeling die reeds is geklikt door de bezoeker.
De derde "Koppelingen die worden aangewezen", bepaald de kleur van de koppeling bij rollover.
En de vierde "Actieve koppelingen", bepaald de kleur van de koppeling wanneer de bezoeker zich op deze pagina bevindt.

En in het laatste vak "Onderstrepingsstijl" bepalen we hoe en wanneer we de koppeling willen onderstrepen. Standaard staat deze ingesteld op "Altijd onderstrepen", maar we hebben ook de mogelijkheid onze koppelingen "Nooit te onderstrepen", "Alleen te onderstrepen bij rollover", of de onderstreep te verbergen bij rollover.

Klik OK wanneer je klaar bent.

Wanneer we één of meer stijlen willen aanpassen, hebben we hiervoor verschillende mogelijkheden.
De eerste is terug het dialoogvenster "Pagina-eigenschappen" te openen.
De tweede manier is de eigenschappen te wijzigen in de broncode van je document.

En de derde manier is het CSS-paneel te openen, en het tabblad CSS-stijlen te kiezen.
Onder het tabblad "Alles" de stijl te selecteren, en in het deel "Eigenschappen voor **** " deze te wijzigen. Maar meer hierover in de volgende lessen.