Hoe CSS toevoegen?

Bij oefeningen met CSS moet je in Dodona Internal CSS¹ gebruiken, omdat je bij Dodona slechts één bestand kan versturen per indiening. Voor andere opdrachten gebruik je best External CSS².

Inline CSS

Inline CSS wordt sterk sterk afgeraden en fout gerekend. De opmaak (CSS) scheiden van de inhoud (HTML) heeft als voordeel dat de opmaak (achteraf) wijzigen veel eenvoudiger is. Anders moet er in honderden lijnen gezocht worden naar de juiste CSS-eigenschap.
```
<h1 style="color:blue;">Hello world</h1>
```

Internal CSS

Voor Dodona gebruiken we internal CSS met de opmaak tussen style tags (in de head), omdat je maar één bestand kan versturen per indiening.

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Dit is een hoofding</h1>
</body>
</html>

External CSS

De beste manier is external CSS waarbij de inhoud en opmaak in aparte bestanden staan. In het HTML-bestand staat er een link tag (binnen head) die verwijst naar het CSS-bestand (in dit voorbeeld my_styles.css, maar kan ook een URL zijn). rel duidt aan dat de relatie met dat bestand van het type stylesheet is.
index.html
```
<!DOCTYPE html>
<html>
<head>
 <link rel="stylesheet" href="my_styles.css">
</head>
<body>
 <h1>Dit is een hoofding</h1>
</body>
</html>
```
my_styles.css
```
h1 {
  color: blue;
}
```

Documentatie

Gebruik deze bronnen om de correcte CSS-eigenschappen te vinden:

CSS Reference³
CSS Selector Reference⁴

Als de opgave hints bevat, zullen die ook naar die website verwijzen.

HTML render

Er is soms een verschil tussen de HTML render op Dodona en lokaal op jouw computer. Doordat de CSS-eigenschappen van Dodona overgeërfd worden door jouw indiening, krijgt jouw indiening de Dodona opmaak terwijl dit eigenlijk niet de bedoeling is. Er wordt gewerkt aan een oplossing, maar weet dat de render louter informatief is. De judge kijkt enkel naar de HTML en CSS en vergelijkt niet visueel.

Opmerking

Gebruik enkel een klasse of id indien dit expliciet gevraagd wordt. Alle andere aanpassingen moet je dus doen zonder klasse of id toe te voegen.