1 / 15

INFSCI 1052

INFSCI 1052. Inheritance and Cascade From Stylin by Charles Wyke Smith. INFSCI 1052. Inheritance Some properties are passed down from ancestors to descendants Typically inherited: Text, color, size Not Inherited: Borders, margins and padding

wing-richards
Download Presentation

INFSCI 1052

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. INFSCI 1052 Inheritance and Cascade From Stylin by Charles Wyke Smith

  2. INFSCI 1052 • Inheritance • Some properties are passed down from ancestors to descendants • Typically inherited: • Text, color, size • Not Inherited: • Borders, margins and padding • Example: Setting the font-family on the body tag is passed down to all of the descendants so that the paragraphs, lists, etc all use the same font.

  3. INFSCI 1052 • Inheritance – fromhttp://www.communitymx.com/content/article.cfm?cid=2795D • Properties that inherit: • color • font (and related properties) • letter-spacing • line-height • list-style (and related properties) • text-align • text-indent • text-transform • visibility • white-space • word-spacing

  4. INFSCI 1052 • Inheritance • Properties that don't inherit: • background (and related properties) • border (and related properties) • display • float and clear • height and width • margin (and related properties) • min- and max-height and -width • outline • overflow • padding (and related properties) • position (and related properties) • text-decoration • vertical-align • z-index

  5. INFSCI 1052 • Cascade • Tags can have properties applied from multiple sources such as external style sheets, embedded style sheets, inline styles etc. • A system is in place to control how the browser makes decisions about which style rule to apply. • This only becomes important if there is a conflict. Ex: p{font-family:Verdana;} p{font-size:12px;} No conflict so the Cascade doesn’t apply

  6. INFSCI 1052 • Cascade • Sources of styles and their priority – low to high • Default browser style sheet • User style sheet • External style sheet • Embedded styles • Inline Styles • The browser updates its property settings for each tag as it reads through the above sources. If it finds two properties applied to same tag the newer one overwrites the older one.

  7. INFSCI 1052 • Cascade • Example: • If you set the font-family in the body to Verdana in an external style sheet it overwrites the default style sheet of Times. If you add a font family property in the head section of the document it overrides the external sheet. And, the inline style would override all of the others. • Again if no conflict then all the properties are applied.

  8. INFSCI 1052 • Cascade • Overall process • Step 1 – Find all declarations that apply to each element in the document • Step 2 – Sort by order • The browser checks all five sources and updates the properties for each tag • Rule of thumb – closer to the document wins • Step 3 - Sort by weight • Some rules can be defined as !important. This will cause that rule to be applied and the Cascade is ignored • Ex: p { color:red!important; font-family:Verdana;}

  9. Infsci 1052 • Cascade • Step 4 – Sort by specificity • The more specific rule wins • Calculating Specificity • Look at the rule and put values in A-B-C • Add one to A for each ID delector • Add one to B for each class selector • Add one to C for each tag name • Read result as three digit number

  10. INFSCI 1052 • Cascade • Step 5 – Sort by order • If two rules have the exact same specificity then the once closer to the document wins. This also includes linked and imported style sheets. • Keep in mind greater specificity wins over order. So, if there is a conflict then the rule with greater specificity wins over order

  11. INFSCI 1052 • Cascade • Examples of specificity – from low to high • p = 0-0-1 • p.largetext = 0-1-1 • p.#largetext = 1-0-1 • body p#largetext = 1-0-2 • body p#largetextul.mylist = 1-1-3 • body p#largetextul.mylistli = 1-1-4 • Note: Specificity is more important than order so a more specific rule will beat a less specific rule even if it is further away from the document.

  12. INFSCI 1052 • Importing style sheets into a document • @import rule • Not supported by older versions of Netscape • <style type='text/css'>       @import url(stylesheet1.css);     </style> • Can be combined with an embedded stylesheet but the @import must come first • Can import style sheets from a stylesheet • Ex. @import url (stylesheet2.css); • This rule can be placed in the beginning of stylesheet1

  13. INFSCI 1052 http://www.communitymx.com/content/article.cfm?page=2&cid=2795D

  14. INFSCI 1052 • Cascade • Firebug will show Inheritance and the Cascade • Click HTML Tab and The Style Tab • Other CSS Editors • Dreamweaver – probably the preferred editor amongst professionals • Free CSS Editors • http://speckyboy.com/2008/09/15/7-free-css-editors-which-is-the-best-you-choose/ • Other CSS editors • http://www.smashingmagazine.com/2008/06/19/css-editors-reviewed/

  15. INFSCI 1052 • Resources for specificity • http://www.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/ • http://www.adobe.com/devnet/dreamweaver/articles/css_specificity_02.html • http://www.communitymx.com/content/article.cfm?page=2&cid=2795D

More Related