How to make text lines have different colors not have a gap

This line of text shows the text lines with two different colors, but there is a line gap between YYYY and ZZZ lines, as if it has a <br>. Can you help me with a better way to show those lines with different colored text, and not have a space/gap between line YYY and line ZZZ? Thanks

<h3 class="thin"><p style="font-size:24px; color:#000000;">XXXXX XXXXX,<br> YYYYYY YYYYY, <p style="color:#800000;">ZZZZ ZZZZ ZZZZ</p></h3>

That HTML is horribly invalid. You can’t nest paragraphs, and headings can’t contain paragraphs.

If you want to mark certain phrases as different colours, use <span> tags. <p> is a block-level element which will always start on a new line.


Something like this:

<h3 class="thin">
  <span>XXXXX XXXXX</span>
  <span>YYYYYY YYYYY,</span>
  <span>ZZZZ ZZZZ ZZZZ</span>
.thin span{display:block}
.thin span:last-child{color:#800;}

Thanks for your replies/help, that worked successfully.

Now, I’m trying to put a down arrow (chevron) below the ZZZZ line, but when I do the ZZZ line isn’t color:#800 anymore, like so:

  <span>XXXXX XXXXX</span>
  <span>YYYYYY YYYYY,</span>
  <span>ZZZZ ZZZZ ZZZZ</span>
  <img src="../images/chevron.jpg" alt="">

Any suggestions?

That’s because it is no longer the :last-child

You can target the Z span with :nth-child(3)

.thin span{display:block}
.thin span:nth-child(3){color:#800;}
1 Like

Why are there two closing h3 tags?

Look at the css Paul posted,
read it,
try to work out how it works, why the Zs are red,
if there are properties or selectors you are not familiar with look them up in one of the many references.

Or :last-of-type :wink:

1 Like

That would really be considered a decoration image, it could be a background image on your <h3>, or on a pseudo ::after element.

If the image is related to the content of the document, then it belongs in the html as an <img>.

Having said that, then the span:last-child would continue to work correctly.


The <p> tag has a default margin before and after, usually with a value of 1em. You could had reset that with a p{ margin:0} to remove the gap. :slight_smile:

All CSS capable browsers uses a “user agent style sheet” with some default values for most html elements.

You can find an example of recommended CSS2 defaults for HTML4 listed here:

The’s default style recommendations for newer elements than in html4 can also be found, but not in any neat sample as the one above. :slight_smile:
Like at Living Standards:

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