An inline style is assigned to an element using the STYLE attribute. The STYLE attribute lets you assign CSS properties directly to an instance of the element. For example, using the STYLE attribute, you can make a paragraph blue:
<P STYLE="color:blue">This is a blue paragraph.</P>
This technique improves on the existing HTML-based model for specifying text color. Prior to style sheets, the paragraph would be made blue using the Font element:
<P><FONT COLOR="Blue">This is a blue paragraph.</FONT></P>
The advantages of using the inline style over the stylistic HTML elements and attributes are as follows:
Even inline styles are not in the true spirit of separating presentation from content. The true definition of separating presentation from content is to define all the styles outside the markup—for this, global or linked style sheets are more appropriate.
The inline style sheet does provide some conveniences for creating dynamic documents. For example, the style of an element can be quickly changed when the mouse moves over it:
<H1 ONMOUSEOVER="this.style.backgroundColor = `yellow';" ONMOUSEOUT="this.style.backgroundColor = ``;"> This element turns yellow when the mouse moves over it. </H1>
This code works by accessing the inline style for the H1 element and assigning a new value to the CSS backgroundColor property. The document's display is immediately updated to reflect the change to the style sheet. The inline style is represented on every element through the style property; style is an object-valued property through which scripts can access all the CSS properties.