Some thoughts from one with experience, rather than a 'purist':
Storing all styles, for a large application, in one CSS file is not maintainable. You'll have perform a text search of the file to find the style you're looking for, or scroll a lot, and there's a higher chance that you'll overlook related styles when making an update.
If certain styles are particular to a page, not globally used, it is more maintainable to keep them in a style tag within the head tag.
Deep CSS inheritance hierarchies are also not maintainable. These are much, much worse than inline styles! The CSS language itself does a poor job of applying styles to many elements in more complex structures. Consider lesscss, sass, or even jQuery for more than basic application of styles.
Lots of developers use HTML for presentation, mostly DIVs, when they think they are doing the right thing, or lecturing others. Some example above!
Answer from Paul on Stack Overflowasp.net - Inline styles vs styles in CSS - Stack Overflow
Are you really *never* supposed to use inline styles?
css - What's the difference between inline styles vs classes? - Stack Overflow
Inline CSS vs CSS file - Styling (CSS) - Pinegrow Community Forum
Q1. Can inline CSS be overridden by other styles?
Q3. When should you avoid using inline CSS?
Q4. Can you use JavaScript to modify inline CSS dynamically?
Videos
Some thoughts from one with experience, rather than a 'purist':
Storing all styles, for a large application, in one CSS file is not maintainable. You'll have perform a text search of the file to find the style you're looking for, or scroll a lot, and there's a higher chance that you'll overlook related styles when making an update.
If certain styles are particular to a page, not globally used, it is more maintainable to keep them in a style tag within the head tag.
Deep CSS inheritance hierarchies are also not maintainable. These are much, much worse than inline styles! The CSS language itself does a poor job of applying styles to many elements in more complex structures. Consider lesscss, sass, or even jQuery for more than basic application of styles.
Lots of developers use HTML for presentation, mostly DIVs, when they think they are doing the right thing, or lecturing others. Some example above!
Using Inline CSS:
- Repeat the same rule for every element in the page.
- More code and bigger file size to transfer to the client.
- Harder to maintain, suppose you want to change the width to 200px, you will need to go through all the page and edit one by one.
inline:
<div style="width:100px; height:100px;"></div>
<div style="width:100px; height:100px;"></div>
external OR put css classes in the head [embedded styling]:
<div class="big"></div>
<div class="big"></div>
Based on your edit: that seems not to be inline CSS as in my example above, it is the same idea as using an external file, so if you want to do that go ahead, it is the same.
I am relatively new to CSS. I understand the rationale for not needlessly cluttering your HTML with constant, repeated styles. Like, if I have a bazillion elements that need a set of shared values, okay, great, I'll make a class. Or, if I have an element that needs a bazillion styles, I'll make a class.
The part that frustrates me is when I have, for example, some random <p> tag that just needs a different color. Should I really be writing some crap like this:
.someclass .anotherclass > p { color: salmon; }
in order to target that ultra-specific <p> tag, or should I just chuck that color inline, i.e. <p style="color: salmon;"> and forget about it? Because the latter is definitely more convenient.
First of all:
- If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and other dynamically-generated site content. The HTML output must contain absolutely no styling or layout of any sort at all. No exceptions.
Assuming you're dealing with static content, then:
If there's any way you can reuse the style, make it a class and link to a stylesheet.
If there's no way would ever reuse the style (it's a one-off thing that doesn't make sense anywhere else) then use a
<style>block that references the element's #id.If the CSS attribute only makes sense in the context of the surrounding HTML (e.g. some usages of
clear:) then I inline the style into the element.
A lot of people call this heresy, just like a lot of people denounce any use of goto in modern programming languages.
However, rather than subscribing to stylistic dogma, my view is you should choose the method based on your circumstances that decreases your overall workload the most. Stylesheets add a level of indirection that makes site-level changes easy and helps build consistency. But if you have several dozen classes on each page that are only used in one place, then you're actually increasing your workload, not decreasing it.
In other words, don't do something dumb and confusing just because people tell you it's the right way to do it.
There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.
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
<div style ="font-size:larger; text-align:center; font-weight:bold">
on each page to denote a page header, it would be a lot easier to maintain as
<div class="pageheader">
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.
The advantage for having a different css file are
- Easy to maintain your html page
- Change to the Look and feel will be easy and you can have support for many themes on your pages.
- Your css file will be cached on the browser side. So you will contribute a little on internet traffic by not loading some kbs of data every time a the page is refreshed or user navigates your site.