This is just a very short article, to convince you not to use in-line style, but use an external style sheet instead.
As you may or may not know css can be applied by using:
- an external stylesheet:
- style tags
- inline style
<div style="width:300px; height:300px; color:#333"></div>
4 Reasons why you should use an external style sheet!
- A good practice in coding is to separate style from content. One reason why this is a good practice, is because ones we separate stuff that does something different, it will be easier to isolate problems and maintain it in the long run. Certainly when you work in teams.
- Inline style is redundant. Ever seen a tabular design where the coder uses valign:top; on the table cells (<td>). While most use tables for no good reason at all, they often also use in line style. So in case they have a table with 10 rows and 3 columns, by using in line style they would have to set valign:top; 30 times. While it could be done with 1 single line in an external style sheet.
- Prevent chaos. inline styles are quite often the cause of pages breaking or codes not functioning as intended because of the extra semicolons ; too many " or ' or : characters.
- An external stylesheet is faster. Now this may sound weird, but if you would use either in-line style or styles by using the style tags, the page will load slower, than it would when using an external style sheet. For more details have a look here.
Hopefully, you make the above a best practice. it will save you time, keep things organized and even speeds up your website.
Rest me to wish you happy coding, and again, don't hesitate to leave a comment if it was useful, or if you want to request something.