Valid Web Designs » css » css explained

External, Embedded, and Inline CSS Explained

One of the biggest advantages of CSS is that it can be implemented in three different ways
  1. External Style Rules
  2. Embedded Style Rules
  3. Inline Style Rules
This makes CSS a very flexible HTML supplement. Any or all methods of implementing CSS can be used on the same page. The cascading order of importance is what determines which style rule the browser will use when there are conflicting CSS rules.

Implementing CSS Style Rules

External Style Sheet
External style sheets are the most powerful, but least important in the cascading order. An external style sheet is called for and applied to the page by placing a link in the head section of your web page to the style sheet. The primary advantage of using external styles is that you can make a single change in this one file, and have that change take affect on every page of your site that links to the external style sheet.
Embedded Styles
Embedded styles are second in power and are set in the head section of your web page. Embedded styles will override the rules of an external style sheet.

The advantage to this option is that you can set style rules for an individual page where you need to have different effects for the same HTML elements.

The disadvantage to the use of the embedded style rules. If you want to make a change you would need to go to each page and make the required changes.

Inline Styles
An inline style is considered the most important but is the least flexible. This style will override both external and embedded style rules. Inline styles are coded directly into an HTML tag just as an HTML attribute is used.

The advantage of inline styles is to allow you to make a single change of style where you don't want or need a reusable style rule.

An inline style must be coded into each HTML element each time you want to override the embedded or external style rules.