The Cascade is an algorithm defining how to combine properites values originating from different sources.

Before we begin, what CSS entities participate in the cascade?

Only CSS declarations apply to the cascade

• property key/value pairs
• a.k.a. @font-face containing descriptors don't participate
• note that @charset and @import obey other algorithmic rules
• note that CSS animations, specifically @keyframes define animations between states. So keyframes don't cascade. It takes values from one single keyframe at a time and never mixes several of them.

If something applies, the algorithm then determines its importance (whether they have !important and their origin). If you looked at a table which compared origin and importance, you would notice that precedence is ascending-- meaning, that user stylesheets take precedence over user agent stylesheets.

But what if they are equal?

In case of equality, the specificity of a value is considered to choose one or the other.

CSS Specificity is the means by which the browser decides which property values are them most relevant to an element and gets to be applied.

Specificity order ranks increasing as:

• Universal Selectors
• Type Selectors
• Class Selectors
• Attributes selectors
• Pseudo-classes
• ID Selectors
• Inline Style

* Note that proximity of elements in the document tree is irrelevant to specificity

Wait, but what about !important ?

The !important rule is used to override any other declaration in CSS, wherever it is in the declaration list.

Things you shouldn't do:

• Do not do this on site wide CSS.
• Page specific to override vendor is okay... but still makes Gina sad.
• Always look for specificity and the natural cascade.
• Joe may disagree, but I think !important is okay for utility classes

Imagine you are a box. You live in a box world with box rules. display is the way that you, a box, behave.

display : none

Like a ninja, it isn't there. Nor does it affect the layout. All decendents are now hidden and removed from layout. It's like you never were there.

* Note that it visibility : hidden is different in that it will hide the element but the layout will respond like it's still there.

display : block

A block-level element is one that takes up a whole new line and stretches out from left to right as far as it can. Most things in your browser's style sheet are by default block-level elements. <div> is possibly the most common you'd encounter. There are also <form>, <p> and HTML5 <header>, <footer>, and <section>.

display : inline

inline elements go with the flow of the line. For example, elements such as <a> and <span> wrap the text that they surround.

display : inline-block

Sometimes you can have your cake and eat it too. The element generates a block element box that will be flowed with surrounding content as if it were a single inline box.

position : static

Imagine you had those childhood blocks you played with as a kid. Well, think of the gravity that applied to them as being the "normal flow". If I drop a static <div> on the page it will snap to the top left (in this strange world of boxes, gravity is upside down). If you added another block to the page, you'd see it stack nicely one on top of the other.

* Notice that properties like top, left, right, or bottom do not apply.

position : relative

relative also acts like your childhood blocks and stacks as you'd expect. However, relative elements can bend the law of gravity. You can offest them and their children exist within the new coordinate plane as the parent.

position : absolute

absolute elements are completely outside of the flow. They dance to the beat of their own drum, locating to a specified position that is relative to its closest positioned ancestor or containing block. Absolutely positioned boxes can have margins, they do not collapse with any other margins.

position : fixed

fixed isn't much different than absolute except it is relative to the viewport (broswer, device window). It doesn't scroll within the document. It's always there.

float is a CSS positioning property.

• to understand why it exists, look to print design
• it is different than absolute in that it isn't completely out of the flow, it affects the other elements in its line to flow around it.
• there are four values, left, right, none, and inherit.

You mean I can create entire web layouts using float!??!

Yes.

But anybody who has tried to make a layout with floats has needed to learn the sister property to float which is clear.

If you want to create a new line you need to apply the declaration clear : both to whatever element you want not flow around.

• clear has four values as well : both, left, right, and none
• If the parent element weirdly collapses, try clearing the float after the floated elements but before the close of the container
• There are a few other methods for clearing floats, such as setting the overflow property on the parent... but this can be a pain in the ass as you'll find some weird scrollbars potentially happening... and it could hide content.
• Another easy way could be:

  									
  	.clearfix:after { 
  	   content: "."; 
  	   visibility: hidden; 
  	   display: block; 
  	   height: 0; 
  	   clear: both;
  	}
  									
  								

• TL;DR if you think you can do this easily in legacy browsers you are in for a sad, sad wake up call.