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;

blockquote:before {
content: open-quote;

blockquote:after {
content: close-quote;

li:before {
content: “POW! “;

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


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 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.


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>

…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.



Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s