What is a CSS Inline Style?

[Engineer]

Inline styles are CSS styles that are applied to one element using the style attribute.

How to Write an Inline Style
1.Write your style property the same way you would in a style sheet. But it needs to be all one line. Separate multiple properties with a semi-colon just as you would in a style sheet.

background:#ccc; color:#fff; border: solid black 1px;

2.Place that line of styles inside the style attribute of the element you want styled.

<p style="background:#ccc; color:#fff; border: solid black 1px;">

Advantages of Inline Styles
Because of the cascade, inline styles have the highest precedence. That means they are going to be applied no matter what. The only styles that have higher precedence than inline styles are user styles applied by the readers themselves. So if you are having trouble getting your changes to apply, you can set an inline style on the element and if it still doesn't display, you know there's something else going on.

Inline styles are easy and quick to add. You don't need to create a whole new document (as with external style sheets) or edit a new element in the head of your document (as with internal style sheets). You just add the style attribute that is valid on nearly every XHTML element.

Disadvantages of Inline Styles
Because they are the most specific in the cascade, they can over-ride things you didn't intend them to.

Inline styles must be applied to every element you want them on. So if you want all your paragraphs to have the font-family "Arial" you have to add an inline style to each <p> tag in your document. This adds both maintenance work for the designer and download time for the reader.

It's impossible to style pseudo-elements and -classes with inline styles. For example, with external and internal style sheets, you can style the visited, hover, active, and link color of an anchor tag. But with an inline style all you can style is the link itself, because that's what the style is on.

I recommend not using inline styles for your Web pages because they cause problems and make the pages a lot more work to maintain. The only time I use them is when I want to check a style quickly during development. Once I've got it looking right for that one element, I move it to my external style sheet.