To do this kind of visual customisation in a big way, the normal approach is to develop a new Moodle 'theme': https://docs.moodle.org/dev/Themes

If you just want to tweak a few things, then you can use the settings at Site administration > Appearance > Additional HTML to add a bit of extra CSS to the head of the page.

In either case, to work out the CSS that you need, it is best to play around with the developer tools in your web browser. If you inspect the page, then you will find that there are plenty of class names to hook into. Each question is contained in a div with class name including 'que', and then you also have class names for the question type, the question behaviour, and the current question state. So, you are probably going to end up with a CSS rule like:

.que.correct .outcome {
    background-colour: #cfc;
}
/* Etc. */

• notyetanswered
• invalidanswer
• answersaved
• complete
• requiresgrading
• notanswered
• incorrect
• partiallycorrect
• correct