Css Study Sheet

Front 1

<DIV>

Back 1

block level element. A block-level element starts on a new line and stretches out to the left and right as far as it can

Front 2

<span>

Back 2

Standard inline element. In line element can wrap some text inside a paragraph without disrupting the flow of the paragraph.

Front 3

CSS background property

Back 3

Used as a shorthand method to specify one or more background properties. color, image, repeat, attachment, position

Front 4

CSS border property

Back 4

Used to specify one or more of the three border values. With, style, and color

Front 5

Static positioning

Back 5

Static positioned element is always position according to the normal flow of the page static positioned elements are not affected by the top, bottom, left, and right properties

Front 6

Fixed positioning

Back 6

Element with a fixed position is positioned relative to the border window, and will not move even if the window is scrolled

Front 7

Relative position

Back 7

Position and relative to its normal position

Front 8

Selectors can be grouped

Back 8

ul, li, p {font-size: 16px;
color: blue;
}

Front 9

Left float property

Back 9

Element floats to the far left edge of its parent container. The container is most likely a body tag. It says nothing can float to my left.

Front 10

Right float property

Back 10

Element floats to the far right edge of its parent container. The container is most likely a body tag. It says nothing can float to my right.

Front 11

Container collapse

Back 11

This is when you float an element and the element leaves the flow of the page. so if you left float, or right float the body tag that was containing that element will no longer contain that element.

Front 12

clear property

Back 12

The clear property has five possible values: left, right, both, inherent or none. By clearing an element, you can ensure the element does not appear to the left or the right of any floated element. This has the result of turning off and restoring normal document flow to the remaining elements.

Front 13

How do you help to solve container collapse?

Back 13

In order to prevent the layout of the page from messing up when you float elements, you can add a paragraph <p> below the <div's> that you are floating. Then go back to the CSS for the <p> and add in : clear:both
2nd option: you can go to the CSS selector that contains your elements and add the overflow property.
overflow: scroll, auto, or hidden.
overflow:hidden. will hide scroll bars and keep content contained.

Hint 13

Front 14

Clear fix technique for collapsing elements.

Back 14

used to prevent parent collapse.
Add a css class to the parent element. add to styles and apply be quick fix class to any element you need to contain the floats inside of it.
ex: <section class="clearfix">
CSS:
<style>
. clearfix:before,
.clearfix:after{
content:"";
display:table;}
.clear fix:after{
clear:both
}
</style>
<style>
/*For IE <8 (trigger hasLayout)*/
.clear fix {
zoom:1;}
</style>
<![end if]-->
This method adds a empty string of content after your float elements to keep the parent from collapsing.