MORE Cascading Style Sheets (The Positioning Model)

Slide 2 Introduction Attribute selectors Pseudo-elements Pseudo-classes How style rules are applied (the meaning of cascade)

Slide 3 Attribute Selectors (Introduction) In addition to element, class and ID selectors, it’s possible to select elements having a specific attribute defined a specific attribute value

Slide 4 The [attribute] selector Select elements with an attribute named [target] a[target] { font-size: 14pt; }

Slide 5 The [attribute=value] Selector Select elements with an attribute named [target] having a value of _blank a[target=“_blank”] { font-size: 14pt; }

Slide 6 The Universal Selector It selects all elements and children The * character is the universal selector Select all elements inside a element and set the background color

Slide 7 Pseudo-elements (Introduction) A pseudo-element is used to apply a style to part of an element For example, the first or last line of a paragraph The following syntax is used to apply a pseudo-element:

Slide 8 Pseudo-elements (List) ::after – Insert content after element p::after { content: " Append Text"; } ::before – Insert content before element p::before { content: " Preappend Text"; }

Slide 9 Pseudo-elements (List) ::first-letter – Selects first letter p::first-letter { font-size: 14pt; } ::first-line – Selects first line p::first-line { font-size: 14pt; }

Slide 10 Pseudo-classes (Introduction) Pseudo-classes define the special state of an element Mouse hover They are commonly used with anchor tags: Visited / non-visited links

Slide 11 Pseudo-classes (Anchor)

Slide 12 Pseudo-classes (List) The following W3Schools links lists all of the pseudo classes lasses.asp lasses.asp

Slide 13 What we Mean by Cascade The concept of cascade is tied to three concepts (rules) Importance Specificity Source order After these rules are applied, a weight is applied to each rule to determine which one takes precedence

Slide 14 Importance (1) Importance relates to the source of a style sheet User agent – browsers tend to have a default style User – You might have configured browser options to have a style Author – These are the inline / embedded / external styles that we have been talking about These sources are processed in order

Slide 15 Importance (2) The !important declaration overrides the default cascade so styles are applied in the following order 1. User agent declarations (browser) 2. User declarations 3. Author declarations 4. Author !important declarations 5. User !important declarations

Slide 16 Specificity (1) Every CSS rule has a weight That is, one rule might be more or less important than another, or equally important This weight can be precisely calculated There are different ways (techniques) to do this

Slide 17 Specificity (2) Add 1 for each element and pseudo-element Add 10 for each attribute, class, and pseudo- class Add 100 for each ID Add 1000 for an inline style

Slide 18 Specificity (3) p.note 1 class (10) + 1 element (1) = 11 #MyID p[lang=“en”] 1 ID (100) + 1 attribute (10) + 1 element (1) = 111 If two rules have the same specificity, then the last rule processed wins

Slide 19 Specificity (Guidelines) Use generic selectors first and add specificity as necessary Rely on specificity rather than ordering selectors Try and keep thing simple

Slide 20 Inheritance Inheritance is how property values propagate from parent elements to child elements For example, setting the font for a tag will cause the same font to be applied Not all properties are inherited Inheritance can be forced using the inherit keyword Note the CSS3 inheritance specifications are in “working draft” mode (not final)

Slide 21 Inheritance Don’t break it breaking-inheritance breaking-inheritance A canonical list of properties and those that inherit

Slide 22 Tools Firebug is an add-in for chrome that helps debug styles