Saturday 19 May 2012

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;
}