Introduction to...

Cascading Style Sheets

Part One | Part Two | Part Three

Inline, Embedded, and Linked Styles

One of the best reasons for webmasters to use CSS is that it can be implemented in three different ways - inline, embedded, and linked, so it's also a very flexible design language.

• Inline Styles
  An inline style rule is coded into an HTML tag within the flow of your source code. The purpose of inline styles is to allow you to override an embedded or linked style 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 linked 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 a linked 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 with the embedded style, without having to code the rule into each heading tag as you must do with inline rules.

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

Cascading Order

By now you know that styles are simply the rules you create for how various HTML elements should display. The term "cascading" refers to the order of importance the browser should follow when it encounters conflicting style rules.

For example, you may have a rule in your linked style sheet that specifies the first letter of the first word after every paragraph tag is rendered in bold text. You may have another rule in your embedded styles that specifies that the first letter should be rendered in normal text, but colored red. The browser needs to know which rule to follow, and the cascading order is how a browser determines which rule to follow.

Here's the cascading order, in order of importance:

1. ! important
   This can be added to any style rule, and nothing will override it. An example of usage:

   h3 {color: red ! important}
   

2. Origin of Rules
   Both the web page author and the surfer can specify style sheets. A reader may have poor vision, so he or she creates a style sheet that renders text larger than normal. When rules between author and reader conflict, the author's rule will win over the surfer's rule of equal weight.

   However, if the reader makes a rule important, it will override the author's rule unless the author also made his rule important. That's why you should use caution in marking rules with an important designation. Your insistance on having it your way may make the page useless to some visitors.

3. Inline Styles
   Inline styles win out over embedded and linked styles.

4. Embedded Styles
   Embedded styles win out over linked styles.

5. Linked Styles
   Linked styles are wimps, only coming out to play when no other styles challenge them. As low in the cascading order that they are, they are still the most powerful because of the ability to change one file and have that change reflected on all your pages.

6. Specificity
   If the previous conflict resolution hierarchy hasn't yet solved the problem, conflicting styles can be resolved based on specificity. The more specific style wins out over a less specific one.

7. Order of Specification
   As a last resort, when all the other conflict resolution specifications can not determine which style should take precedence, the last style specified will be the style used.

Home | HTML Tutorials | HTML Quick Tips | HTML Reference Charts
CSS Tutorials | CSS Reference Chart | Online Webmaster Tools
Design/Marketing Articles | Web Glossary | Web Design Software
Web Site Design Made Easy | Products | Members Site Info/Benefits
About This Site | Frequently Asked Questions | Privacy Statement
Copyright Notice | Link Info | Contact

Copyright 2005 htmlville.com and Dennis Gaskill
All Rights Reserved Worldwide