INP 150: Web Coding I

1
INP 150 Web Coding I

• CSS Inheritance

2
Hierarchy

• Remember that an HTML document consists of
  elements that form a hierarchy...
• HTML is the root element (or root node)
• All nodes are descendants of the root node
• Nodes can be children as well as parents

3
Selectors

• Remember that we covered a variety of selectors
• Element selectors
• Class selectors
• Id selectors
• Universal selectors (generic selectors)
• Psuedo-class selectors
• Child selectors (don't work in MSIE through 6.0)
• Descendant selectors

4
The importance of hierarchy

• Selectors are one important aspect of the HTML
  hierarchy
• The concept of inheritance requires a hierarchy
• The Document Object Model (DOM), mostly used for
  Javascript manipulations of the HTML document,
  also require a hierarchy of HTML nodes

5
What is inheritance?

• Inheritance is a way for CSS properties of a
  parent element to apply to a child node
• For example, say the parent element is a div, and
  the child element is a p.
• If we see the following CSSdiv color red
• Then the paragraph will inherit the color red.

6
Only parent to child?

• Yes, inheritance works by allowing a parent to
  pass on some CSS properties to the child
• However, if the child also acts as a parent to
  other HTML nodes, then it will in turn pass the
  CSS properties on
• The end effect is that all descendants will
  inherit the CSS properties

7
Inheritance and CSS properties

• However, say a CSS property is inherited, but a
  child has a CSS property that competesdiv
  color red p color green
• For any paragraph appearing within a div, the
  text (and anything that is styled with color)
  will appear green.
• If a competing CSS property is inherited, it will
  be ignored in favor of the CSS property set with
  the child.

8
Inheritance and specificity

• What if you see the following?
• divparent color red
• p color green
• ltdiv idparentgt
• ltpgtWill the text be red ltemgtorlt/emgt green?lt/pgt
• lt/divgt

9
Inheritance and specificity

• Note that CSS properties which are inherited are
  overwritten by CSS properties assigned to a child
• Also note that the ltemgt element will inherit the
  properties of the ancestor that is closest (in
  this case, its parent, the ltpgt), regardless of
  its specificity!

10
Are all CSS properties inherited?

• No, only some CSS properties are inherited!
• For example, when you set the height or width of
  a parent element (e.g., when you set html and
  body to 100), descendants did not inherit this
  height or width!
• However, if you set a parent with a font color or
  family (e.g., body color red ), all children
  will inherit!, though this style will not be
  applied if there are competing CSS properties.

11
What can be inherited?

• font-family
• font-style
• font-variant
• font-weight
• font-size
• color
• line-height

12
What can be inherited?

• word-spacing
• letter-spacing
• text-transform (none, capitalize, lowercase,
  uppercase)
• text-align
• text-indent
• white-space (normal, pre, nowrap)
• list-style-type

13
What can be inherited?

• list-style-position (inside, outside)
• list-style
• border-collapse
• border-spacing
• cursor
• direction (ltr, rtl, inherit)
• etc.

14
What is not inherited by default?

• background
• background-attachment (fixed, scroll, inherit)
• background-color
• background-image
• background-position
• background-repeat
• border
• border-color

15
What is not inherited by default?

• border-style
• border-width
• clear
• display
• float
• margin
• max-height
• min-height

16
What is not inherited by default?

• padding
• position ( static, relative, absolute, fixed,
  inherit)
• text-decoration (though it appears so)
• vertical-align
• height
• width
• z-index
• etc.

17
Inheritance and tables

• When working with tables, font styles are
  inherited from the document to table element as
  expected when working in standards mode
• However, when in quirks mode, font styles may not
  be inherited (for old browsers like Netscape 4.8
  inherits in Quirks for IE 4.0, tested), meaning
  that styles must be specified again for the table

18
Inheritance and tables

• What affect does this have in standards mode?
  Quirks mode?
• body font-size 80
• table font-size 80
• In quirks mode for a browser like Netscape, the
  table elements will show at 80, which is
  probably what is desired. This is an example of
  legacy code!
• However, in standards mode, the font will be at
  64, which is unreadable at many resolutions for
  many people, and is not desirable!

19
References

• http//www.w3.org/TR/REC-CSS2/propidx.html
• http//en.wikipedia.org/wiki/Quirks_mode