Why Inline CSS Sucks

If you've worked on sites developed by others, you have seen markup like this:

<div style ="color: red; text-align: center; font-weight: bold;">

This example mixes presentation and structure which is considered poor form in web design.   If you wanted to change the look and feel of this element, you'd have to modify each occurrence.

The main drawbacks to this approach are:

  1. More difficult (expensive) to maintain
  2. Inline CSS rules take precendence over stylesheets
  3. Inline CSS is not cached by the browser

A better solution would be to add a class attribute to the element which references that style in a linked stylesheet.


<div class="title">


    color: red;
    font-weight: bold;
    text-align: center;

The only situation which calls for inline CSS is in HTML e-mails because e-mail clients won't process linked stylesheets or rules defined in head tag.