NEWSFLASH!

Hi guys,

Hopefully you read some fun and helpful stuff here. This blog is mainly aimed at the novice, mediocre and pretending to be advanced css student. If you have comments, questions or anything don't hesitate to post them. If you are completely new to css, you might want to have a look at a free tutorial of a former student of mine, although it's not a book, it should teach you the basics to give you a head-start in building your very own website.

Any ways enjoy your stay guys,

If it's not here maybe on a new blog somewhere with a decent editor. or if you lads are really generous on a commercial website :)

Cheers!



Cssfreakie



Tuesday, March 8, 2011

Don't use inline style

Hi everybody,

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:
<link href="http://somedomain.come/stylesheet.css" rel="stylesheet" type="text/css"></link>

  • style tags
<style type="text/css">
#myelement{
    color:#f4a;
}
</style>
  • 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.

Cssfreakie

No comments:

Post a Comment