Так что это такое - Сss? Cascading Style Sheets ( Таблицы Каскадных Стилей ). Css - это язык содержащий набор свойств для определения внешнего вида документа. С его помощью дизайнер имеет полный контроль над стилем и расположением каждого элемента веб страницы. Это гораздо проще использования обычного набора HTML тегов. Приведу пример: Вам нужно создать жирный красный подчеркнутый текст.

А если подобный стиль нужно использовать несколько раз? Хорошо если раз 5, а если 10-20? Вот тут нам и поможет Сss. Существует три вида таблиц стилей: Внутренние таблицы стилей, Глобальные таблицы стилей и Связанные таблицы стилей. Внутриние таблицы стилей ( Inline Style Sheets ) мало чем отличаются от HTML тегов. Глобальные ( Global Style Sheets ) определяют стиль элементов во всем документе. Связанные ( Linked Style Sheets ) могут быть использованы для нескольких документов и хранятся во внешнем файле. Подробнее об этом написано ниже.

Селекторы (Selectors):
Любой элемент HTML может иметь CSS селектор. Селектор определяет стиль элемента, для которого он создан.

Все элементы H1 в документе будут красного цвета, размером в 20 точек (pt , point).

Классовые селекторы (Class Selectors):
CLASS -- класс стилей в css. Для его определения в css используется знак "."+ имя.
Все селекторы могут иметь разные классы. Это позволяет одинаковым элементам иметь различные стили.
EXAMPLE: H1.blue {color:blue;size:20pt;}

Все элементы H1 с атрибутом CLASS="blue" стануть синими.
Классы могут быть также описаны без привязывания их к определенным элементам.
EXAMPLE: .green {color:green;}

В данном случае все элементы с указанным атрибутом CLASS="green" станут зелеными.

ID селекторы (ID Selectors):
ID -- индивидуально именованный стиль. C его помощью можно создавать стилистические исключения cреди элементов одного класса. Для определения в css используется знак "#"+ имя.
Индификаторы используются в основном для придания одному или нескольким элементам одного класса индивидуальных свойств. Скажем Вы создали класс blue -- синий курсив. Но вам понадобился жирный, подчеркнутый текст синим курсивом. Конечно, можно создать новый класс, но зачем? Проще описать ID. Например "boldunderline". И все элементы класса blue с значением ID "boldunderline" станут жирным подчеркнутым синим курсивом. Произойдет как бы синтез свойств класса blue и идификатора boldunderline.
 

Как видно из примера, ID может быть использован без указания класса ( последний параграф примера ). Тогда параграф будет обладать только свойствами ID ( в примере - жирный, подчеркнутый текст ).
 

Контекстуальные селекторы (Contextual Selectors):
Контекстные селекторы - это сочетания нескольких обыкновенных селекторов. Стиль задается только элеметнам в заданной последовательности в зависимости от каскадного порядка.
 

В данном примере все элементы EM внутри элементов P будут иметь заданный стиль.
 

Придание нескольким элементам одинаковых свойств:
Скажем Вам нужно придать нескольким элементам Вашей веб страницы одинаковых свойств. В этом случае при определении элементоы перечисляутся через запятую.

Все элементы h1, h2, h3, p и strong будут зелеными.
 

Псевдоклассы и псевдоэлементы :
Псевдокласс состоит из элементов одного типа, отвечаюшему определенному критерию. Псевдоклассы и псевдоэлементы при определении отделяются знаком ":" .

Список псевдоклассов и псевдоэлементов :
- Anchor Pseudo Classes -- Эти псевдоклассы элемента <a>, обозначающего ссылки. Псевдоклассы этого элемента -- link ( линк ), active ( активная ссылка ), visited ( посещенный ранее URL ), hover ( при поднесении курсора, не работает в Нетскейпе ).
- First Line Pseudo-element -- first-line. Этот псевдоэлемент может быть использован с block-level элементами ( p, h1 и т.д. ). Он изменяет стиль первой строки этих элементов.
- First Letter Pseudo-element -- first-letter. То же самое что и first-line, только влияет не на всю строку, а только на первый символ.
 

В данном примере все элементы Anchor (ссылки) будут синими. При нажатии ( в активном состоянии ) поменяют цвет на красный. И при подведении курсора мышки исчезнет подчеркивание. Очень эффектный прием :-)

Как уже говорилось, использование Внутрених стилей мало чем отличается от использования обычных HTML тегов. Они задают стиль только одному элементу документа при помоши атрибута style в HTML теге.

RESULT:Hello World!
 

RESULT:Hello World!
 

Как можно заметить, код Inline Style Sheet Example получился больше чем HTML Example. Поэтому иногда разумнее использовать обычные HTML теги

Глобальные стили задают вид элементов всего документа. Для этого используется тег <STYLE>. Он размещается в заголовке документа. Пример:
 

В данном примере все элементы H1 будут написаны крупным красным курсивым, все элементы с указанным классом BLUE будут синими , а а все элементы с индификатором ID="Bold" станут жирными.

Связанные таблицы стилей используются для придания нескольким документам одного стиля. Хронятся они в отдельном файле. Пример (файл styles.css):

Как видите, это очень похоже на Global Styles Sheets. Так оно и есть. Все что относилось к Глобальным стилям справедливо и здесь. В самих же документах делается ссылка на этот файл при помощи тега <link>. Выглядит это так: <link REL="STYLESHEET" TYPE="text/css" href="путь до файла">
 

На этом я заканчиваю Chapter I и перехожу к Chapter II.

• font-family
Possible Values: Любой шрифт
*Applies to : All elements
Описание: Это свойство определяет используемый элементом шрифт. Если указать УРЛ, то шрифт автоматически установится на компьютер пользователя
EXAMPLE:font-family:Arial Black URL('arialblack.ttf')

• font-style
Possible Values:
[1] normal - без изменений
[2] italic - курсив
*Applies to : All elements
Описание: Стиль элемента. Курсивный или обычный
EXAMPLE:font-style:italic

• font-variant
Possible Values:
[1] normal - без изменений
[2] small-caps - заменяет все буквы на большие
*Applies to : All elements
Описание: Netscape вообще не поддерживает это свойство.
EXAMPLE:font-variant:small-caps

• font-weight
Possible Values:
[1] normal - без изменений
[2] bold - жирный
[3] bolder - очень жирный ( в MSIE не отличается от bold, в Нетскейпе от нормал )
[4] lighter - тонкий ( не отличается от normal )
[5] любое значение от 100 до 900
*Applies to : All elements
Описание: Выделение ( жирность ) элемента
EXAMPLE:font-weight:bold

• font-size
Possible Values:
[1] размер (+)
[2] xx-small, x-small, small, medium, large, x-large, xx-large - любое из этих значений
[3] smaller, larger - любое из этих значений
*Applies to : All elements
Описание: Размер шрифта
EXAMPLE:font-size:30pt

• font
Possible Values:
*Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE:font: italic bolder Arial 12pt

• word-spacing
Possible Values:
[1] длина (+)
[2] normal - без изменений
*Applies to : All elements
Описание: Расстояние между cловами. Не работает ни в Нетскейпе, ни в MSIE
EXAMPLE:word-spacing:0.4em

• text-decoration
Possible Values:
[1] none - нет
[2] underline - подчеркнутый
[3] overline - надчеркнутый ( не поддерживается в Нетскейпе )
[4] line-through - перечеркнутый
[5] blink - мигающий ( не поддерживается в IE )
*Applies to : All elements
Описание: "Украшение" текста
EXAMPLE:text-decoration:line-through

• letter-spacing
Possible Values:
[1] длина (+)
[2] normal - без изменений
*Applies to : All elements
Описание: Расстояние между буквами. Не работает в Нетскейпе
EXAMPLE:letter-spacing:100

• vertical-align
Possible Values:
[1] baseline
[2] sub
[3] super
[4] top-text
[5] top
[6] middle
[7] bottom
[8] bottom-text
[9] процент
*Applies to : Inline elements
Описание: Позиционирование элементов по отношению к другим элементам стоящих в одном ряду. Не работает в Нетскейпе
EXAMPLE:vertical-align:top-text

• text-transform
Possible Values:
[1] none - нет
[2] Capitalize - каждое слово начинается с большой буквы
[3] UPPERCASE - каждая буква текста становится заглавной
[4] lowercase - каждая буква текста становится маленькой
*Applies to : Inline elements
Описание: Изменение текста. Не работает в Нетскейпе
EXAMPLE:text-transform:Capitalize

• text-align
Possible Values:
[1] left - текст слева
[2] right - текст справа
[3] center - текст по центру
[3] justify - текст "растянут"
*Applies to : Block-level elements
Описание: Положение текста
EXAMPLE:text-align:right

• text-indent
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : Block-level elements
Описание: Отступ
EXAMPLE:text-indent:30 em

• line-height
Possible Values:
[1] normal - без изменений
[2] длина (+)
[3] процент
*Applies to : All elements
Описание: Отступ сверху
EXAMPLE:line-height:100%

• color
Possible Values:
[1] цвет (+)
*Applies to : All elements
Описание: Цвет
EXAMPLE:color:#f00000

• backgroung-color
Possible Values:
[1] цвет (+)
*Applies to : All elements
Описание: Цвет фона элемента
EXAMPLE:background-color:#f00000

• background-image
Possible Values:
[1] none - нет
[2] URL (+)
*Applies to : All elements
Описание: Фоновое изображение
EXAMPLE:background-image:URL(cool.gif)

• background-repeat
Possible Values:
[1] repeat - размножает фоновое изображение во всех направлениях
[2] repeat-x - размножает фоновое изображение горизонтально
[3] repeat-y - размножает фоновое изображение вертикально
[4] no-repeat - не повторяющиеся изображение
*Applies to : All elements
Описание: Повторения фонового изображения
EXAMPLE:background-repeat:no-repeat

• background-attachment
Possible Values:
[1] scroll - фоновое изображение скроллится всесте с содержанием документа
[2] fixed - не скроллится. Фиксируется в одном месте
*Applies to : All elements
Описание: Возможность прокрутки фонового изображения
EXAMPLE:background-attachment:fixed

• background-position
Possible Values:
[1] процент от длинны + процент от высоты (+)
[2] top, middle, bottom - одно из значений
[3] left, center, right - одно из начений
[4] расстояние от левого края + расстояние от вершины
*Applies to : Block-level and replaced elements
Описание: Положение фонового изображения ( работает с background-repeat равным repeat-x или repeat-y )
EXAMPLE:background-position:50%0%

• background
Possible Values:
*Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE:background:no-repeat black fixed 50%0%

• display
Possible Values:
[1] none - не отображается
[2] block - разбивает линию ( = строку ) до и после элемента.
[3] inline - не разбивает линию ( = строку ). Т.е. элемент можен находится на одной линии с другими элементами.
[4] list-item - разбивает линию ( = строку ) до и после элемента + добавляет маркер как у list-item элементов
*Applies to : All elements
Описание: Определяет как будет отображаться элемент.
EXAMPLE:display:none

• white-space
Possible Values:
[1] normal - "сжимает" несколько подряд идущих пробелов в один
[2] pre - допускает отображение несколькольких подряд идущих пробелов
[3] nowrap - не допускает перенос строки без тага <BR>
*Applies to : Block-level elements
Описание: Оприделяет как будут отображаться пробелы между элементами
EXAMPLE:white-space:nowrap

• list-style-type
Possible Values:
[1] disc, circle, square, decimal, lower-roman, upper-roman, lower-alpha или upper-alpha
[2] none - никакой
*Applies to : Elements with display value list-item
Описание: Определяет вид list-item маркера. Если значение list-style-image равно none или не уточнено
EXAMPLE:list-style-type:lower-alpha

• list-style-image
Possible Values:
[1] none - нет
[2] URL (+)
*Applies to : Elements with display value list-item
Описание: Задает вид list-item маркера в виде картинки
EXAMPLE:list-style-image:URL(cool.gif)

• list-style-position
Possible Values:
[1] inside - при переносе следующие строки будут отображаться без отступа
[2] outside - по умолчанию
*Applies to : Elements with display value list-item
Описание: Определяет положение маркера в зависимости от list item элемента
EXAMPLE:list-style-position:inside

• margin-top
Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to : All elements
Описание: Определяет отступ сверху
EXAMPLE:margin-top:100

• margin-right
Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to : All elements
Описание: Определяет отступ справа
EXAMPLE:margin-right:100%

• margin-bottom
Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to : All elements
Описание: Определяет отступ снизу
EXAMPLE:margin-bottom:100em

• margin-left
Possible Values:
[1] длина (+)
[2] процент (+)
[3] auto - автоматически
*Applies to : All elements
Описание: Определяет отступ слева
EXAMPLE:margin-left:100pt

• margin
Possible Values: ^
*Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE:background:100pt


• padding-top
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : All elements
Описание: Отступ от верхнего border'а
EXAMPLE:padding-top:100pt

• padding-right
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : All elements
Описание: Отступ от правого border'а
EXAMPLE:padding-right:100%

• padding-bottom
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : All elements
Описание: Отступ от нижнего border'а
EXAMPLE:padding-bottom:100em

• padding-left
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : All elements
Описание: Отступ от левого border'а
EXAMPLE:padding-top:100

• padding
Possible Values: ^
*Applies to : All elements
Описание: Обобщает все вышеперечисленные свойства
EXAMPLE:padding:100px


• border-top-width
Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to : All elements
Описание: толщина верхнего border'а
EXAMPLE:border-top-width:100pt

• border-right-width
Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to : All elements
Описание: толщина правого border'а
EXAMPLE:border-right-width:thick

• border-bottom-width
Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to : All elements
Описание: толщина нижнего border'а
EXAMPLE:border-bottom-width:100em

• border-left-width
Possible Values:
[1] длина (+)
[2] thin, medium или thick
*Applies to : All elements
Описание: толщина левого border'а
EXAMPLE:border-left-width:medium

• border-color
Possible Values: color
Описание: Цвет border'а (+)
*Applies to : All elements
EXAMPLE:border-color:green

• width
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : Block-level and replased elements
Описание: ширина элемента
EXAMPLE:width:10%

• height
Possible Values:
[1] длина (+)
[2] процент (+)
*Applies to : Block-level and replaced elements
Описание: высота элемента
EXAMPLE:height:100pt

• float
Possible Values:
[1] left - слева
[2] right - справа
[3] none - по умолчанию
*Applies to : All elements
Описание: расположение элемента
EXAMPLE:float:right

• clear
Possible Values:
[1] left - слева
[2] right - справа
[3] both - c двух сторон
[4] none - по умолчанию
*Applies to : All elements
Описание: расположение других элементов вокруг данного
EXAMPLE:clear:both

Syntax : "+" или "-" затем [число] плюс [единица измерения] ( без пропусков )
Example : -566pt
Единицы длинны :
em - ems , высота используемого элементом шрифта
ex - x-height, ширина буквы "x" используемого элементом шрифта
px - pixels, пикселы
in - inches, дюймы
cm - centimeters, сантиметры
mm - millimeters, миллиметры
pt - points, точка ( 1pt = 1/72in )
pc - picas ( 1pc = 12pt )

Syntax : "+" или "-" затем [число] плюс "%" ( без пропусков )
Example : -566%

Syntax : [color]
Example : magenta
Значением цвета может быть его название ( red , lightgreen, coral и т.д. ) или RGB значение

Способы выразить цвет в RGB ( red green blue ) :
• #rrggbb ( например, #00cc00 )
• rgb(x,x,x) -- где "х" число от 0 до 255 ( например, rgb(0,204,0 ) )
• #rgb ( например, #0c0 )
• rgb (x%,x%,x%) -- где "х%" число от 0.0 до 100.0 ( например, 0%,80%,0% )

Все примеры отображают один и тот же цвет

Syntax : "URL" , потом в скобках приводится ссылка.Ссылку также можно, помимо скобок, заключить в одинарные или двойные кавычки ( без пропусков )
Example : URL('cool.gif')