CSS to make any bold text the color red

CSS Customisation
1

I would like my bold text to have a pronounced color such as red. Is there a way to do that?

I was thinking there might be CSS code that will make any bold text not only bold but red. So that it I typed, on the first level or second level or some other level, something like “The cat ate the poor bird!”, the word “poor” will be bold and red.

Thank you.

2

Hi,

You may try the following CSS rule for that:

.userContent strong { 
   color: red;
}

Hope this helps,

1 Like
3

Thank you, that worked.

For anyone else that might wish to try this, where you put the code matters. I already had css code from previous customizations in my CSS Screen Styles box on the settings page. I placed the code given above at the very bottom of that previous code and the above code did not work. I placed the above code toward the top and it does work.

1 Like
4

Thanks for that tip!

Cheers,

Jim

5

I’d suggest that you might have a CSS syntax error in the existing CSS code you have, so when you add the code below the error new code is ignored.

If you want, you can paste the CSS here so we could take a look :slight_smile:

Thanks,

6

That would be a big help. Thank you. This is for my dark mode:

@import url('https://fonts.googleapis.com/css?family=Tillana:400,500,600,700,800');

.editable, .editableList {
 line-height: 1.5;  
}

div.coreDiv, .editable { padding-top: 2px; padding-bottom: 2px;}

.authorPic, ul.comments table.commentTable td.authorPic {
   display: none;
}

.userContent strong { 
   color: red;
}

ul.comments div.coreNote {
   margin-left: 0;
}

.toolbarDiv {
  background-color: #24150E;
}

.coreNote{
  font-weight: 400;
  font-size: 12px;
}

ul.checklists li.tag_name div.tag_text {
    background: #24150E;
}

ul li {
  font-family: 'Tillana', cursive;
  color: #B47D5C;
  font-weight: 800;
}

ul ul li {
  color: #B5956C;
  font-weight: 600;
}

ul ul ul li {
  color: #F2EBE9;
  font-weight: 600;
}
7

OK, I’ve figured it out.
At the end of the rule

ul ul ul li {
  color: #F2EBE9;
  font-weight: 600;
}

you have a hidden invalid non-parsable character (right after the closing ‘}’).
You can see a trace of it if you start editing the text and press arrow key - you will have to press it twice to move cursor to the next line.
So, any rule inserted after this last rule will be ignored. You can remove the last line with } and re-type it, and after that, you can add strong rule at the end.

Take care,

8

Thank you very much. I did as you suggested and that worked.

1 Like