Разберем background:

body{ background: #000 url(./images/img.jpg) 0 0 no-repeat}

где селектор body это тэг
background — весь задний план сокращённый параметр

#000 — это цвет заднего плана в формате RGB — Red Green Blue (красный зеленый синий) если значение 0 то это темный цевет а если больше значения в районе 7-9 то это светлые тона.
примеры #777 — сокращенно или #777777 полный параметр.
#fff — белый, #000 — чёрный, #f00 — красный, #0f0 — зеленый, #00f — синий и тд.
Этот параметр можно не указывать если слой должен быть прозрачным.

url() — путь до файла картинки где ./ — относительный путь (есть еще ../ и просто / ).
./ ищет папки относительно той директории в которой лежит сам файл css и если там написан путь ./images/ то он будет искать папку images в той же папке где и лежит файл css, где img.jpg -сам файл который лежит в папке images.

Далее 0 0 — это координаты положения картинки по оси X и Y могут принимать значение как положительный так и отрицательный например (10px -10px), а так же могут быть словом например (left top) — положение слева и сверху или вот так (right bottom) — справа снизу, но есть еще и (center center) -где изображение будет отцентрировано по обоим осям X и Y. понятно что можно сделать и (center top) и (left center) или даже(10% 100%) — тоже вариант =).

В самом конце написан параметр no-repeat — это параметр повторения картинки, в данном случае написано не повторять.
Варианты:
repeat — повторять или замостить, а так же
fixed — это когда картинка будет зафиксирована и при присвистывании страницы вниз она не двигается.

Примеры:

body{ background: url(./images/img.jpg) center 0 fixed}
body{ background: url(./images/img.jpg) 100% -50px repeat}

Рассмотрим font:

body{ 
  font-style: italic;
  font-weight: normal;
  font-size: 14px;
  line-height: 16px;
  font-family: Arial;
}
/* или записать вот так */
bory{font: italic normal 14px/16px Arial;}

И та и другая запись будет с одинаковыми свойствами, это кому как удобно, я знаю что после назначения всему документу через указание селектора body будет присвоен и шрифт и размер шрифта и стиль и жирность =) а так же высота строки, будет в коротком варианте то его далее трудно будет переназначить не используя впереди селектор body в начале поискового пути селекторов. Так что лучше в начале для body прописывать конкретными параметрами указания размера шрифта, жирности и тд.

И так разберем font:
Первый параметры в font это стиль шрифта он же (font-style) — он принимает значение normal и italic (нормальный и курсив).

Далее идет жирность =) он же (font-weight) — он принимает параметр normal и bold (нормальный и жирный) есть еще и цифровые значения, но они мало поддерживаются например 200 или 700 (нормальный и жирный).

Далее идет размер шрифта (font-size) — он принимает значения в px, em, rem и %. мы в основном используем px но если сверх точно настроить шрифт используется em и rem. Как я понял rem это относительно того каким он уже был назначен), но я могу ошибаться, во всяком случае когда я менял его параметры так и было он менялся относительно тех настроек которые уже были назначены ранее, так что это очень удобно). Есть даже специальные сайты которые конвертирует px в точное em значение, но мы используем пиксели.
Далее идет высота строки, она же (line-height) — принимает то же значение что и высота только на пару пикселей больше для правильного отображения во всех браузерах! А так же эта штуковина позволяет задать высоту всему блочному элементу, например чтоб скрыть тэг br или hr или div то надо написать ( font-size: 0; line-height:0; height:0; ) и тогда эти элементы скроются =) А еще этим параметром можно отцентрировать шрифт по оси Y если элемент блочный и у него задан параметр height, тогда ставится точно такой же параметр line-height с тем же значением высоты. Это используется в основном в пунктах меню и в списках ul li.
Ну и в конце указывается сам шрифт точнее его Семейство =) (font-family) — он принимает значение одного или нескольких шрифтов, а нескольких потом что если на компьютере стоит друга я операционная система типа linux или MacOS или другая и в нем нету того шрифта который указан первым то он ищет второй указанный шрифт и так далее. Так что не на всех компьютерах Ваш сайт будет отображать одно и тоже! и вообще можно про то что везде будет одинаковым сайт, как напишите так и будет =). Но благо мы знаем уже список тех шрифтов которые есть во многих системах) Можно конечно и свой шрифт назначить например используя Google Fonts. Или другие бесплатные шрифты, так за другие надо деньги платить! Мы же с вами честные.

Безопасный список Шривтов:

font-family: "Arial Black", "Helvetica CY", "Nimbus Sans L" sans-serif;
font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif;
font-family: "Comic Sans MS", "Monaco CY", cursive;
font-family: "Courier New", "Nimbus Mono L", monospace;
font-family: Georgia, "Century Schoolbook L", Serif;
font-family: Impact, "Charcoal CY", sans-serif;
font-family: "Lucida Console", Monaco, monospace;
font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-family: Tahoma, "Geneva CY", sans-serif;
font-family: "Times New Roman", "Times CY", "Nimbus Roman No9 L", serif;
font-family: "Trebuchet MS", "Helvetica CY", sans-serif;
font-family: Verdana, "Geneva CY", "DejaVu Sans", sans-serif;

Рассмотрим Position:

Это просто замечательный параметр если надо что то подвинуть =) я его использую почти всегда.
Он позволяет любой элемент подвинуть как необходимо достаточно только поменять ему позицию. И так позиция по умолчанию у всех элементов static но есть еще и relative и absolute и fixed.
Static — обычная статическая позиция ничего особенного.
Relative — Относительная позиция! но она относительная того места на котором стояло =). И управлять им можно помощью параметров top:, left:, right: или bottom:. Но единственное могу уточнить что если блок переводите в позицию relative и он имеет параметр display: block; — то есть блочный как div и p по умолчанию то ширина его будет 100% относительно того тэга в котором он находился (относительно родителя) и вот такой вот с таким же размером всего элемента будет он перемещаться ) чтоб этого избежать надо указать display:inline; или display:inline-block; либо float: left; или указать ширину элементу. (из за этого появляются горизонтальный скролл!)
Absolute — Относительная позиция, но её фишка в том что она относительна началу координат блока с позицией relative!
то есть если у нас нету родительских тэгов которые стоят в позиции relative , то начало координат она возьмет от начала окна браузера а именно тэга html. Но если у нас есть например div который находится в позиции relative а внутри него есть ссылка которую надо подвинуть и она в позиции absolute то можно использовать top:, left:, right: или bottom: чтоб его двигать относительно позиции relative.
Пример:
css

div.myClass {position: relative; top: 0; left:0; width:200px; height:200px;}
div.myClass a{ position: absolute; top:50%; left:50%;}

html

<div class="myClass"><a href="#">ссылка</a></div>

Таким образом двигаются элементы:

ссылка

Заметьте что координаты начинаются с начала текста, так как объект представляет всегда из себя квадрат или прямоугольник) где начало координат начинается с его верхнего левого угла!

Но есть еще момент позиция absolute может также позиционироваться относительно другого тэга с позицией absolute по тому же принципу начиная от его начальных координат =).

posotion: fixed — это фиксированная позиция относительно тэга html или всего окна браузера.

Рассмотрим display:

Display — это параметр отображения элементов принимает значение в основном display: (block, inline, inline-block, none;) есть и ещё но используются только эти.
block — делает элемент блочным при этом выставляя ему ширину 100% и как бы создает прямоугольник такой. можно казать weight (ширину) и height (высоту) элемента.
inline — если элементов много и они с display:inline; и идут друг за другом они будут в строчку. или снимает блочность элемента такого как p или div. и ему нельзя задать ширину и высоту.
inlne-block — делает тоже самое в строчку элементы убирая его 100% ширину но и дает возможность указать ширину и высоту самостоятельно. (используется для пунктов меню на ровне с float:left). Примечание: если выставить элементам display: inline-block а родительскому тэгу присвоить text-align:center; то эти элементы выставятся по центру страницы! Хорошо это использовать для каталогов.
единственное надо прописывать вместо одного inline-block несколько так называемых хаков: display:-moz-inline-box; display:inline-block; zoom:1; *display:inline; vertical-align: top;
Так будет работать во всех браузерах одинаково, но такой хак не нужно использовать для не блочных элементов это типа тэгов a b i span и тд.
Есть проблема если элементы типа div с display:inline-block; идут по очереди и написаны они в коде подряд с новой строки то между ними будет отступ в 5px, в отличи от метода float:left где отступов нету но требуется в конце всех элементов очистка clear:left или clear:both; чтобы избежать тог что после последнего элемента будет еще раз обтекание.
Есть такой параметр как vertical-align: (top | middle | bottom) — сверху, по середине и внизу. Он отвечает за позицию по оси Y относительно предшествующего элемента или тэга ему тоже можно выдать такой же параметр если понадобится =)
none — скрывает весь блок целиком и не резервирует место на странице под него, а visible: hidden; — скрывает но резервирует место под элемент.