What's the difference between inline, embedded, and external styles?
Author: Deron Eriksson
Description: This is a short CSS example demonstrating the difference between inline, embedded, and external styles.
Tutorial created using: Windows XP


Page:    1 2 >

There are three different ways that styles can be placed: inline, embedded, and external. As a generalization, external styles tend to be the best practice, but inline and embedded styles can also have their places.


An inline style is applied directly to an HTMLW element via the style attribute, as demonstrated here:

<p id="inlineExample" style="background: yellow">Inline style example</p>

This inline style generates results similar to the following:

Inline style example

Embedded styles are placed within a style element within the head section of an HTML document. Embedded styles can help abstract style information into a common location in a document. Below, we see an embedded style defined for a 'p' element with id of 'embeddedExample'. In comparison with inline styles, the format of the style rules have the added benefit of allowing us to write rules that apply to multiple HTML elements at once (although 'id' needs to be unique and should only apply to a single element).

<head>
...
<style type="text/css">
p#embeddedExample { 
	background: orange;
}
</style>
...
</head>
...
<p id="embeddedExample">Embedded style example</p>
...

The above embedded style and 'p' element produce results similar to the following:

Embedded style example

The preferred way of using styles is typically to use external styles. An external stylesheet is basically a cssW file containing a set of style rules, such as the following:

external-styles.css

p#externalExample {
	background: aqua;
}

This external stylesheet can then be referenced in an HTML file using the link element, as shown here:

<head>
...
<link rel="stylesheet" type="text/css" href="external-styles.css" />
...
</head>
...
<p id="externalExample">External style example</p>
...

The styles in this linked external stylesheet are applied to the HTML document. The above HTML code generates results similar to the following:

External style example

The primary benefit of an external stylesheet is that it can be referenced by multiple HTML documents. As a result, if all HTML documents on your site reference the same external stylesheet, changes to this stylesheet will be reflected in all of the HTML pages of your site. Neat!


(Continued on page 2)

Page:    1 2 >