How to add CSS?

For exercises with CSS you have to use Internal CSS¹ in Dodona, because with Dodona you can only send one file per submission. For other assignments it’s best to use External CSS².

Inline CSS

Inline CSS is strongly discouraged and considered incorrect. Separating the layout (CSS) from the content (HTML) has the advantage that it is much easier to change the layout (after the fact). Otherwise, hundreds of lines have to be searched for the correct CSS property.
```
<h1 style="color:blue;">Hello world</h1>
```

Internal CSS

For Dodona we use internal CSS with the layout between style tags (in the head), because you can only send one file per submission.

<!DOCTYPE html>
<html>
<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>This is a heading</h1>
</body>
</html>

External CSS

The best way is external CSS where the content and layout are in separate files. In the HTML file there is a link tag (within head) that points to the CSS file (in this example my_styles.css).
```
<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="my_styles.css">
  </head>
  <body>
    <h1>This is a heading</h1>
  </body>
</html>
```
my_styles.css
```
h1 {
  color: blue;
}
```

Documentation

Use these sources to find the correct CSS-properties:

CSS Reference³
CSS Selector Reference⁴

If the problem contains hints, they will point to that website as well.

HTML render

There is sometimes a difference between the HTML render on Dodona and locally on your computer. Because the CSS properties of Dodona are inherited by your submission, your submission will get the Dodona lay-out when it isn’t actually intended to. A fix is in the works, but please note that the render is for informational purposes only. The * judge* only looks at the HTML and CSS and does not compare visually.

Remark

Only use a class or id if explicitly requested. All other adjustments must therefore be made without adding a class or id.