html tutorials web design help css tutorials free web graphics diy search engine optimization

Inline, Embedded, and External CSS Explained

One of the attractions of CSS is that it can be implemented in three different ways - inline, embedded, and linked, which make it a very flexible HTML supplement. Here are the three ways of implementing CSS:
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.
* The cascading order is what determines which style rule the browser will use when there are conflicting rules. Part four of this introduction to CSS explains the cascading order. Part three is next, which shows you how to implement the three methods of CSS in your web page.

This tutorial continues...

Back | Web Design Tutorials Index

Ezine for Webmasters

Bookmark and Share

Almost a Newsletter

Changing list hosts. Will post a new subscribe form shortly.

Did you know...

The member's site has about 100 standards compliant HTML and CSS tutorials, 31 handy reference charts, reprintable content, web graphics, exclusive fonts, free software, free ebooks and more? All this for less than 9 cents a day! [ Details ]
See my fancy bottom! :)