help with <span> tag

[electricocean]

hi,

I am trying to have background color for my text. The <span> tag works except it is only as long as text is. How would I make it longer?

my code:

<span style="background-color: #FFFF33; width: 580px;">Some Text</span>

I thought that width code would be good but it doesn't work, and I don't want to type in a million &nbsp; .

How would I make it longer?!

electricocean

[danmccarthy]

This will do it:

<span style="background-color: #FFFF33; width: 580px; display: block;">Some Text</span>

[bedlam]

This will do it:

<span style="background-color: #FFFF33; width: 580px; display: block;">Some Text</span>

Err... Yes it will, but there are several better ways. First off, it'd be better to declare the text style as a class (assuming it will be re-used) in an external stylesheet or in the document head. After that, it'd probably be better - or at least easier - to use an element that's already a block-level element rather than turning the span into one:

CSS:
==========

.highlight {background-color:#ff3;width:580px;}

HTML:
==========
<div class="highlight">Lorem ipsum dolor sit...</div>

...or...

<p class="highlight">Lorem ipsum dolor sit...</p>

...or...

<h1 class="highlight">Lorem ipsum dolor sit...</h1>

And, of course, I should mention that, if you want all div, h1 or p elements to have these color and width properties, your css would look like this instead (using <h1> for example):

CSS:
==========

h1 {background-color:#ff3;width:580px;}

...which would allow your HTML to look like this instead:

HTML:
==========

<h1>Lorem ipsum dolor sit...</h1>

-B

[danmccarthy]

I saw the post, and picked the solution that only required me to type 14 characters, including spaces. ;)

if (fast==good) {
i rock
}
else {
oops.
}

[tedster]

if you want all div, h1 or p elements to have these color and width properties...

GREAT point, bedlam.

I get my fingers into lots of websites these days, and the one common failing I see is that people are not using CSS to place rules for the basic elements - everything is a class or an ID. And often many-too-many of each of those.

I rarely find a good reason to use a span tag - except perhaps for triage in a really urgent case. And yet the sites that come to me are often loaded with span tags. Part of the blame falls with MS Publisher, from what I can see. And a lot of other trouble comes from authors not being clear about inline elements vs. block elements.

This discussion is probably better suited for the CSS Forum than here, but it's valuable enough to mention here in HTML and Browsers at least once, because so many people are trying to use CSS these days before they are clear about the basics of how CSS interacts with HTML.