Newbie can't get CSS to work in HEAD

Getting Started
1

I’m an obvious newcomer, but maybe someone will take pity on me…

I created a new document.

I added this code to the Head HTML:

<style >
	p {
	color:red;
	}
</style>

Then I added an HTML widget with just this code:

 <p>Hi</p>

I unchecked “Protect from external styles”.

But when I preview it, the text is still colored black. It seems so simple, that I must be missing something fundamental.

Thanks in advance for any help you can give me.

2

If you use

color: red !important;

It should work.

hth Olav

3

Thanks, Olav, for a quick reply but it still doesn’t work!

I guess I’ll try again in the morning with a fresh file and fresh eyes. If you have any other suggestions, I’d be happy to try them.

Thanks again.

4

Here is my file. Maybe this works for you?

Hi_red.hype.zip (10.1 KB)

1 Like
5

You don't need a 'Widget' for this, you need to put your HTML inside of the 'innerHTML' of your element. Olav's example has it, check it out.

2 Likes
6

Greg Is correct. When you use a widget you in effect create a web page within a webpage.
The css styles that you put in the Head will only affect the parent webpage. and not the inner one within the widget.
To affect it you would have to run some javascript on it after it has loaded or add a complete web page scheme to the widgets innerHTML.

<html><head>

	<style>
	p {
	color:red 
	}
	
	 
</style>
</head>
  <body>

  
 <p>Hi</p>
</body></html>

The preference though is to just use an Element which will be on the same plain of existence as the parent web page and therefore under the control of the Head where your css style is

2 Likes
7

Thanks, all of you!

I was sure I was missing something fundamental, and between Olav’s example and the explanations of what I was doing wrong, I’ve got it now. I had just assumed that HTML code belonged in an HTML widget.

In fact I’ve got it working two ways:
• with the CSS in the HEAD plus innerHTML in a text element
•with the entire HTML in a widget
Of course, I’ll obey MarkHunte’s advice and use the Element method.

Thanks again.

1 Like