CSCI N241: Fundamentals of Web Design Copyright ©2006  Department of Computer & Information Science Understanding the Cascade in CSS

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Goals By the end of this unit, you should understand … … how to use multiple style sheets in your web pages.… how to use multiple style sheets in your web pages. … how to use different style sheets for different web agents, including mobile browsers, aural browsers and print media.… how to use different style sheets for different web agents, including mobile browsers, aural browsers and print media. … how to calculate the specificity of a rule.… how to calculate the specificity of a rule. … how to determine precedence.… how to determine precedence.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using Multiple Style Sheets At times, we might need to build a site that uses multiple style sheets (think of corporate, division and store styles).At times, we might need to build a site that uses multiple style sheets (think of corporate, division and store styles). We can use multiple style sheets by adding each in its own separate tag.We can use multiple style sheets by adding each in its own separate tag. What happens if there is a conflict? The web browser gives precedence to the style sheet nearest the bottom (top-to-bottom precedence).What happens if there is a conflict? The web browser gives precedence to the style sheet nearest the bottom (top-to-bottom precedence).

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Using Multiple Style Sheets Overrides Overrides

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The media Attribute We can also use multiple style sheets for different type of media.We can also use multiple style sheets for different type of media. For instance, you can specify a style sheet for a traditional web browser, a second sheet for a handheld web browser and a third for printing.For instance, you can specify a style sheet for a traditional web browser, a second sheet for a handheld web browser and a third for printing. We add the media attribute to the tag to indicate the intended media.We add the media attribute to the tag to indicate the intended media.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science The media Attribute Example: Example: Possible values for media include screen, print, handheld, aural, Braille, projection, tty & tv.Possible values for media include screen, print, handheld, aural, Braille, projection, tty & tv.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Cracking the Cascade The Cascade in Cascading Style Sheets refers to how a browser selects which CSS rule it should apply.The Cascade in Cascading Style Sheets refers to how a browser selects which CSS rule it should apply. Actually, there are three groups of style sheets the browser considers:Actually, there are three groups of style sheets the browser considers: –The default browser settings (Lowest Priority) –The user-customized settings –The rules defined by a web page's author (Highest Priority)

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Determining Precedence A web browser determines precedence for a rule using the following path:A web browser determines precedence for a rule using the following path: 1.Group all style sheets (author, user, default browser) together. 2.Find all declarations that match. 3.Sort all matches in their respective groups: author, user, default browser. 4.Calculate specificity. 5.Sort any conflicting styles based on where they appear in their respective style sheet.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Calculating Specificity To calculate specificity, start with three zeroes, like this: 0 0 0To calculate specificity, start with three zeroes, like this: Look at your declaration and decide "Does the selector have any ids?" If it does, add one point to the left-most zero for each id: 0 0 0

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Calculating Specificity 2.Next, decide "Does the selector have any classes or pseudo-classes?" If it does, add one point to the middle zero for each class/pseudo-class: Finally, determine if the selector has any element names. Add one point to the right-most zero for each element: 0 0 0

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Let's Try Some! h1.greenteaol li pspan.cd p imga:linkem #elixirs h1.green #sidebar from Head First HTML with CSS & XHTML

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Determining Precedence Example Let's say that you had the following in your web page: Blueberry Bliss Elixir Let's say that you had the following in your web page: Blueberry Bliss Elixir How would the browser determine precedence?How would the browser determine precedence? - from Head First HTML with CSS & XHTML

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science 1.Gather all Style Sheets AUTHOR'S STYLE SHEET: h1 { color: #EFEFEF; } h1.blueberry { color: blue; } USER'S STYLE SHEET: body h1 { color: #CCCCCC; } BROWSER'S STYLE SHEET: h1 { color: black; }

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science 2.Find All Matching Declarations body h1 { color: #CCCCCC; } h1 { color: black; } h1 { color: #EFEFEF; } h1.blueberry { color: blue; } USER: BROWSER: AUTHOR:

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science 3.Sort Matches by Author, User, Browser h1 { color: #EFEFEF; } h1.blueberry { color: blue; } body h1 { color: #CCCCCC; } h1 { color: black; } AUTHOR USER BROWSER

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science 4.Within Each Group, Sort Matches by Specificity h1.blueberry { color: blue; } h1 { color: #EFEFEF; } body h1 { color: #CCCCCC; } h1 { color: black; } AUTHOR USER BROWSER

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science 5.Sort Conflicts by Where the Rules Appear in their Style Sheets h1.blueberry { color: blue; } h1 { color: #EFEFEF; } body h1 { color: #CCCCCC; } h1 { color: black; } AUTHOR USER BROWSER We can stop here because we don't have any conflicts. The h1.blueberry will apply.

N241: Fundamentals of Web Development Copyright ©2006  Department of Computer & Information Science Questions?

References Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: 2006.Freeman, Elisabeth and Eric Freeman. Head First HTML with CSS & XHTML. Sebastopol, CA: Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.Neiderst-Robbins, Jennifer. Web Design in a Nutshell, Third Edition. Sebastopol, CA: 2006.