Modifiying text with CSS?

[ReadOnly]

Which is more correct if the text appears only once on the site?

This:

<h2>some text</h2>

In a separate style sheet

h2{
font-size: 14px;
}

or this:

<span style="font-size 14px;">some text</span>

 

[ronaldroe]

Always, always, always, always, always, always, always use CSS in a seperate stylesheet. If the text appears only once, you might consider using either a class or an ID to target it, like so:

<h2 class="title">Some Text</h2>

h2.title{font-size:14px;}

Now, a lot of people will tell you that if it's only used once, you should use an ID. I disagree. While "if used once use an ID" is a good rule of thumb to help you know which to use, IDs are designed more for HTML targeting and JavaScript selection, whereas classes are designed more for CSS selection.

 

[CaldwellYSR]

What ronald said... although to add a little bit about the id vs class issue. There's nothing wrong with using class for something that's only used once but id can ONLY be used to identify one thing, whereas class can target multiple elements at once.

 

[Phreaddee]

what ronald said, just with a few more always added.

 

[ReadOnly]

Thanks very much.
Follow up question. This is not just for text but in general. I need to give an element an ID or a Class and it doesn't necessarily need to be wrapped in <div>

Do I favor:
<div id="whatever"></div>
or
<span id="whatever"</span>

I had shown someone my code and I was told that I overused <span> but I didn't see the harm since it accomplished the same thing as <div> tags.

 

[CaldwellYSR]

Well a span is supposed to be used for inline elements. Typically it's not used that often. Anything that defines a logical "block" and doesn't make more sense for newer html5 elements should use a div. Personally I find myself using divs quite a bit more than spans. The only time I really use a span is if I want a little detail (like an arrow inside navigation or a magnifying glass in a search input).

 

[ronaldroe]

It doesn't matter if it works. Just be sure to know the very important difference between inline (span) and block (div) elements, so you know what to do if it breaks. Also, consider using neither if possible. For instance: If you need to do something with an image, just add your styles to the img tag instead of wrapping it in a div/span.

 

[Edge]

avoid spans

Generally speaking avoid spans - it's a tell tale sign of poor code quality. As mentioned quite often people overlook actually applying styles to the individual elements themselves such as h2, p, img etc. The number of times I've seen something needlessly enclosed in a div and a style attached to it is..
quite a lot.

Also, remember you can't wrap a bunch of block level elements such as headings and paragraphs in a span.

 

[ronaldroe]

Generally speaking avoid spans - it's a tell tale sign of poor code quality.

Says the guy with at least 15 instances of this in his website code:

<span class="field-content"><a href="/tech-support-articles/patching-umbraco-fix-security-vulnerability-aspnet">Patching Umbraco to fix security vulnerability in ASP.NET</a></span>

Generally speaking, you clearly don't understand spans or what they're for. Either that, or you're making things up as you go along. Spans are designed to wrap inline elements or create an inline element that is to be styled differently than neighboring content. For example, if you have a paragraph of text and would like to style, say a sentence or a word differently than the rest of the paragraph without breaking the line. Spans are also incredibly useful with the display:inline-block property to create and shift certain page elements that are otherwise more difficult to position or would not be considered semantic if displayed as a block-level element.

 

[Phreaddee]

spans can be very useful.

correct usage of span example

<h3>Some title<span>Alternate title</span></h3>

h3 {
font-size:18px;
font-weight:700;
color:#000;
}

h3 span {
font-weight:400;
color:#333;
}

clearly a div in their would be incorrect. so use where appropriate, I most certainly would not agree with the comment to avoid them.
if you have a need or desire to edit something inline, use a span.
if its a block level element use a div.