Login | Contact Us | Site Map | Resources

Introduction to CSS

Home > CSS Tutorial > Inline CSS

Inline CSS

There are three different ways that CSS can be used to style an HTML document. Inline CSS is prioritized over the other two methods (internal and external). That means that if you use more than one of these methods to try to style the same HTML file, inline CSS will override the other methods and have the final say in the document's style.

The syntax, or rules of application, that inline CSS uses is a little different than the syntax used in internal and external CSS, mostly because inline CSS is applied directly to each HTML element, instead of being applied to all instances of an element with only one declaration. You will notice that the "selector" does not need to be specified in inline CSS.

Inline CSS is used in the following manner:

<p style="border: 1px dotted #000000;"> </p>

The paragraph tags <p> & </p> should be familiar to you. The style attribute, style="", which contains the property and the value, might also have a familiar look and feel to it. It is used in place of the braces { & } that are used in internal and external CSS.

Inline CSS defeats two major purposes of using CSS, one by cluttering up your HTML file when the style could be kept separate, and another by causing unnecessary repetition by having to manually apply the same style to every element in the file. This is why inline CSS should only be used for styles that do not apply to every element in your file or on your website.