Inline <style> tags vs. inline css properties

Solution 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!

Solution 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.

Solution 3:

It depends.

The main point is to avoid repeated code.

If the same code need to be re-used 2 times or more, and should be in sync when change, use external style sheet.

If you only use it once, I think inline is ok.