Inline tags vs. inline css properties

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.

Leave a Comment