Drop links or images here to add them to the editor.

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.

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;
}
```
Internal CSS

In Dodona kan je maar één bestand versturen per indiening, waardoor internal CSS gebruikt wordt. Hierbij bevat de <head>-tag een extra <style>-blok, die de CSS-regels bevat (op dezelfde manier als in een extern css-bestand). Dit <style>-blok werd overal klaargezet.
index.html
```
<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Dit is een hoofding</h1>
</body>
</html>
```
Inline CSS

Bij inline CSS wordt de opmaak toegevoegd in elke tag. Indien je (achteraf) iets wil aanpassen vraag dit extra veel werk. Dit wordt sterk sterk afgeraden en ook fout gerekend.
```
<h1 style="color:blue;">Hello world</h1>
```
In de twee vorige methodes is de opmaak (CSS) duidelijk gescheiden van de inhoud (HTML), zodat (achteraf) wijzigen veel eenvoudiger is.

Documentatie

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

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.