When I see website starter code and examples, the CSS is always in a separate file, named something like “main.css”, “default.css”, or “Site.css”. However, when I’m coding up a page, I’m often tempted to throw the CSS in-line with a DOM element, such as by setting “float: right” on an image. I get the feeling that this is “bad coding”, since it’s so rarely done in examples.
I understand that if the style will be applied to multiple objects, it’s wise to follow “Don’t Repeat Yourself” (DRY) and assign it to a CSS class to be referenced by each element. However, if I won’t be repeating the CSS on another element, why not in-line the CSS as I write the HTML?
The question: Is using in-line CSS considered bad, even if it will only be used on that element? If so, why?
Example (is this bad?):
<img src="myimage.gif" style="float:right" />
Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you’re using inline css for things like
on each page to denote a page header, it would be a lot easier to maintain as
if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.
However, I’ll be a heretic and say that in your example, I see no problem. You’re targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.