Advance CSS code for background colour of Heading tags (H2, H3) in a post

HTML & CSS
1

Hi. I want to change the background colour of heading tag H2 or H3 etc in my Wordpress post. There is section on right side of post editor where we can put advanced CSS for any customised changes.
Can anyone please help me what CSS code should I put there for this purpose.

If I want to change background of this H2 tag

image
image737×229 37.8 KB

2

If you want to add a background colour to your h2 tag, then you just need to add something like

h2 {
  background-color: red;
}

to your CSS (specifying the colour you want).

3

If you want to add a background color to your heading tag H1, H2, H3, H4 use this:

<!DOCTYPE html>
	<html>
  		<head>
	<title>HTML Font Color</title>
		</head>
<body>

	<h1 style="background:#FFAAAA">Tis is an example of HTML H1 background Color</h1>
	<h2 style="background:#FFAA0A">Tis is an example of HTML H2 background Color</h1>
<font color="red">Nere is my text! with font color color_name useing: color="red" </font> <br />
<font color="#0099FF">Nere is my text! with font color hex_number useing: color="#0099FF" </font> <br />
<font color="rgb(30, 45, 12))">Nere is my text! with font color rgb_number useing: color="rgb(30, 45, 12))" </font><br />

</body>
</html>
4

@gicamarinica, it is bad practise to use inline CSS as the whole point of CSS is to separate content from styling.

The <font> tag has been deprecated for a good many years now and should not be used.

5

It would probably be easiest to add a unique classname to that particular h2 tag and apply @Gandalf’s CSS code with that classname to target that h2 tag. For example

<h2 class="uniqueclassname">SAP S4 HANA Finance</h2>

h2.uniqueclassname { background-color: red; }

If you do not know how to do this using your Wordpress tools, we can move this post to the Wordpress category for you.

6

Without seeing your actual code… and after writing the above response, I realized that although you are talking about an <h2> tag, the red text is shown as normal inline text and should not be coded as a block <h2>. It would be far more appropriate if the text were surrounded by <span> tags and the unique classname applied to the span tags.

Then again, maybe the bold title is your <h2>.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.