Example 1:

h1 { font: arial 20em/25em bold wider; }

Example 2:

h1 span { font: arial 20em/25em bold wider; }

In other words, is it ok to apply style directly to a semantic tag such as <h1> or would it be better to put a <span> inside it and apply the style to the <span> only? I have a co-worker who argues adamantly that example 1 is non-semantic.

I don't think that one is semantic over the other, though I would go for example 1 because it requires less code.

- Steve

I think the first one might be a bit overdone and I would instead assign a class to the h1 tag, and use h1.classname in the CSS instead.

Either one would be perfectly correct

Example 1 would be used if all the text in all <h1> elements were to be the same.

Example 2 would used when you wanted a change of style applied to a block of text (child element) within the heading.

Personally, I never use the font: selector, and instead use font-family:, then make a separate selector for font-size:, font-weight:, etc...