treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Background Colour For Paragraph

  • Hello people.

    I'm having a little trouble setting the background colour of only the text within a paragraph, rather than the entire paragraph (block) having the background colour. I hope that makes sense. Here's an example:

    This is what I am trying to achieve:

    [attachment=1]right.gif[/attachment]

    This is what I am getting:

    [attachment=0]wrong.gif[/attachment]

    I can't for the life of me get it to happen although I'm sure I've done this accidentally before!

    Any help would be great.
  • The cause of the undesired affect is that Paragraphs are "block level elements" (ie, they make a rectangle).

    You can either a) make paragraph "display:inline" (or similar), or b) add a <span> (which is an inline element) inside your paragraph and assign the background color to that.

    Make sense?
  • <p style=\"color:#FFF;background-color:#000;\">
    <span style=\"color:#000;background-color:#FFF;\">
    This is paragraph text enclosed by span with a different background-color
    lets check<br>what<br>happens
    </span>
    <br>
    This is paragraph text with paragraph styling
    </p>
  • Works a treat, thanks gents.