I can’t find much about CSS in Hype documentation. I found an example in Tips & Tricks forum but that isn’t really explained in the basic way that I need.
All I’m trying to do is to get a class style defined in the Head HTML to apply to a Hype element with the same class name. Doesn’t happen. I’d be very grateful if somebody could take a look and tell me how. I’ve attached a simple example.
Thanks.
simpleCSStest.hype.zip (32.3 KB)
Hi Andrew!
You need to override Hype's settings with an inline specificity that contains an exclamation point preceding the word "important" - i.e. !important for each property. So - from your example we add...
<style>
.testclass {
color: blue !important;
background-color: LightBlue !important;
}
</style>Thanks so much Jim - as a newbie I would not have guessed that.
I now see that the head style needs a way to blast through what Hype must be defaulting as a full inline style(?). Couldn't find that anywhere. You are a gem!
Thank You! Just passing along what I have learned on this Forum - an incredibly useful resource!
Often You can find out what You are looking for by a Forum Search. Sometimes, however, the answer is buried or strewn over several topics (or not showing at all as in your case).
And You did a very good thing - showed your work in a Hype document - always useful to those who want to help as they can see you intentions and may be pick-up on something You may have missed in a verbal description of the problem. So You will get a more accurate answer, quicker. Even for this relatively straightforward question it was helpful.
You are correct that Hype uses inline styles, so to override Hype's styles on elements, you will need to use the !important directive.
However, if you are using styling for something like the Inner HTML of an element, this wouldn't be necessary. Instead you will just need to uncheck Protect from external styles in the Document Inspector to bypass the CSS Reset that Hype applies to make sure other [unwanted] CSS doesn't interfere with the look of the page.
Thanks @jonathan for the confirmation and new tip. I hadn't thought of using the innnerHTML option.