An inline style is a style that is applied directly to an element through the use of the following style attribute
style = "style1: value1; style2: value2; style3: value3; ..."
where style1, style2, style3, and so forth are the names of the style properties, and value1, value2, value3, and so on are the values associated with each style property.

So to center an h1 heading and display it in a red font, add the following inline style to the opening <h1> tag:
<h1 style="text-align: center; color: red">Sunny Acres</h1>

Inline styles are easy to interpret because they are applied directly to the elements they affect.

However, this also makes them cumbersome. For example, if you wanted to use inline styles to make all of your headings the same font color, you would have to locate all of the h1 through h6 elements on the Web site and apply the same color style to them. This would be no small task on a large Web site containing hundreds of headings spread out among dozens of Web pages.

In addition, some developers point out that inline styles aren’t consistent with the goal of separating content from style. After all, there is arguably little difference between using the inline style <h1 style=”text-align: center”> … </h1> and the deprecated align attribute <h1 align=”right”> … </h1>

One goal of style sheets is to separate the development of a document’s style from the development of its content.

Ideally, the HTML code and CSS styles should be separate so that one person could work on content using HTML and another on design using CSS. This isn’t possible with inline styles.

Click here to view an example of inline style.