Alter the colour of the words in title

.postitle_lay a {display:inline-block; color:#000 !important}
.postitle_lay a::first-letter {color:#bf2100 !important}

The first-letter selector only works if the a tag is a block level element.

Excuse me, may I know where should I paste the above codes?

There should be a file called style.css in your theme. Here it is:

https://newoutlookproducts.com/wp-content/themes/hathor/style.css

You could put that code at the end of that file.

I have pasted the above codes at the end of style.css.
But somehow I cannot see any change in the color of the title …

That’s because a whole swathe of styles in your theme have

!important

appended to them. This over-rides any subsequent instructions.

Lorro, by adding !important to those new styles, was trying to over-ride the over-rides. A valiant try, but didn’t quite work.

The problem is that those original styles are somewhere they didn’t ought to be and can’t be over-ridden. They’re in the html. On line 73. Maybe in a file called header.php. Be careful if you edit that, make a copy first.

You could add Lorro’s code after the other styles in the html.

But really none of it should be in there.

I don’t recommend adding to style.css because this file may be overwritten by theme updates.

Instead, you can use a plugin like this one:
https://www.ads-software.com/plugins/simple-custom-css/

The styles we want to override are not in header.php, they are generated by the flavour colour setting in Theme options. To ensure the new styles takes precedence, it’s necessary to make them more specific:

.home .postitle_lay a {display:inline-block; color:#000 !important}
.home .postitle_lay a::first-letter {color:#bf2100 !important}

Try to copy and paste exactly into the custom css plugin. The paste into style.css had a typo and could never have worked.

Yes! It works now!
Thank you for your help!:)

Just one more thing…
How to make the words larger and bold type?

Once I add “font-weight: bold”, all the words become red.

.home .postitle_lay a {display:inline-block; color:#000000; font-weight: bold; !important}
.home .postitle_lay a::first-letter {color:#bf2100; !important}

The !important was supposed to apply to the color not the bold but it looks like you got there!

No…I just change all the words in black in the website…then the title remind red in “?”, black in other words.

I still want to know how to make the words in the title be bold type!

Please help and thanks!

.home .postitle_lay a {display:inline-block; color:#000 !important; font-weight:bold}
.home .postitle_lay a::first-letter {color:#bf2100 !important}