WNM 608, Module 5: The Cascade

WNM 608, Module 5: The Cascade The nth-of-type() pseudo class will grab what ever type of tag you attach it to and style all like tags at the interval you specify inside the parenthesis. Using the keyword "even" will style every other tag starting with the second tag. If we attach it to the tr tag we can tint every other row.

static: the default. This is the normal flow of an element undisturbed.

relative: does not obstruct the flow but makes the element available to position things within. When an element is positioned relatively it can access the following properties that behave like offsets: top specifies the offset to the top edge of the containing element. right specifies the offset to the right edge of the containing element. bottom specifies the offset to the bottom edge of the containing element. left specifies the offset to the left edge of the containing element.

absolute: takes pixel perfect position. Pulls the element outside of the normal flow of the page. When an element is positioned absolutely, it can take the following offsets:

top specifies the distance from the top edge of the containing element. The containing element MUST have it's position property explicitly set to be relative. If no containing element with the position set to relative is available, the absolutely positioned element will be absolutely positioned relative to the browser window. If this sounds like mush to you (and it should) don't worry. We will be looking at an example in a moment.

right specifies the offset to the right edge of the containing element.

bottom specifies the offset to the bottom edge of the containing element.

left specifies the offset to the left edge of the containing element.

z-index sorts elements in three dimensions when they are pulled outside of the

normal flow of a page. This allows elements to overlap. The higher the z-index the closer it is to the viewer. This is the HTML equivalent of layers.

inherit: the position is inherited the parent element

fixed: fixes the position of the element and pulls it outside of the flow of the page. When the page scrolls, the fixed element does not. This is how fixed foots are created. This is a problematic property. Some browsers misinterpret it, most notoriously iOS on the iPad.



The most commonly used properties are the relative and absolute properties. They are frequently used in tandem with each other. To see this action, lets make a demonstration. We are going to set up a small scrolling slide show. We are going to do this in two stages. Today we will write the CSS. In our section on Javascript, we will return to this file and add the animation!

download this file for the assets and resources