Trying to change the H4 font color with HTML

Can you post a link to your site?

The correct property is color, not font-color.

Are you sure you want to do this inline? If you have multiple h4 elements on the page, you should probably add the style to an external stylesheet, either by creating a child theme or using a CSS plugin. That way, if you do have multiple h4 elements to change, you only need to do it once, and it’s easier to make changes in case you’re not happy with your original setting. WordPress assigns a unique ID to the body element of all posts and pages (e.g., postid-117), so if you want to target the h4 elements on just a specific post, you can use something like this:

.postid-123 h4 {
   background-color:#018EC3;
   color:#FFFFFF;
}

If you just want to change the h4 elements within the main content area, then you’ll want to add .hentry to the middle of the selector.

Adding the style inline also makes it very difficult to override it in an external stylesheet, should you decide later that you do want to change it.

Thanks – yeah, you’re probably right I don’t want to do it inline. I’m finding whenever I edit using the Visual editor as opposed to the Text editor it looses its styling anyway.

What I actually want is a way to add that blue background with white text over it on specific posts. I don’t want it all H4 either, I’d like some of it to be regular P text.

That’s next level stuff for me and I can’t seem to figure out how to do that. Do you have any advice?

An example of it in action with just the H4 text is here:

https://www.planitnz.com/best-of-new-zealand-tour/

I never use the Visual Editor, it never ends up looking the same on my page, anyway, so I just stick to the text editor.

If you want to apply a certain appearance to a group of elements (e.g., white text on a blue background), the best thing to do is to define a class.

For example, you could create a CSS rule like this:

.highlight {
   color: white;
   background-color: blue;
}

The period at the front of a selector means it’s a class name (a hashmark (#) at the front indicates a selector for an ID).
Then for each element that you wanted to have white with a blue background, you would assign it a class of highlight:

<h4 class="highlight">Departure Dates:</h4>
<p class="highlight">This whole paragraph is highlighted.</p>
<p>Only the <span class="highlight">third</span> word is highlighted.</p>

You can call the class whatever you want, just don’t call it something like WhiteOnBlue; there may come a time when you decide that maybe yellow on green would be better, so you don’t want to go back & change the class names of all of the elements that you’ve assigned it to, you just want to change the property values of the CSS rule.

If you wanted to add some styling to a specific element type which has the highlight class assigned to it, you could create an additional rule like this:

h4.highlight {
   padding-left: 5px;
}

This would add 5px of internal spacing to the left of all h4 elements which have a class of highlight, so those elements would be white text on blue background, as well as having some spacing to the left.

You may want to go through a CSS tutorial.

Wow – thanks, that’s super helpful and makes total sense.

How would I join up the highlighting between the H4 and the P below.

https://www.planitnz.com/active-south-island-15-day-tour/

I’ll have a read through the tutorial now. Thanks again.

It’s actually an H5 element.

There’s a rule for .post-content h5 that adds 3px of margin to the left and 7px of margin at the bottom, so you’ll want to clear that so the left edges line up and there’s no space between them. There’s also a gray border defined for the bottom of the H5 element, so that needs to be cleared as well:

h5.highlight {
   margin-bottom: 0;
   margin-left: 0;
   border-bottom: none;
}

Once you go through the CSS tutorial, there are a couple of other articles which will be very helpful in targeting your CSS properly:
30 CSS Selectors
How to Calculate CSS Specificity

Finally, you should learn to use a web debugging tool like Firebug or Chrome Developer Tools. They will really help you see “under the hood” and find out what CSS rules apply to a certain element so you can write your own CSS to override it (I’ve been using Chrome DevTools to examine your site). What’s nice about these tools is you can modify the CSS interactively, so you experiment around with different settings before actually adding them to your CSS file.