CSS Basics

I'm a shameless novice at CSS at the moment.
I'm just going through CSS at http://cssxcountry.codeschool.com and Just thought I'd take a second to note down some things that need noting in my head about CSS. This post therefore will be messy and perpetually unfinished. You were warned.

Targetting CSS:
<h1> is caught with h1 { someCSS; }
class="coffee" is caught with .coffee { someCSS; }
and,
id="tea" is caught with #tea

Compound CSS: multi-word classes or IDs
First, if class="some thing"
the CSS for it will NOT be .some thing, it will be .some.thing as it is like having class="some" and class="thing"
Note: I don't know if having multiple classes in the CSS is even allowable.

Text:
center is a possible option for text-align
bold, italic and similar are in font-style

Other:
CSS does not care if it has a space between an attribute and value.
float: right;
float:right;
Both are valid.

Elements in CSS are space separated, whereas classes or IDs are attached. li p.intro#first

ShorthandCSS fragments from http://www.dustindiaz.com/css-shorthand/
Font
element {
  font-style: normal;
  font-variant:normal;
  font-weight: normal;
  font-size: inherit;
  line-height: normal;
  font-family:inherit;
}
font shorthand oddity: http://www.impressivewebs.com/css-font-shorthand-property-cheat-sheet/
The style, variant and weight can be ommited and the line-height is seperated by the / character.

Margin
element {
  margin-top: number+unit;
  margin-right: number+unit;
  margin-bottom: number+unit;
  margin-left: number+unit;
}

CSS positioning and Stacking images in rails.

So you are using Ruby on Rails and you want a method of stacking images on top of each other.
Your answer will probably involve CSS but many of the blog posts and Q&A posts I found weren't too descriptive so here is my shot at explaining this from the perspective of someone who doesn't use CSS often.

First a short bit on parents in CSS

When using CSS, having one style inside the other makes the top level the parent. In this example the div with the id of "container" is the parent of the div with the id of "contained".

<div id="container">
<div id="contained">
</div>
</div>
This does not work with class instead of id.

<div class="container">
<div class="contained">
</div>
</div>

And the CSS position

There are several good resources explaining position and I will just link to my favourites.
http://www.barelyfitz.com/screencast/html-training/css/positioning/

http://css-tricks.com/absolute-positioning-inside-relative-positioning/

Onto the good stuff

Our CSS files are in assets/stylesheets/ and the one we are using is the application wide stylesheet application.css.scss

The technique is to have a position:relative parent container, so that all position:absolute items inside are in the same place against the relative container. Note that the container needs a size, it will not take the size of absolute children. My images are 64px*64px big so I have to force my container to be that large or the next HTML element in the flow will overlap it.
In application.css.scss

#container {
    position:relative;
    width: 64px;
    height: 64px;
}
#image {
    position: absolute;
    top: 0;
    left: 0;
}
This lets you place images with the id="image" inside a div of id="container". In my code I stack City.png vertically above Grass.png in the view. Note in versions of Rails before 3.1 you need to use :id => instead of the new syntax id:
<div id="container">
<%= image_tag("Grass.png", id:"image") %>
<%= image_tag("City.png", id:"image") %>
</div>