Как изменить интерфейс пользователя.

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

Правило cursor: позволяет изменить курсор указывающего устройтва. Для того чтобы изменить курсор нужно использовать правило вот так: cursor:url("cursor_text.gif"), text;, сначала при помощи дескриптора url мы указывает путь к картинке, которую хотим использовать вместо стандартного курсора пользователя, а потом через запятую указываем имя курсора который будет отбражаться если предыдущий не доступен, За один раз можно вставить несколько картинок курсоров:
*{cursor:url("cursor_text.gif"), url("cursor_text2.gif"), text;} В этом случае если недотупен первый, будет второй, если недоступен второй то третий и т.д. При изменении курсора обязательно указывать значение по умоланию, как в моих примерах. И эти умолчания имеют следующие значения:
cursor:url("..."), auto; - значение по умолчанию для всех умолчаний, отображается курсор согласно контента.
cursor:url("..."), crosshair; - курсор крест, как символ плюс.
cursor:url("..."), default; - курсор по умолчанию, значение зависит от П.А., чаще стрелка.
cursor:url("..."), pointer; - курсор для ссылки.
cursor:url("..."), move; - курсор перемещается
cursor:url("..."), e-resize; - *прим
cursor:url("..."), ne-resize; - *прим
cursor:url("..."), nw-resize; - *прим
cursor:url("..."), n-resize; - *прим
cursor:url("..."), se-resize; - *прим
cursor:url("..."), sw-resize; - *прим
cursor:url("..."), s-resize; - *прим
cursor:url("..."), w-resize; - *прим
cursor:url("..."), text; - курсор для текста, чаще всего вертикальная черта.
cursor:url("..."), wait; - программа обрабатывается или не отвечает, чаще всего крутящийся шар.
cursor:url("..."), help; - знак вопроса.
Примечание: все типы курсоров помеченые "*прим" не только действуют на перемещение но зависят от того в какую сторону, предположим что Север(nord) это верх экрана, значит если указатель будет подыматься вверх то его модель n-resize, если на восток(west) значит w-resize, если на северо-запад значит nw-resize; и т.д.

Чтобы пользователям было удобней каскадные таблицы стилей позволяют использовать системные цвета в качстве фона и цвета:
ActiveBorder - Бордюр активного окна.
ActiveCaption - Фон активного заголовка.
AppWorkspace - Цвет фона многодокументного интерфейса.
Background - фон рабочего стола, это не графика, а цвет.
ButtonFace - Цвет фасада(переднего плана) 3D элементов.
ButtonHighlight - темная тень для 3D-графики.
ButtonShadow - обычная тень для 3D-графики.
ButtonText - Цвет текста на кнопке.
CaptionText - Цвет текста цаголовка.
GrayText - Цвет не активного окна.
Это не весь список, полный список вы можете увидеть в спецификации по CSS.

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

Динамические контуры свойства outline.

Что такое контур в CSS? Контур это рамка(бордюр), но в отличии от обычного бордюра контур не занимает пространство и не обязательно может быть прямоугольным. Контуры применяются к объектам, таким как кнопки и поля форм, графике, любым видам карт изображения и т.д.

Правило outline-width: определяет толщину контура и имеет следующие значения:
outline-width:medium - средняя линия контура, это значание по умолчанию, его можно не задавать.
outline-width:thin - тонкая линия контура.
outline-width:thick - жирная линия контура.
outline-width:5px - только абсолютные единицы измерения.
outline-width:inherit - на усмотрение П.А.
Это правило не наследуется, так-же задается только один размер для всех сторон.

Правило outline-style: управляет стилем контура и имеет значения:
1)outline-style:none - Это значение по умолчанию, аналогично outline-width:0.
2)outline-style:dotted - Бордюр из точек.
3)outline-style:dashed - Бордюр из пунктирной линии.
4)outline-style:solid - Бордюр из сплошной линии, т.е. как в HTML.
5)outline-style:double - Бордюр из двойной сплошной линии, здесь нужна толщина(outline-width) минимум 3пикселя.
6)outline-style:groove - Бордюр выглядит как вырезанный в канве.
7)outline-style:ridge - Бордюр выглядит как выступающий над канвой.
8)outline-style:inset - Весь бокс выглядит как вдавленный в канву.
9)outline-style:outset - Противоположен предыдущему.
Это правило не наследуется.

Правило outline-color: устанавливает цвет контура и имеет следующие значения: outline-color:invert - значение по умолчанию, инвертированный цвет, т.е. если цвет кнопки белый, то контура черный.
outline-color:red - задается как именем цвета так и номером цвета.
outline-color:inherit - на усмотрение П.А.
Это правило не наследуется.

Правило outline: объеденяет все три выше перечисленные таким образом:
*{ outline:цвет стиль ширина;} т.е.
*{ outline: red solid 2pt;}
По контурам у меня все.