The Case Against In-line Styles

I’ve never been a fan of inline styling. For one thing it makes the page source busy. And the biggest is the words of styling on a page do count against your keyword density. It is much better to deal with styling in the style sheet. That’s why it is called a style sheet.

The Exception to the rule on In-line Styles

I’ll admit, they are tempting to use.  I find myself using them more in html widgets than anywhere else for emphasis.  Sometimes in a post if I want something to stand out or possible serve as a quick example.  Like my last post where I did an in-line style for a blockquote with a font size, color, weight change for emphasis.  So I won’t say there is never a good time to use in-line styles in your pages and posts.

I also like to use <hr /> to add a line and break out a section on a post, but that typically will have no effect on a theme change.

In-line Styles Should Never be a Substitute

Here is what I’m finding on some clients sites.  They don’t know how to make a change to the style.css file.  But they do know a little html and how to style inline on the html tab of the editor.  Instead of fixing the style sheet they add an inline style directly into their post to accomplish their goal.

However, here’s the reason you don’t want to use in-line styles.  I’m currently working on a site where to overcome margin spacing for images in posts they used inline styles.  On some post I’m finding ( style=”margin:8px” )  on others it is (style=”margin-left:8px; margin-right:8px;”)  This got them the spacing they needed from the text (which the theme author failed to add in the theme’s style sheet)

Now, they are updating their site, with a new theme, a theme that does include styling for images in posts.  A theme that also uses some CSS3 styles to add a border and shadow.  A theme that by default uses 12px for the margin to allow room for the styles.

But guess what?  The in-line styles override the stylesheet so all the images on all the posts have text too close.  The text is in the edge of the shadow area around the images.

There are two ways to fix this.  Remove the shadow from the images so the 8px will work  or remove the in-line styles from all the posts with images.  The later can be done either by hand or possible with a search and replace plugin, but you better backup the database first before using such a plugin.


(Yes, that’s an <hr /> right above.)

Better yet.  Don’t use in-line styles to set things like borders, background color, margins.  If you don’t know who to make these changes in the theme’s style.css file then find someone that can do it for you.  That’s a whole lot better than cobbling up your site with in-line styles which will come back to haunt you at a later date.