Using <span> within a class

[MortimerJazz]

I'm using Joomla to construct a site.

The following CSS is placed within a table cell with a class name of "contentheading"

span.frontpage {
display: block;
background: #FCF0C8;
font-size: 12px;
padding: 10px;
margin-bottom: 10px;
color: #333;
border: 1px solid #ddb;
}

How do I need to change the code to enable it to work within the class of "contentheading"

I've tried

span contentheading.frontpage{

}

but without luck.

Could anybody help me? I've tried searching for the answer and it's getting me frustrated now.

Thanks alot in advance

[moredial]

It will either be

span.contentheading span.frontpage

or

span.frontpage .contentheading

depending on whether you want to limit the style to the span tag or all content.

[MortimerJazz]

Thanks moredial - I'm still not having any luck I'm afraid.

Can you run a <span> tag in the middle of a CSS class?

Thanks,

[DioBach]

Originally Posted by MortimerJazz Thanks moredial - I'm still not having any luck I'm afraid. Can you run a <span> tag in the middle of a CSS class? Thanks,

Why not just create a new css class for the span you want? You can then use the span with a class in the middle of what ever css class your using, it's a great way of over-riding the standard formatting you've set up in your css. You have to watch where you place you span tags though - say you want a non standard H3 or an A that's outside your universal declaration - nest the span in side the tags you want to use to do it - so <a h...><span class="newformatting">Content</span></a> sort of thing.

[moredial]

If you are having problems with the class not working as expected, look at the cascading effect.

The easiest way to do that is using FireFox with the webmaster tools enabled. Then, at the top of the window you see all the styles that apply to the bit of text that you are interested in.

Rather than a .class I prefer the #id which I find easier to follow when I am debugging css that is not behaving as expected. I use the #id to set everything as I want it, reversing the cascading effects where necessary and then use .class to fine tune within the ID.

The bible on css and syntax can be found here: CSS2 Test Suite: Index including the various browsers and their bugs explained (or not explained, depending on your point of view) and most browsers should now display the css2 examples correctly although IE is still behind in its development.

View the page source to fully understand some of the comments.