CSS Inline

March 09, 2008

Inline styles

The simplest and most direct way of applying CSS to an element is to write it into the tag itself as a style attribute style="...". CSS styles applied this way have the highest priority over other style definitions, i.e. they will overwrite existing styles. Because you're applying CSS to a HTML element directly a selector is not necessary.

Inline CSS:

  • <p style="border:2px solid #8dc919">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed enim. Morbi quis augue. Sed nec augue.</p>
  • <p style="background:#8dc919">Sed vel pede eu lacus molestie condimentum. Pellentesque vitae dolor. Vestibulum venenatis.</p>

Display:

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed enim. Morbi quis augue. Sed nec augue.

Sed vel pede eu lacus molestie condimentum. Pellentesque vitae dolor. Vestibulum venenatis.

Usage guidelines

1. Use as little as possible

Remember that we're trying to separate content from presentation? Inline styles are the exact opposite. They're inefficient because they'll kludge up your code and are difficult to maintain. Only use them for some quick testing of CSS styles or for exceptions where a style is only used at a particular place and nowhere else on the homepage.

2. Don't use double quotes

Because double quotes are already used for marking the start and end of the style attribute, having another double quote in-between would abruptly terminate the CSS instructions. Use single quotes instead. <p style="font-family:'trebuchet ms'">...</p> is ok but not <p style="font-family:"trebuchet ms"">...</p>.