Styling an existing text element with html

Need help App Organization
1

Hi,
I have a feeling this doens’t work but I’m asking anyway. I’ve googled this a bunch but can’t find any answers on this.

My question is:
Are there certain font styles that don’t work on existing html element? I’m trying to add blur.

Here is the html (I have more styles to add but I’m just trying to get it to work for blur first):
image

And here is to show that I know I need to have a proper ID tag.
image
But the text is not blurring. I’ve tested this out with online html editor tools and the css is correct.

Also, I know that I could just put the text into the html element but I already have a bunch of text elements throughout my app that I’m trying to apply with this css so it would be much easier if I could just edit the id tag of each text element as opposed to replacing all text elements with html elements.

I’ll also add that adding other styles to the css (such as background colour) works so it must be that one or both of text shadow and color: transparent don’t work.

Any help would be much appreciated.
Thanks,
Paul

2

A common challenge with custom CSS.
You have to enforce it with !important at the end of each CSS statement

So your CSS should look like:

#blurred {
  color : transparent !important;
  text-shadow: 0 0 5px rgba(0,0,0,0.5) !important;
}

That should get it to work

1 Like
3

Thanks so much. Worked like a charm.

I have used !important before but I never really knew what it’s use was.

1 Like