HTML/CSS classes styling has no effect

Question

Hi! I can't seem to get HTML/CSS classes styling to work in my quizzes. Even the example code provided in the documentation doesn't seem to work correctly. The header shows up as normal text without the color, size, or font-weight specifications. The only specifier that seems to work when I add it in is font-family. What am I missing here?

Answer 1

Some times you will need to use the rule !important to override GuidedTrack's default styles:

*html
    <style>
	    .my-fancy-header-class {
		    color: purple !important;
		    font-weight: bold !important;
		    font-size: 96px !important;
	    }
    </style>

Thanks for pointing out that the example in the documentation had stopped working since the last update of GuidedTrack's styles. It has already been updated.

Comments

Thanks so much @belen! Follow-up question: is there any way to specify !important globally rather than for each style?

---

As far as I know, you need to do it by property. I also recommend that you initially define your custom CSS without the !important rule and make sure you only use it when needed to avoid overriding the style of elements other than those you meant to change inadvertently.