More notes on CSS!

Psuedo Elements:

selector:pseudoelement { property: value; }

p {
    font-size: 12px;
}

p:first-letter {
    font-size: 24px;
    float: left;
}

p:first-line {
    font-weight: bold;
}'

 content
blockquote:before {
content: open-quote;
}

blockquote:after {
content: close-quote;
}

li:before {
content: “POW! “;
}

p:before {
content: url(images/jam.jpg);
}

position

The position property is used to define whether a box is absolute, relative, static or fixed:

static is the default value and renders a box in the normal order of things, as they appear in the HTML.
relative is much like static but the box can be offset from its original position with the properties top, right, bottom and left.
absolute pulls a box out of the normal flow of the HTML and delivers it to a world all of its own. In this crazy little world, the absolute box can be placed anywhere on the page using top, right, bottom and left.
fixed behaves like absolute, but it will absolutely position a box in reference to the browser window as opposed to the web page, so fixed boxes should stay exactly where they are on the screen even when the page is scrolled.

floating

Floating a box will shift it to the right or left of a line, with surrounding content flowing around it.

Floating is normally used to shift around smaller chunks within a page, such as pushing a navigation link to the right of a container, but it can also be used with bigger chunks, such as navigation columns.

Using float, you can float: left or float: right.

clear 

Then, if you do not want the next box to wrap around the floating objects, you can apply the clear property:

• clear: left will clear left floated boxes
• clear: right will clear right floated boxes
• clear: both will clear both left and right floated boxes.

So if, for example, you wanted a footer in your page, you could add a chunk of HTML…

<div id="footer">
    <p>Footer! Hoorah!</p>
</div>

…and then add the following CSS:

#footer {
    clear: both;
}

And there you have it. A footer that will appear underneath all columns, regardless of the length of any of them.