My dive into CSS: I'm missing something when applying it to Node-Red

[Trying_to_learn]

Yeah, I know it is outside the scope of this forum in that here we talk Node-Red. But Node-Red includes CSS, and after doing some exercises it isn't making sense.

What is said, what is written and what happens.

I know I have been down this a LONG time ago. I kind of got the answer/s, but I am reluctant to look at what was told then to get it working.

I'd prefer to work on what I am seeing now.

"Background pictures".
Be they colour, picture or pattern.

I have the background pattern (tiled) on a dashboard.
(Thanks @knolleary for the recent help)

So this is the code:

<style>
    .nr-dashboard-cardtitle {
        text-align:center;
    }
    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
</style>

I get it.
It is internal CSS.

An internal style sheet may be used if one single HTML page has a unique style.
The internal style is defined inside the element, inside the head section.

Ok. Got it.

There was coverage of where the CSS was applied.
There is the ., # and * types.
#foo is forelements with the name foo. Got it. I think.

So in/on my dashboard, I have an element (group) called SPARE.
I want to change the background colo(u)r of that group.

So, from how to aply internal CSS I do this:
example from course:

The CSS rule below will be applied to the HTML element with id="para1":
#para1 {
text-align: center;
color: red;
}

So it would be:

#SPARE{
background-color:pink
}

Yeah, I picked pink only to make it stand out.

So the code in the template node looks like:

<style>
    .nr-dashboard-cardtitle {
        text-align:center;
    }
    body {
        background-image: url("/Pictures/metal_4.jpg");
        background-repeat: repeat;
    }
    #SPARE{
    background-color:pink
}
</style>

Nothing.

So, what I have seen - and did with the supplied examples - doesn't work.

Yes, I am doing something wrong. But I can't see it.

Someone - please.

For the sake of putting all the cards on the table, here are some pictures.

[Steve-Mcl]

Check there is actually an element with id="SPARE" by using Dev tools.

Note, CSS selectors are case sensitive. Also, be sure to refresh the browser.

[Trying_to_learn]

I press the < F12> button and the dev tools open.
(Another rabbit hole)

ARGH!

Ok, I need to put the full name.
The school kind of negated that piece of information.

So I need to make it TV_Remote_control_SPARE and it works.

Ok. Thanks.

I'll get back to the school and classes.

I only did that because as nice as their examples are: they are very contrived.
And a few times the wording has sent me into an unending loop.

Thanks Steve.

[Trying_to_learn]

{{Thanks}}

Yeah, the full path is needed.

I've actually moved 2 squares forward. Not one. I hope that keeps me lucky.

[bakman2]

@Trying_to_learn

#foo is for elements with the name foo . Got it. I think.

Essential note: elements can either have an id and/or a class.

• id's are and should be unique
• classes are not

<span class="notunique" id="uniq">a class</span>

css stands for cascading style sheets - cascading is the key: define once (preferably from top elements) and it will cascade - hopefully.

tbh setting up a proper stylesheet is an art, with complex sites you will run into problems with the initial cascading has to be overruled ie: everything becomes an exception: then things work and then they don't.

#uniq{}
.notunique{}

[Trying_to_learn]

Thanks.

I have about 4 hand written pages of notes.

I am not going to go into web page design. I know that for sure. I'm too long in the tooth for that.

I am doing it a) for curiosity and b) to try and establish a single way of making buttons on my NR pages.

Alas it is not going to be easy.

I thought I had it earlier today, but that all fell apart. But that's status quo for me.

I'll hang in there and try to get my head around it. I skipped a few lessons and saw the bit of buttons. Yikes! Not really looking helpful. It seems to be written for those who already know. There are no (or very very little examples I can see, so this is going to be hard work.

[bakman2]

Small tip: use lower-case id's and classes unless you are seeking for problems

[Trying_to_learn]

though off topic: I write everything in "uppercase" by hand, and it is really annoying trying to write notes (like from the CSS School) where there are upper and lower case things written.