CSS. Начнем с простого.

наверх

CSS (Cascading Style Sheets — каскадные таблицы стилей) — язык описания внешнего вида документа.

Зачем нужен CSS

Используется для задания шрифтов, цветов, расположения отдельных блоков и других моментов внешнего представления web-страниц. Основная цель разработки CSS — разделение описания логической структуры web-страницы от описания внешнего вида этой web-страницы (которое теперь производится с помощью CSS). CSS позволяет представлять один и тот же документ в различных методах вывода или стилях, таких как экранное представление, печатное представление и т.д.

Как подключить css

Правила CSS пишутся и располагаются в таблицах стилей. CSS — это обычный текстовый файл (.css), в котором написано большое множество стилей для элементов web-страницы и комментариев к ним.
Таблицу стилей, которая находится в отдельном файле (.css), можно подключить к web-документу посредством тега <link> между тегами <head> и </head>

<head>
  <!-- тут разные мета-теги и т.д. -->
  <link rel="stylesheet" type="text/css" href="path/to/style.css">
</head>

Так же стили css можно писать прямо в вашем html документе между тегами <style></style>. Но желательно все css правила выносить в отдельные css файлы.

<head>
  <!-- тут разные мета-теги и т.д. -->
  <style type="text/css">
    body {
      color: red;
    }
  </style>
</head>

Правила CSS

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

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

Селекторы CSS могут быть:

селекторами элементов;

p {font-family: Garamond, serif;}

идентификаторов;

#paragraph1 {margin: 0;}

классов;

.note {color: red; background: yellow; font-weight: bold;}

Это далеко не все варианты селекторов. О них вы можете почитать по ссылке: ссылка на css селекторы.

Классы, идентификаторы элементов.

Идентификаторы элементов задаются через атрибут id. Классы элементов задаются через ключевое слово class. Классов и идентификаторов может быть несколько у одного элемента.

<div id="first"> ... </div>
<p class="big red simple"> ... </p>

Небольшой пример таблицы стилей css

p {
  font-family: Tahoma, serif;
}
#news p { /* стиль тега p у элемента с id="news" */
  color: blue;
}
h2 {
  font-size: 10px;
  color: green;
  background: white;
}
p#paragraph1 {
  margin: 0;
}
.note {
  color: red;
  background: yellow;
  font-weight: bold;
}
a:hover { /* стиль для наведения на ссылки */
  text-decoration: none;
}

И, наконец, несколько полезных ссылок.

Очень качественный справочник по CSS свойствам: http://htmlbook.ru/css/

Учебник по CSS: http://ru.html.net/tutorials/css/