Inline, Embedded, and External CSS Explained

Inline Styles

An inline style rule is coded directly into an HTML tag within the flow of your source code, just as an HTML attribute is used. The purpose of inline styles is to allow you to override an embedded or linked style rule, or to make a quick change of style where you don't want a reusable rule. For example, you may have a rule that specifies H1 headings should be the color blue. If you have a place on your page where you want an H1 heading in red, an inline style rule allows you to override an embedded or external style rule. To override an embedded or linked style, an inline style must be coded into each HTML element each time you want to override the embedded or linked style.

Embedded Styles

Embedded styles are set in the HEAD section of your web page. Similar to an inline style rule, embedded styles allow you to override the rules of an external style sheet. The difference is that with an embedded rule, you don't have to create a rule with each use of an HTML element. An H1 heading given the color red in an embedded style rule will render the H1 heading in red every time you use it on the page without having to code the rule into each heading tag as you must do with inline rules or with HTML attributes.

External Styles

External styles (sometimes called linked styles or remote styles) are the least important in the cascading order*, but the most powerful! An external style is simply a link placed in the HEAD section of your web page to a separate file containing your style rules. The primary advantage of using external styles is that you can change that one external file, and have that change reflected on every page of your site that links to the external CSS file. Any or all methods of implementing CSS can be used on the same page.

This tutorial continues...