Infsci 1052
This presentation is the property of its rightful owner.
Sponsored Links
1 / 15

INFSCI 1052 PowerPoint PPT Presentation


  • 48 Views
  • Uploaded on
  • Presentation posted in: General

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

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Infsci 1052

INFSCI 1052

Inheritance and Cascade

From Stylin by Charles Wyke Smith


Infsci 10521

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.


Infsci 10522

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


Infsci 10523

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


Infsci 10524

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


Infsci 10525

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.


Infsci 10526

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.


Infsci 10527

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;}


Infsci 10528

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


Infsci 10529

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


Infsci 105210

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.


Infsci 105211

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


Infsci 105212

INFSCI 1052

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


Infsci 105213

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/


Infsci 105214

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


  • Login