Inline styles won’t solve your problems…

h2. …but maybe it can save your sanity

The issue of inline styles came up recently in regard to something in the stylesheet not working right. Instead of fixing the problems in the stylesheet, it appears there are people resorting to inline styles to “fix” their troubles by overwriting the stylesheet. This bothers me for a lot of reasons, but I have a feeling it’s pretty common.

The designer dilemma

For newbies ^don’t be ashamed^, and inline style is a style property inserted somewhere in your html. Anytime you see the word “style” in your html document anywhere within the “ tag, you’ve got an inline style. Very often I’ll see something like this:

<div>Copy here</div>

This should be <div>Copy here</div> and then the styles themselves should be up in the stylesheet like this:

.ClassName {
margin: 10px;
background: #eeeeee;
font-size: 12pt;
border: 1px solid #777;
}

I don’t think every person using inline styles is doing so in blatant rebellion of web standards. I think most people get so busy that when they run into a snag in their stylesheet they don’t have time to figure it out and an inline style will often “fix” the problem by overwriting the mess in their CSS.

There are a few problems with this, but number one in my head is remembering what “Jeffrey Zeldman wrote](http://www.amazon.com/exec/obidos/redirect?link_code=as2&path=ASIN/0321385551&tag=indianajost-20&camp=1789&creative=9325 about them, something to the tune of inline styles being like using white-out to touch up the paint on your walls. I always get this image of “Larry The Cable Guy](http://www.larrythecableguy.com/ and I suddenly feel really dumb thinking about using an inline style. It works, but it’s tacky and harder to fix later if you decide to, say, change the color of your walls.Always fix your stylesheet first; there is a time and place for inline styles or they wouldn’t validate, but fixing bad stylesheets is not it.

Inline styles aren’t all bad

The truth is, inline styles aren’t all nasty. It’s easier in the long run NOT to use them because it makes site-wide changes that much smoother, but sometimes you can’t get around it. “Dustin Diaz wrote about this recently](http://www.dustindiaz.com/style-with-strict/ and he makes some very good points, not necessarily for everyday styling, but for those situations when it really would be more work to go to the stylesheet instead of staying right there in the html.

I’ll be honest with you, there have been times I’ve used inline styles myself. Very often when I’m working on a new section of my site I’ll style it inline first to see how it looks and get it how I want it. Then I’ll go back in and replace it with a class or id and move the styles to the stylesheet. It saves me a little time depending on what I’m working on.

There are places online too which don’t allow an external stylesheet. Those with Typepad accounts often don’t have access to that part of their site, so they would have to resort to inline styles. Using inline styles is not always wrong, it’s just not preferred. As the W3C(World Wide Web Consortium) says, For optimal flexibility, authors should define styles in external style sheets. [ "inline styles](http://www.w3.org/TR/REC-html40/present/styles.html#h-14.2.2 ] Optimal flexibility. That’s what we all want, right?

Make sure that using an inline style is the only option in that moment. Don’t just throw it in there because you can’t fix the stylesheet. There are plenty of resources out there for troubleshooting your styles. Even with a boss looming over you, it’s okay to use an inline style temporarily and then go back in and fix it by moving it to the stylesheet. If you do this, especially if you work on a team, comment near the inline style so you – and others – know it’s only temporary.