You can add CSS to a specific HTML element using the style attribute, like this:

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

CSS rules specified in a style attribute like this are referred to as inline styles, because the style information is inline with the HTML.

You should avoid using inline styles at all costs.

Inline Styles are Harder to Maintain

The example above makes three changes to a single h3 element. What if you want to make those same changes to another element? If you use inline styles you’ll need to copy and paste all or part of that style attribute to the other element.

Now what if you want to change the color? You’ve got to remember to change it in two places. Or was it three? Or fourteeen?

Inline Styles are the Enemy of Consistency

When you use inline styles it’s incredibly easy to forget to apply them to an element, or overlook changing the styles on another element. Using a seperate CSS file allows you to keep all your style information in one place, ensuring that the edits you make there will be applied uniformly across your site.

Inline Styles Aren’t Cached Seperately & Add Bloat

Of the following two options, which do you think is faster and better?

Option One

Download this CSS once and cache it:

h3 {
    font-size: 1.5em;
    font-weight: normal;
    color: green;
}

Then load five pages, each with one of these:

<h3>I'm a Header!</h3>

<h3>I'm a Header!</h3>

<h3>I'm a Header!</h3>

<h3>I'm a Header!</h3>

<h3>I'm a Header!</h3>

Option Two

Download this, seperately, for each of the five page loads:

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

<h3 style="font-size: 1.5em; font-weight: normal; color: green;">I'm a Header!</h3>

Inline Styles Break Seperation of Concerns

HTML is for content, CSS is for presentation. There are some exceptions, but inline styles should not be one of them.

Keeping a clear boundary between content and presentation is one of the best ways to keep your code maintainable and understandable. When you start mixing these you’ll end up with a tangled mess that no one wants to deal with.

Is it Ever Okay to Use Inline Styles?

There are some specific situations where use of inline styles cannot be avoided.

Sometimes inline styles must be used out of necessity, with the most common example being HTML emails. Many email clients are woefully out of date when it comes to supporting technologies we’ve been enjoying on the web for years and years, and many of them simply don’t understand CSS that isn’t inline.

Another example is JavaScript, which is used to alter the appearance of an element using inline styles (although modifying other attributes, like classes, are usually a better option).

Inline styles can also be convinent for quick prototypes or experiments, but they should never be used in a production environment.