Cascading Style Sheets 101

Inheritance

Which brings me to something I should go over here a basic property of CSS is inheritance. To understand this, you must know the html is viewed as a tree like structure with ancestor-descendant relationships.

First some definitions - these relations depend upon the point (or element) in the tree from which you are looking at. Consider the following definitions based on the point of the p element highlighted in the image below.

Ancestor

All elements in the tree and branch (see diagram) that are above the current element's point of view. So "html" and "body" elements are the ancestors of the "p" element.

Child

An element that is enclosed by another element without any inter veining elements. So the "span" and "ul" elements are a child of the "p" element. However the "li" and "a" elements are not child elements of the "p" tag because there are other elements nestled between them and the "p" element.

Descendant

all elements enclosed within another element. Looking at that "p" element again, the "span", "ul", "li" and "a" elements are descendants of the "p" element.

Parent

an element that is directly above another element and encloses the other element.. The body element is the parent of the p in the image

Consider this basic structure:
equates to this html document:

This text is blue. If you looked at the code in this line you would see:

The strong element inherited the color from the p element. Generally inheritance is based on common sense. Values like the font-family, color are inherited where values like borders are not.. after all if you put a border around a p element.. you probably do not want a border around all of the child elements within that p element. Note: Netscape 4 and MSIE 4 have problems with inheritance. This is why you see css like this: body, p, li, table, td, th {font-family: "Courier New", Courier, monospace;}. Technically if you set a font-family for the body element all ancestor elements should inherit that font family unless you make a rule to change an elements font family. However Netscape 4 and Internet Explorer 4 do not apply inheritance into tables.

Block/inline/list elements

Just one more basic concept be fore we get into the practical aspects of CSS. All html elements are considered as a block level element, an in-line element or list element. Block level elements are things like <p>,<div> <h1>. In-line elements are like: <span>, <strong> ,<sup>. Basically only <li> is a list element. This is important because some properties in a rule set can only be applied to block level elements. Here is a quick guide of CSS properties: check it out here.

Ok you're done with the basic syntax and structure of CSS. Next set of webpages we'll start styling! aka applying what you just learned into real world web dev!