Верстка дизайна

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

Как работает CSS

Что, по сути, есть изменение дизайна? Это изменение графической составляющей форума и интерфейса.
Любые форумы и сайты - это таблицы с текстом и ссылками. А дизайн css позволяет этим таблицам принять удобный вид для чтения и восприятия информации. Например: на форумах визуально разделены разные "блоки" - разные посты отделяются визуальными границами, страница тем отделяется от общего фона сраницы, а информация об авторе стоит справа/слева от сообщений - все это заслуга CSS.
Таким образом, у редактирования дизайна есть две миссии: улучшение интерфейса и наведение отличительной красоты. Однако дизайн css не влияет на содержимое форума: текст сообщений, названия разделов, функционал форума через стиль не поправить.
Верстка дизайна представляет собой прописывание кодов для конкретных элементов.
В любом движке любого сайта и форума для этого можно действовать двумя способами - либо прописывать коды в head с тегами <style>, либо открыть стандартный шаблон и изменять его.
На примере mybb форума: вставлять данные коды с тегами <style> в Администрирование > Настройки > HTML-верх или можно редактировать стандартный дизайн-шаблон через Администрирование > Стиль.

Чтобы научиться писать сами коды, не надо их зубрить, нужно просто понять, как они работают, и запомнить написание кодов (выучить синтаксис кодов).
Любой css-код состоит из СЕЛЕКТОРА, СВОЙСТВА и ЗНАЧЕНИЯ.
СЕЛЕКТОР (от англ. select - выбирать; selector - "отборщик") - это "имя" элемента, который меняется. Мы указываем (выбираем), что будет изменено (например: категории форума, форма ответа, поля профиля и т.п.).
селекторы не нужно выучивать наизусть и знать, они на каждом движке свои. Это уникальные идентификаторы и классы элементов, которые можно "подглядеть" в исходном коде.
Например, вот так выглядит HTML код шапки mybb форума (красное - идентификаторы, синее - классы):

<div id="pun-title" class="section">
  <table id="title-logo-table" cellspacing="0">
    <tbody id="title-logo-tbody">
        <tr id="title-logo-tr">
           <td id="title-logo-tdl" class="title-logo-tdl">
            <h1 class="title-logo">
              <span>ForumDesign TS - Дизайн для форумов и техническая поддержка</span>
            </h1>
           </td>
           <td id="title-logo-tdr" class="title-logo-tdr">
            <img width="468" height="60" border="0" src="http://mybb.ru/i/blank.gif">
           </td>
        </tr>
      </tbody>
   </table>
</div>

в коде css идентификаторы указываются решеточкой (#), а классы - точкой (.). Например:

#pun-title {тут будет код}
.title-logo-tdl {тут будет код}

селекторов может быть не один, а сразу несколько. Когда нужно задать одинаковые свойства сразу нескольким элементам html-кода, нужно перечислить идентификаторы и классы через запятую, например:

#title-logo-table, #title-logo-tr, #title-logo-tdl {тут будет код}

СВОЙСТВО (так же называется "параметр") - это то, что именно будет меняться в выбранном (с помощью селектора) элементе. Например: фон, размер, границы и т.п.
ЗНАЧЕНИЕ (так же называется "аргумент") - это какие именно изменения произойдут с выбранным свойством. Например: указываем цвет, ссылку на фон, размер в пикселях или процентах и т.п.
В отличие от селекторов, которые можно посмотреть в исходном коде сайта, СВОЙСТВА и ЗНАЧЕНИЯ нужно либо знать, либо подглядывать в специальных справочниках по мере необходимости.

Свойства и значения пишутся парами внутри фигурных скобок ({}). Свойство и значение - неразлучная пара: не бывает такого, что указано только свойство без значения, они всегда идут вместе.
После свойства ставится двоеточие и пишется аргумент:

#селектор {свойство: значение;}
пример:
#pun-navlinks {backgroud-color: #FF0000;}
расшифровка:
меню навигации {цвет фона: красный;}

Парочек свойство: значение; у селектора может быть сразу несколько, указываются они через точку с запятой (

#селектор {свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
свойство: значение;
....
}

Если не соблюдать вышеизложенные правила пунктуации в CSS-кодах, они не будут работать.