Don't like this style? Click here to change it! blue.css
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?
The answer is a 3-parter: inheritance, the cascade, and specificity.
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):
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
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).
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:
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).
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.
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.
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!
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.
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.
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.
I might not have time to finish these notes. In that case, let's go explore the heck out of this amazing flexbox explorer.