Inline <style> tags vs. inline css properties

Question

What is the preferred method for setting CSS properties?

Inline style properties:

<div style="width:20px;height:20px;background-color:#ffcc00;"></div> 

Style properties in <style>...</style> tags:

<style>.gold{width:20px;height:20px;background-color:#ffcc00;}</style><div class="gold"></div> 

Answer 1

Style rules can be attached using:

• External Files
• In-page Style Tags
• Inline Style Attribute

Generally, I prefer to use linked style sheets because they:

• can be cached by browsers for performance; and
• are a lot easier to maintain for a development perspective.

However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:

• provides a clear separation of markup from styling;
• produces cleaner HTML markup; and
• is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.

Inline elements only affect their respective element.

An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.

Read CSS: Specificity Wars for an entertaining look at this subject.

I hope that helps!

Answer 2

Here's one aspect that could rule the difference:

If you change an element's style in JavaScript, you are affecting the inline style. If there's already a style there, you overwrite it permanently. But, if the style were defined in an external sheet or in a <style> tag, then setting the inline one to "" restores the style from that source.