recitation5 notes

The order of precedence in terms of origin and weight

Info iconThis preview shows page 1. Sign up to view the full content.

View Full Document Right Arrow Icon
This is the end of the preview. Sign up to access the rest of the document.

Unformatted text preview: wer. For example: h1 {color: blue !important;}. So if your HTML page links to one stylesheet that says h1 {color: red;} and another that says h1 {color: blue ! important;} then the latter rule trumps over the former. Note: !important is considered bad practice - it’s usually a sign that your original classes, IDs, and styles were not well thought out and you’re brute-forcing things. The order of precedence in terms of origin and weight is: user important overrides author important which overrides author unimportant which overrides user unimportant which overrides any browser rules. U Important >> A Important >> A Unimportant >> U Unimportant >> Browser 3. Break further ties by specificity. What do you mean by specificity? Intuition test - Assume we had an <h1> element with class "intro". Assume the following rules were in the same stylesheet; which trumps which? h1 {color: red;} h1.intro {color: blue;} The rules are from the same kind of origin and are both unimportant. We break the tie with specificity and decide that the second rule wins out. But what about the following case? h1 p.intro {color: red;} #title p {color: blue;} Assume we had an element that satisfied both selectors (e.g. a paragraph element of class "intro" that was embedded within an h1 element with id "title"). Which rules wins out? Not so obvious! Let's see how browsers (roughly) calculate CSS specificity. For more details, check out a CSS book. :) Each declaration is assigned a tuple (i, c, e) [ice is easy to remember :)] where i is the number of ids specified by the selector, c is the number of classes specified by the selector, and e is the number of HTML element types specified by the selector. For example, p � (0, 0, 1) h1 � (0, 0, 1) #title � (1, 0, 0) h1#title � (1, 0, 1) h1#title p � (1, 0, 2) h1#title p.intro � (1, 1, 2) So given two selectors s1 and s2 with corresponding ice tuples t1 and t2. To determine which selector is more specific, iterate...
View Full Document

This document was uploaded on 03/18/2014 for the course EECS 6.170 at MIT.

Ask a homework question - tutors are online