www.Expression-Web-3.com

• Home
• Quick Start
  • Checklist Overview
  • 1. Set up Web Site
  • 2. Set the Doctype
  • 3. Make Web Page
  • 4. Make External Style Sheet
  • 5. Style Application Mode
  • 6. Designing the Web Page
  • 7. Dynamic Web Template
• CSS Basics
  • What is CSS?
  • Position Properties
  • Style Declaration
  • 3 Types of CSS Styles
  • CSS Selectors
  • Creating CSS Styles
  • Style Builder
  • Center web page
  • CSS How To's
• HTML Basics
  • What is HTML
  • HTML 5 ?
  • The Doctype
  • Box Generation
  • HTML Tags
  • Page Properties
• Making Layouts
  • PreMade Layouts
  • Layout from Scratch
  • Layout Downloads
• Video Tutorials
  • Getting Started
  • Drop-Down Menu
  • Form Tutorial
  • Expression Design 3
  • Other Videos
• Products
  • Training DVDs
  • Online Class
  • 1 to 1 Coaching

CSS Tutorials

• What is CSS
• 3 Types of CSS
• Style Declaration
• CSS Selectors
• The Cascade
• Rules of the Cascade
• CSS Position Properties
• CSS Layouts

Quick Start Checklist

• Checklist Overview
• Designing a Web Page
•  Dynamic Web Template

Video Tutorials

• Getting Started Videos
• Contact Form Videos
• Expression Design 3 Videos 

CSS & HTML Tutorials

• All About CSS
• HTML Overview
• Layouts
•  FAQs

Expression Web 3 ~ Rules of the Cascade in CSS

Previous

How The Cascade Works

3 Sources of Style Sheets

According to the W3C CSS 2.1 Specifications, Styles originate from:

1.  Author Style Sheets

2.  Web Browser Style Sheets

3.  User Style Sheets

  Most of our attention will be focused on Author Style Sheets which includes how Internal, External, and Inline styles interact with each other. 

But you also need to be aware of the other 2 sources so that you understand the Big Picture.

Overview

Author Style Sheets:  These are the Style Sheets that you and I create for our web pages.  We are in fact CSS Authors. 

Web Browser Style Sheets:  Each Web Browser (user agent) applies a default Style Sheet to our web pages. 

User Style Sheets:  This has more to do with providing the user with some control over their browsing experiences.  For instance, users can change the font-size in the browser or they can completely disable all CSS Styles. 

Should conflict among these 3 sources of Styles occur, the CSS Cascade will resolve the conflict and determine which Style Rule wins.

In general:

 Author Styles take precedence over the Web Browser and User Style Sheets.

And User Styles take precedence over the Web Browser Style Sheets.

More About Author Style Sheets

In General:

1.  The Style Rule that is Closest to the Element being styled is the Style that will be applied.

This means the 3 Types of CSS will be applied in the following order should there be conflict among styles:

• 1.  Inline Styles
• 2.  Internal or Embedded Styles
• 3.  External Styles

The reason the Inline Style beats the other types of styles is because it is closest to the HTML Element being styled.  Look at the illustration below.

The Inline Style is embedded directly within the HTML it is styling.

As mentioned earlier, understanding this one Rule will take you a long way.   Specifically, you can now change a Style for one web page without causing all web pages to be effected.  Simply use an Internal or Inline Style for the page in which you want to make a change from the External style Sheet.