CSS Tutorial: Standards-Based Web Design

by Paul Bohman

Inline Styles

The last method for creating styles involves defining the style in the tags in the <body> of the document. Inline styles override all previous style declarations in both the external style sheet and the document <head>. Here is an example:

<p style="background-color: red; color: white;">Here is a paragraph.</p> 

This method is easy to understand, because you're applying the style directly to the item that you want styled. However, you should almost always avoid this method. It's "legal," but it usually creates sloppy code that's hard to manage, especially in large sites. I'm explaining it here for the sake of completeness. Why is it hard to manage inline styles? Well, imagine that you create a style for one paragraph, then later on you realize that you want the same style on another paragraph. Then another. And another. You would have to rewrite the style four times. Now imagine that you changed your mind and wanted to change the background color and font color of that style. You would have to change it in four places instead of one. It's better to type the style only once, then reference it in the appropriate location

Creative Commons License
This work is licensed under a Creative Commons Attribution-Noncommercial-Share Alike 2.5 License.