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

[ChrisjChrisj]

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>

[TechnoBear]

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.

[PaulOB]

Something like this:

<h3 class="thin">
  <span>XXXXX XXXXX</span>
  <span>YYYYYY YYYYY,</span>
  <span>ZZZZ ZZZZ ZZZZ</span>
</h3>

.thin{margin:0;color:#000;font-size:24px;}
.thin span{display:block}
.thin span:last-child{color:#800;}

[ChrisjChrisj]

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="">
</h3>
</h3>

Any suggestions?

[Ray.H]

@ChrisjChrisj

but when I do the ZZZ line isn’t color:#800 anymore, like so:

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

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

.thin{margin:0;color:#000;font-size:24px;}
.thin span{display:block}
.thin span:nth-child(3){color:#800;}

[SamA74]

@ChrisjChrisj

</h3>
</h3>

Any suggestions?

Question:
Why are there two closing h3 tags?

Suggestion:
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.

@Ray.H

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

Or :last-of-type

[Ray.H]

@ChrisjChrisj

Now, I’m trying to put a down arrow (chevron) below the ZZZZ line

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.

[Erik_J]

@ChrisjChrisj

…have a space/gap between line YYY and line ZZZ?

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.

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: https://www.w3.org/TR/CSS21/sample.html

The w3.org’s default style recommendations for newer elements than in html4 can also be found, but not in any neat sample as the one above.
Like at WhatWg.org Living Standards: https://html.spec.whatwg.org/#rendering