What are Span styles?

[Shari Lindskov]

I'm brand new to CSS. I'm mystified by the span style. Can someone explain this or point me to something that explains it? Thanks.

[KevinDAmery]

Spans are inline formatting tags. I use them as a way to apply style classes to specific words rather than an entire block.

The W3 Schools article on them is here:

http://www.w3schools.com/TAGS/tag_span.asp

[SteveS]

And welcome to the forums, Shari.

In a lot of cases you can get away without worrying about spans, like Kevin says it is a way to apply a predefined style to a section of your document.

[KevinDAmery]

One place I find them useful is if I need to apply two different styles at once. For example, for tips, notes, warnings, etc. I have a generic class called ".Tip" that applies a left margin indent and borders along the top and bottom to make the paragraph stand out. However, I also want the text introducing the item to be in bold, for which I have a generic class called ".heavy". Of course, you can't apply to classes to the same tag, so I get around it by applying a span to the single word. For example:

Code: Select all

<p class="Tip><span class="heavy">Note:</span> This is something to pay attention to.</p>

[Shari Lindskov]

Thanks, Steve and Kevin. That helps!

[NorthEast]

One place I find them useful is if I need to apply two different styles at once. For example, for tips, notes, warnings, etc. I have a generic class called ".Tip" that applies a left margin indent and borders along the top and bottom to make the paragraph stand out. However, I also want the text introducing the item to be in bold, for which I have a generic class called ".heavy". Of course, you can't apply to classes to the same tag, so I get around it by applying a span to the single word. For example:

Code: Select all

<p class="Tip><span class="heavy">Note:</span> This is something to pay attention to.</p>

You could use an auto-number format to include that text and formatting automatically...

Code: Select all

p.Tip
{
	mc-auto-number-class: heavy;
	mc-auto-number-format: 'Note: ';
}

[KevinDAmery]

Good point, hadn't thought of that. That would be a streamlined way to do it - if I have reason to re-edit the project, I may do that (right now it's working so I don't think I'll redo all the tip sections just to be elegant )

To clarify for the OP and anyone coming along later, if you follow Dave's suggestion you still need the Span class. The difference is instead of manually applying it, you design an autonumber format that includes the leader text (i.e. in my example the leader text is "Tip) then you the mc-auto-number-class parameter in the stylesheet to apply the span style to the leader text. Basically this means you only have to apply one class to the whole paragraph while you're writing rather than a paragraph class plus a span class - so it automates the process somewhat.