Newbie css question

1

Hello,

I'm still new to Hype, and I pretty sure I'm missing something obvious.
I want to style some words within a text block, and it works fine if I use a style in the innerHTML of the text itself. However, I'll be using the style frequently, so want to put it in the HeadHTML. For some reason I can't get that to work.
test css.zip (25.9 KB)

The innerHTML of the text with style looks like this:

Here is some text with <span style="color: #0433ff; border-bottom: 1px dotted #ff0000;">underline</span> using style.

This displays the way I want.
The HeadHTML has this:

<style>
.tooltip-txt {
	border-bottom: 1px dotted #FF0000;
	color: #0433ff; 
}
</style>

The innerHTML of the text with class looks like this:

Here is some text with <span class="tooltip-txt">underline</span> using class.

This works OK when I put the same code into a raw HTML file, but does not work from within Hype.
Any help would be appreciated. I'm all ready to kick myself ...

Bill H

2

Hi Bill!

I'm sorry but You are going to have to hold off on kicking yourself for some other occasion (the Holiday season still has a couple of weeks to go! :flushed:).

It is not obvious IMO - especially if You are used to coding "regular" HTML pages - but You need to use a high degree of specificity when using CSS in the "Head" section of a Hype project. Accordingly, use "!important" with every CSS property... e.g. using your example project:

CSS Demo

1 Like
3

Thanks - that did the trick, and I would not have thought of it myself.

2 Likes
4

If you are overriding properties that Hype specifically sets then you will need to use !important. Otherwise, typically unchecking Protect from External Styles in the Document Inspector is enough.

This disables the CSS Reset that Hype adds to the page which serves to insulate inner content from outer page properties.

1 Like