Для начала синтаксис. Запомните правило CSS - селектор -> { -> свойство -> : -> значение -> ; -> }
Выглядит это так:

p{color:red} /*пропущен знак ; после значения*/
div{height:50px; width:40px;} /*здесь пропустить ";" не получится*/
DIV{height:50px; width:40px;}/*А что регистр? А ничего, можно и так...*/

В примере я специально пропустил ";" чтобы показать что серьезной ошибки здесь нет. Дело в том, что все, что находится в фигурных скобках как бы изолированно от следующих правил, поэтому пропустить ";" после последнего значения не страшно, но не нужно. Если таблица содержит несколько свойств, то они обязательно должны разделяться знаком ";"

Сразу оговорим стиль кодирования... В CSS игнорируются пробелы и enter-ы, не чувствителен к регистру селекторы тегов (ВНИМАНИЕ!!! к регистру не чувствительны ТОЛЬКО селекторы тегов, селекторы классов должны быть абсолютно идентичны названиям классов в HTML документе. Другими словами .main и .Main - два разных класса) по этому Вы вольны выбирать для себя удобный и понятный для Вас стиль, ну, или придерживаться принятого в Вашей группе разработчиков стиля (все равно заставят...).
Вот пример того, как можно писать:

div{height:50px;width:40px;} /*Стиль в строчку без пробелов*/
div{height:50px; width:40px;} /*Стиль в строчку с пробелами*/
div
{
   height:50px; 
   width:40px;
} /*Вариант стиля "каскадом"*/
div{
   height:50px; 
   width:40px;
} /*Наиболее популярный вариант стиля "каскадом"*/

Все четыре записи идентичны, выбирайте свой. Как видно из примера комментарии заключаются в /* */. Комментарии могут быть расположены где угодно, до или после объявления стиля, внутри {} после любого правила.

Теперь о том, как же строятся селекторы. Как уже говорилось мы можем задавать стили для html-тегов. Для этого просто объявляем тег и задаем правила.
Показываю:

p{color:red;} /*Все теги P (параграфы) будут иметь красный цвет текста*/
p span{color:green;} /*Все теги SPAN, но только те, которые вложены в тег P будут иметь зеленый цвет*/

Как видно, можно задавать стиль не просто тегам, а только тем, которые отвечают определенным условиям.
Далее рассмотрим работу с классам. Имеем HTML:

Простой параграф, который выводит какой-то текст, таких в нашем документе... да, все :)

Этот параграф имеет назначенный класс и его можно выделить из общего текста.

Так будут выглядеть наши стили:

p{
  font-size:12px;
  font-family:verdana; /*С таким стилем у нас будут все параграфы*/
}
p.special{
  font-size:24px;
  color:red; /*Для параграфа с классом special у нас особые стили*/
}
.special{
  font-size:24px;
  color:red; /*Если класс special задается только параграфам то определять можно только класс не уточняя тег*/
}

CSS-cелектор, указывающий на класс начинается с "." (точка). Между точкой и названием класс пробела быть не должно. Если нам необходимо определить не только класс, но и элемент которому от присвоен (например, когда класс special может быть присвоен не только параграфу, но и, к примеру блоку div) необходимо сначала указать селектор тега и затем селектор класса. При этом НИ КАКИХ ПРОБЕЛОВ.

Селекторы, указывающие на ID элемента начинаются со знака #. Синтаксис такой же, как и с классами. Рассмотрим сразу более сложный пример.
Имеем html код:

А это простой параграф, но уже вне нашего div-a.

Теперь придадим стилей:

p{      /*Стиль для всех параграфов на странице*/
    color: #000;
    font-size: 12px;
    font-family: verdana;
}
#main{  /*Стили для DIV-а*/
    border: 4px solid red;
    padding: 10px;
}
#main p{/*Стили для всех параграфов в DIV-е*/
    color: green;
    font-size: 16px;
}
#main .inside{/*Стили для параграфа с классом inside в DIV-е*/
    font-family: arial;
    font-size: 26px;
    color:blue;
}

Обратите внимание на селекторы "#main p" и "#main .inside". Сначала идет селектор для ID, потом ПРОБЕЛ, за тем селектор тега (во втором случае класса). Это означает, что стиль будет применен, в первом случае, ко всем параграфам внутри DIV-а, а во втором случае только к параграфам, имеющим класс inside.

Вот, что должно получиться:

Кроме того, мы видим, что DIV-у назначен не только ID, но и CLASS. Да,да - мы можем назначать одновременно и ID и CLASS, и даже несколько CLASS-ов.

К чему это я? Еще один ньюанс:

#main{  /*Абсолютно правильная запись*/
    border: 4px solid red;
    padding: 10px;
}
#main.inside{  /*Но, иногда требуется написать именно так*/
    border: 4px solid blue;
    padding: 50px;
}

Запись "#main.inside" не должна содержать ПРОБЕЛОВ. И читается она примерно так "Назначить стили элементу с ID main И классом inside". Причем, приоритет будет отдан второй записи "#main.inside", потому, что она более конкретизирована.

Вот, что получиться:

Для чего нагружать селекторы? Представьте себе, что класс присваивается динамически, причем в зависимости от определенных событий классы будут свои (например .active для активного пункта меню и .current, если активен любой из пунктов подменю), вот и судите сами...

Запишем последние стили следующим образом:

p{      /*Стиль для всех параграфов на странице*/
    color: #000;
    font-size: 12px;
    font-family: verdana;
}
div#main{  /*Стили для DIV-а*/
    border: 4px solid red;
    padding: 10px;
}
div#main p{/*Стили для всех параграфов в DIV-е*/
    color: green;
    font-size: 16px;
}
div#main p.inside{/*Стили для параграфа с классом inside в DIV-е*/
    font-family: arial;
    font-size: 26px;
    color:blue;
}

Что изменилось? Да, ничего! Одновременное определение тега и класса мы рассматривали выше, тоже самое и с ID.

Так строятся основные (простые) селекторы, основанные только на классах и идентификаторах. В следующей статье рассмотрим применение псевдоклассов.