Подключение таблиц стилей можно выполнять разными способами. Наиболее экономный с точки зрения расходования траффика - подключение внешней таблицы (поскольку файлы CSS, как правило, кэшируются браузером). Достигается это вставкой следующего тэга в заголовок (<head></head>) документа:
<link rel=stylesheet type=text/css href='some/where/togo/tofind/myprecious/csstable.css'> <link rel=stylesheet type=text/css media="screen,print" href='thatswhatwe/use/for/theprinter.css'> <link rel=stylesheet type=text/css media="screen, aural" href='andthis/for/both/screenandspeech.css'>
В данном случае первый вариант задает таблицу стилей по умолчанию для всех устройств вывода. Параметр media, используемый для этого тэга, позволяет задавать предпочтительные таблицы для разных устройств (можно через запятую). Список подтвержденных на данный момент стандартами устройств вывода:
Другой вариант - описание таблицы прямо внутри документа HTML. Выглядит это так:
<html>
<head>
<style>
body {font-family: Verdana; color: black }
p {margin-left: 1.5em }
</style>
<body>
<p>Параграф, выведенный шрифтом Вердана, с отступом 1.5em, и черного цвета.
</body>
</html>
Также таблицы можно импортировать методом, сходим с препроцессорным #include. Директива вставляется в сам файл таблицы и выглядит так:
@import url(http://some.place.to/grab/a/good.css)
@import url(http://another.place.to/grab/a/fine.css)
body {backgound: yellow url(mybgpicture.png)}
Эффект при этом будет такой же, как если бы последовательно в таблицу было вставлено содержимое good.css, затем fine.css, а затем еще добавлено определение для body.
Ну и наконец, самой последний (вроде бы) вариант - описание стиля внутри самого элемента. Вообще, смысл этого во многом сомнтителен, поскольку стиль будет применен только к данному элементу, и, как следствие, утрачивается главное преимущество CSS - единая логика оформления. Вместо inlineописания лучше использовать определитель по id. В любом случае всегда лучше иметь перед собо все возможности. Описание стиля в таком случае выглядит так:
<div style="font-family:fantasy; color: red; text-align:justify"> <h1 style="font-size: xx-large">