• Course Intro
• Intro to CSS
  • Introduction
  • Adding CSS
  • Browser Considerations
  • List of Attributes
  • Modifying The Attributes of Elements
  • Hypertext Links
  • Psuedo-elements
  • Embedding Styles
• Getting Started
• Going the Extra Mile
• Implementation

IntroDuction to Css

 

What Does Cascading mean?

Before we get into what cascading means lets take a look at three types of style sheets that influence the presentation of HTML documents and how they interact.

• Browser Style Sheets - Browsers apply style sheets to all web documents. Although they may be different depending on the browser the most common characteristics of these styles sheets are black text, blue links and purple visited links. These are referred to as default browser settings.

• User Style Sheets - A user is anyone who visits your website. Most modern browsers allow each user to set their own style sheets within their browser. These sheets override the browsers default setting for only that user.

• Author Style Sheets - These style sheets are set by the person who develops the website aka YOU! As soon as you apply any kind of basic style sheet to a page, you have added an author style sheet.

Cascading means that styles fall (or cascade) from one style sheet to another. The cascade is used to determine which style sheets will take precedence and be applied to the document. As the image displays the web page will most likely take precedence of and first follow the rules set by the author style sheet followed by the user style sheet and then the browser style sheet.

Specificity:

If you have two (or more) conflicting CSS rules that point to the same element, there are some basic rules that a browser follows to determine which one is most specific and therefore wins out.

The actual specificity of a group of nested selectors takes some calculating. Basically, you give every id selector ("#whatever") a value of 100, every class selector (".whatever") a value of 10 and every HTML selector ("whatever") a value of 1. Then you add them all up and hey presto, you have the specificity value.

• p has a specificity of 1 (1 HTML selector)
• div p has a specificity of 2 (2 HTML selectors; 1+1)
• .tree has a specificity of 10 (1 class selector)
• div p.tree has a specificity of 12 (2 HTML selectors and a class selector; 1+1+10)
• #baobab has a specificity of 100 (1 id selector)
• body #content .alternative p has a specificity of 112 (HTML selector, id selector, class selector, HTML selector; 1+100+10+1)

So if all of these examples were used, div p.tree (with a specificity of 12) would win out over div p (with a specificity of 2) and body #content .alternative p would win out over all of them, regardless of the order.

 

 

Why Use CSS?