Question

Is it possible like lets say the text in the div header has a red hover, and the text in the div in the footer a white hover?
Or is this just not possible and can you only set 1 style for the whole document?

Answer 1

This is very much possible, just like any other element you can style them separately by being more specific.

If you have this HTML:

<div id="top">
    <a href="#">First link</a>
</div>

<div id="bot">
    <a href="#">Second link</a>
</div>

With this CSS you would style both links:

a:hover {
    color: #000;
}

With this CSS you can style them separately:

#top a:hover {
    color: #f00;
}

#bot a:hover {
    color: #fff;
}