Path = Home > Using CSS > How To Use Inline Style Sheets

How To Use Inline Style Sheets

Inline styles are defined with specific instances of tags throughout a web page. These are useful when you want to change part of a page which is already formatted by an embedded or external CSS.

Conflicting CSS styles

When you apply two or more CSS styles to the same text, the styles may conflict and produce unexpected results. Browsers apply style attributes using the following rules:

• If two styles are applied to the same text, the browser displays all attributes of both styles unless specific attributes conflict. For example, an external style may specify blue as the text color and an inline style may specify green as the text color.
• If attributes from two different styles applied to the same text conflict, the browser will display the attribute of the style closest to the text itself. Therefore, if a text element has both an external style sheet and an inline CSS style affecting it, the inline style is the one that will be applied since it is closest to the text.
• If there is a direct conflict, the attributes from CSS styles (styles applied with the <class> attribute) overrule attributes from HTML tag styles.

You can use this to override the settings from an embedded or external style sheet.

How to use Inline Style Sheets

In the following example we will modify the appearance of the text in a paragraph. To do this, instead of the standard <p> tag we use the following :-

<P style="font-style: italic; color: #CC0000;">
Sample Text
</p>

and the result is :-

Sample Text

Any text in that paragraph will follow that style.