Inline <style> tags vs. inline css properties
css, html
Solution
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.
Problem
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> ```