7777 66

I'd like to color in the background of some text the way a link is colored in -- only the space directly behind the text is colored, not the whole div box. Is there a way to declare that in CSS without mixing spans into the content?

  • Will you explain why it is that you do not want to use spans? What is so bad about them? Abinadi Ayerdis almost 8 years ago
  • I'm trying to make a webpage with a retro look, so I was hoping to get text on a solid color with a tiled background (without obscuring the background). I was hoping I could set the style with one span declaration, but it gets broken up by "a", heading, and paragraph tags, so I guess I'll have to use multiple span tags throughout after all. I was hoping I could separate style/content better :-) 7777 almost 8 years ago

5 answers

o.k.w 2355
This was chosen as the best answer

"<span>" will be my choice, however you can use other inline element tags like "<label>", "<a>" (without 'href'), or even the deprecated "<font>"

Answered almost 8 years ago by o.k.w
  • Agreed. Although span tag is perfect for the job, any element will do. +1 Abinadi Ayerdis almost 8 years ago
  • Thanks, marking this one best because after I tried all of them, span turned out to be the best solution after all. 7777 almost 8 years ago

I agree with OKW. <span> is the way to go. You're not going to be able to style specific text differently than the rest without some sort of markup around it. You could use <strong> or <em> if that makes sense within the context of your site's copy, but if not I'd go with <span> as it is semantically neutral. Throw a class name on it if need be and apply background-color with CSS as you would for any other element.

Answered almost 8 years ago by Dwayne Anderson
  • Right on! Span doesn't already have other formatting or meaning attached to it. +1 Abinadi Ayerdis almost 8 years ago

It is fairly straight forward whatever element choose you style the element there.

For example if it's a header do the following

<h1>Colour my background</h1>

    /* add padding if needed */
Answered almost 8 years ago by Warren Buckley

Well you could just use background-color on that text as the person above me said, or if you need to specify a width / height to that text section you could use something like

<p>here's my nice and shiny text</p>
p {
  background-color: #f00;
  display: inline-block;
  height: 50px;
  width: 50px;
Answered almost 8 years ago by Alexandru Bucur

If it is for a link background, simply style the a element.

Answered almost 8 years ago by Jacob R