2.1: Elementen

Er zijn drie verschillende manieren om de style-opties toe te passen op elementen binnen een webpagina. Dit zijn

Op elk element van hetzelfde type, bijvoorbeeld elke <h1>, <p>, <table> etc... op de webpagina.
Op elementen met een bepaalde class; dit wordt in hoofdstuk 2.2 uitgelegd
Op elementen met een bepaald id; dit wordt in hoofdstuk 2.3 uitgelegd.

In dit hoofdstuk gaan we dus eerst uitleggen hoe we stylen kunnen toekennen aan elk element van hetzelfde type.

We gaan er telkens vanuit dat we gebruik maken van een External CSS, aangezien deze het best te onderhouden is van de drie besproken mogelijkheden. We openen nu een nieuw document en slaan deze op als <bestandsnaam>.css

In dit nieuwe document kunnen we op de eerste regel gelijk beginnen met CSS. Als voorbeeld gaan we elke <h1></h1> op de pagina voorzien van dezelfde kleur, hetzelfde lettertype en gaan we ze centreren op de pagina. In het CSS-bestand beginnen we dan met de volgende code:

h1{
color: red;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}

Als we deze code bekijken zien we dat we eerst de naam van het element benoemen zonder de haakjes (géén < & >), hier dus alleen h1. Daarachter komt direct een { en deze wordt op het einde weer gesloten met }.
Alles wat tussen deze twee haakjes komt te staan heeft invloed op het element wat je ervoor vermeld hebt. In dit voorbeeld zie je de style-opties die we normaal in een style="" van een <h1> hadden kunnen zetten. Op elke regel zet je steeds één style-optie, die je afsluit met een ; (punt-komma). Het verschil zit hem nu dus in het feit dat op deze manier elke <h1> voorzien wordt met deze style-opties, en voorheen was dat alleen dat <h1> element die de optie style="" meegekregen had.

Een voorbeeld samen met het bovenstaande CSS-bestand ziet er dan als volgt uit:

html5 Code

Internet Explorer

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/CSS" media="all" />
  </head>
<body>
<h1>Eerste kop van de webpagina</h1>
<p>Tekst na de eerste kop...</p>
<h1>Tweede kop</h1>
<p>Tekst na de tweede kop...</p>
</body>
</html>

Eerste kop van de webpagina

Tekst na de eerste kop...

Tweede kop

Tekst na de tweede kop...

Je ziet dus dat je nu in je webpagina helemaal geen style-opties hoeft mee te geven, maar dat je die allemaal in je CSS-bestand kan zetten. Hierdoor wordt de code ook een stuk overzichtelijker.

Als we het CSS-bestand nu uitbreiden door style-elementen voor de <p> eraan toe te voegen komt het CSS-bestand er als volgt uit te zien:

h1{
color: red;
font-family: Verdana, Arial, Helvetica, sans-serif;
text-align: center;
}
p{
color: aqua;
font-family: Georgia, 'Times New Roman', Times, serif;
text-align: right;
}

Als we de webpagina nu weer een keer openen (of refreshen) komt deze er nu als volgt uit te zien:

<html>
  <head>
    <title>Titel van website</title>
    <link href="stylesheet.css" rel="stylesheet" type="text/CSS" media="all" />
  </head>
<body>
<h1>Eerste kop van de webpagina</h1>
<p>Tekst na de eerste kop...</p>
<h1>Tweede kop</h1>
<p>Tekst na de tweede kop...</p>
</body>
</html>

Eerste kop van de webpagina

Tekst na de eerste kop...

Tweede kop

Tekst na de tweede kop...

Je ziet dus dat nu ook alle <p> elementen voorzien zijn van een blauwe kleur en dat ze rechts zijn uitgelijnd.

Dit is een eerste stap die we met CSS gemaakt hebben, maar soms wil je dat alleen bepaalde elementen (van hetzelfde type) voorzien worden van een bepaalde style, en dus niet alle elementen zoals hierboven. Om dat te kunnen maken, moeten we gebruik gaan maken van classes en id's. We zullen nu eerst classes hiervoor gaan bespreken.