Inline CSS

We have only shown you how to use CSS the way it was meant to be used — separated from the HTML. However, it is possible to place CSS right in the thick of your HTML code, and this method of CSS usage is referred to as inline css.

Inline CSS has the highest priority out of external and internal css. This means that you can override styles that are defined in external or internal by using inline CSS. However, it detracts from the true purpose of CSS, so use it sparingly.

The style Attribute

Believe it or not, CSS is built in to every HTML tag. If you want to add a style inside an HTML element all you have to do is specify the desired CSS properties with the style HTML attribute. Let’s add some style to a paragraph tag.

Inline CSS Example

<p style=”background:blue; color: white;”>This is a paragraph</p>

The normal rules of CSS apply inside the style attribute. Each CSS statement must be separated with a semicolon “;” and colons appear between the CSS property and its value.