CSS styling over inline styling has many benefits such as:
- Inline does not support :hover, :focus
- smaller in size.
- easier to maintain on large sites (one change, changes all).
- separates content from styling - better markup.
- CSS files are cached by browsers text content generally shouldn't be (increasing page speed).
- doesn't support features such as viewpoint and media queries.
You should consider CSS easier to maintain over inline code as changing one line of code is lot easier than several. Below is an example of how HTML/CSS makes code smaller and easier to maintain.
<h1>I am a header</h1><h2>I am a header</h2><h3>I am a header</h3><h4>I am a header</h4><h5>I am a header</h5>
Now lets pretend this was repeated many times over many pages you would need something like
<h1 style="font-size:44px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h1><h2 style="font-size:34px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h2><h3 style="font-size:24px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h3><h4 style="font-size:14px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h4><h5 style="font-size:4px;text-align:center;font-weight:bold;text-decoration:underline;">Header</h5>
Now the above examples is just an example but they look bulky and maintaining them would be a nightmare across a large site and also lack :focus, :hover as I mentioned eariler, the above can be simplifyed very easy in css like so:
h1, h2, h3, h4, h5{text-align:center;font-weight:bold;text-decoration:underline;{}
h1{font-size:44px;}
h2{font-size:34px;}
h3{font-size:24px;}
h4{font-size:14px;}
h5{font-size:4px;}
You can even find many more reasons at: http://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-csshttps://stackoverflow.com/questions/2612483/whats-so-bad-about-in-line-css
