CSS Lesson 2

Cascading, Inheritance and the Box Model

Brett Stimmerman

http://socket7.net/

This presentation can be printed as a handout that includes further information.

Part 4 of 5 in a series available online at http://socket7.net/presentations.

Cascading

Using multiple style sheets on a single page

Specificity is in itself a hierarchy of how rules are applied to elements.

As a basic rule of thumb:

The cascading effect is very powerful when used on very large sites, and handy even on small sites. Cascading is not always necessary, but if you find that your main stylesheet is growing quite large is becoming unmanagable, it might be the solution.

Inheritance

The Parent-Child Relationship

Illustration of elements as containers

© WestCiv.

For example, by setting the body element's color to pink, all elements that are children of body (and their children, and their children's children) will have their color attribute set to pink as well - unless otherwise assigned by a more specific selector.

Background colors and images are never inherited. The default background color is transparent.

The Box Model

Elements are Boxes are Elements

Illustration of the CSS Box Model components

© BrainJar

The Box Model itself is a miniature hierarchy. Aside from the content area, all components can be given seperate and unique display instructions. Padding can be increased independantly from the margin, etc. It should be noted that margins are always invisible, whereas padding takes on the background color assigned to the element in CSS. Border can be assigned a separate color.

Futher Reading

More Thoughts, References and Resources

Each of these sites contain massive amounts of information. These specific links are meant to reinforce some of the topics discussed in this presentation, educate you further on related topics, or give you a first hand look at these topics in action. You may browse each site further if you'd like.

You should bookmark any sites throughout the presentation that are labeled as such, and start to create a collection of 'Web Standards' bookmarks. You will need these resources handy soon, and you'll be using them a lot.

It's Over!