# Class 4: The Cascade and Layouts

So one of the questions that CS majors should have right now is this: How does CSS decide which rules to apply to an element?

### Inheritance

HTML creates a tree of elements where nested elements are your children. Many CSS properties are passed on to child elements. Like color:red that will now change all ancestor's text color unless some rule overrides it.

Common Sense Inheritance Task 1: Take a look at this list of CSS2.1 properties. It happens to say which properties are inherited and which ones aren't. You will notice that almost all can accept an inherit value. Why doesn't margin inherit? Now make an example of a paragraph containing a span in which you force inherited non-zero margins.

So many properties of elements are inherited from the element's decendants.

When someone writes a particular CSS rule it will get applied in the following order (from highest priority to lowest priority):

1. Transition Rules (created from animations)
2. !important User Agent (Browser) rules
3. !important User (client/end-user/viewer) rules
4. !important Author (web developer/designer) rules
5. Animation rules
6. Author rules
7. User rules
8. Browser rules

If more than one rule/declaration is set for the same property and the same element then the above chart dictates which one takes precedence.

Cascade Play Task 2: Inspect an above list item in your browser (right-click, inspect element) and take a look at what the user agent stylesheet rules are that impact the ol. Now add your own using the inspector. Now add your own using the plugin we installed yesterday. Try to create a collision. (If you set color twice, which one will win.)

Live Demo by Andy

### Specificity

We select by tag, class, and id most often. When two rules conflict at the same level of the cascade (typically the author's styles since we're writing the CSS) the conflict is decided first by specificity then by order.

The specificity of a rule is a weight given by the targetting power of the CSS selector. Something which is targeted by * { … } has no weight. Every part of the rule which is at the tag level is one tier higher. The class level is one tier higher still. The id level is the highest tier.

See the Pen vLxbyN by Andy Novocin (@AndyNovo) on CodePen.

Specificity Challenge Task 3: Why aren't all of the texts pink? Add the phrase !important once in this CSS to make all paragraph text red. (Now take it away.)

Specificity Challenge Task 4: Add a single character to the CSS above to make the third paragraph gold.

Specificity Challenge Task 5: Remove one line to create some salmon text.

Specificity Challenge Task 6: Examine the style rules which are rejected on these paragraphs (via inspect element).

## Position Property

If we're going to layout webpages with columns and headers and footers etc. we have to understand the position property. We will walk through 4 values and a 5th important situation:

• static
• relative
• absolute
• absolute child with non-static ancestor
• fixed

In all of these cases (except static) we will use the properties top, right, bottom, left to shift the element around in the x-y plane.

See the Pen ZQewoV by Andy Novocin (@AndyNovo) on CodePen.

Position Static Task 7: In the above codepen, change the position of the 3rd external box to static. Notice how right and top have no impact (remove them and see).

### Static

position:static is what I might describe as "in the normal flow". The element will be positioned like normal, stacking up against other elements either inline or blocked.

### Relative

position:relative keeps the space where the item would normally be and it shifts the element "relative" to it's expected position.

The property top: 100px; reads like, push the element 100 pixels from the top.

Relative Task 8: Change the position value of the second internal child of the 3rd external div to relative. Now move it down and right by 65px.

### Absolute

position:absolute removes the element from the normal flow (reserves no space) and positions the element relative to the closest ancestor that is non-static or the body. The baseline version of this is something which is positioned relative to the document itself.

Absolute Task 9: Give the first external div the position absolute and position it with bottom: 0; and right: 0;. Now scale the screen a bit.

Both absolute and relative are kind of dumb. BUT TOGETHER THEY RULE!

### Absolute descendant of relative ancestor

The absolute property will work relative to the most recent "relative" ancestor. So you can move a div within another div.

Absolute Internal Task 10: Set the position of external child 5 to "relative". Now set it's 2nd internal child's position to "absolute", try your best to center it inside the dashed line.

### Fixed

position:fixed will do what absolute does if it has no specified ancestor. That is, it positions itself relative to the page.

Fixed Task 11: Try to move the 6th external box into the bottom left corner of the screen using position:fixed and some other properties. Resize to double check.

## Floating

Another way to position elements is with the property float which takes values left and right (also none and inherit but whatevs).

The idea of float is to push the element as far to the left (or right) as possible and let the other elements flow around it.

See the Pen adJMoO by Andy Novocin (@AndyNovo) on CodePen.

Floating Columns Task 12: Take a look at this example of using floats for a two column setup. http://learnlayout.com/float-layout.html. Convert it to 3 columns.

## Flex Steam Valve

I might not have time to finish these notes. In that case, let's go explore the heck out of this amazing flexbox explorer.