3. Why CSS?
• Separates web page “appearance” from content for easier
maintenance
• Reusable styles – use to unify pages in a web site
• DRY: Don’t Repeat Yourself
4. What does Cascading mean?
• Different levels of style sheets can be applied to HTML
• Default Browser style (User Agent)
• Most general: The default if there is no specific style sheet
• Author style
• Web page author creates a style sheet to give HTML a particular look
• Takes precedence over the Default Browser style
• Most common
• User style
• The end user creates their own style sheet to override Author and
Default Browser styles
• One reason might be to accommodate impaired vision (larger font)
• Least common
• See Figure 2-1 Hierarchy of Styles on p.86 of textbook
5. CSS: Cascading Style Sheets
• CSS is great because it separates style from structure
• Ex: If you wanted to change all h2 tags from red to blue
• Ex: www.csszengarden.com
• 3 ways to apply CSS
• In-line: single instance of a style
• Embedded: style for a single file declared in <head>
• External file: style for one or more files; linked in <head>
7. CSS Rules
• selector
• Which element is going to be affected?
• The rightmost part of selector is the type of element
• Everything to the left specifies which set of elements is affected
• declaration block
• There may be 0 or more declarations between the braces
• declaration
• Property
• Which property of the element gets affected
• Value
• How that property (attribute) gets affected
8. “Cascading” Style Sheets
• From least important to most important rules/style sheets:
1. User Agent (Browser)
2. User (You) style sheet
3. Author’s rules (Web page designer)
4. Author (Web page designer) !important declarations
5. User (You) !important declarations
• http://www.w3.org/TR/CSS2/cascade.html
• Note: CSS3 is not yet a formal standard
• http://www.sitepoint.com/web-foundations/cascade/
9. Minimize use of !important
• Using !important makes stylesheets hard to maintain
• Can make it hard to track down rule conflicts
• Useful in user stylesheets to accommodate users with
special needs (e.g. larger fonts for vision impairment)
• http://www.smashingmagazine.com/2010/11/02/the-
important-css-declaration-how-and-when-to-use-it/
• https://css-tricks.com/when-using-important-is-the-
right-choice/
10. Rule Inheritance
• Simple case:
• If a CSS rule for a selector is not specifically declared in
the web page or associated CSS file
• The CSS rule from the User Agent (browser) is inherited
11. Last Rule and Fallback Rule
• If a CSS rule appears multiple times on a web page
• Last rule in order of appearance takes effect
• Unless there is a rule with higher specificity
• If last rule cannot be applied, then next to last rule will take effect
• Progressive Enhancement 2.1 p. 104
