Урок №2. Добавление стилей CSS к веб-странице

Существует несколько способов добавить каскадные таблицы стилей:

1) использование внутренних стилей между тегами <head> и </head>. Особенность этого подхода в том, что стили будут применяться только на одной странице.

<!DOCTYPE html>
<html>
   <head>
   <meta charset="windows-1251"/>
   <title>Сайт www.historian.by</title>
      <style>
         p{
            border: 1px;
         }
      </style>
   </head>
   <body>
      www.historian.by очень полезный сайт для изучения истории и информационных технологий.
   </body>
</html>

2) использование встроенных стилей с помощью атрибута "style". Недостаток этого подхода в том, что стили применяются только к одному параграфу. При наличии нескольких параграфов стили придётся дублировать.

<!DOCTYPE html>
<html>
   <head>
   <meta charset="windows-1251"/>
   <title>Сайт www.historian.by</title>
   </head>
   <body> 
      <p style="font-weight: bold; color: red;">www.historian.by очень полезный сайт для изучения истории и информационных технологий.</p>
   </body>
</html>

3) подключение внешних стилей с помощью тега <link>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="windows-1251"/>
        <title>Сайт www.historian.by</title>
        <link rel="stylesheet" href="styles.css" type="text/css" media="all"/>
    </head>
    <body>
        www.historian.by очень полезный сайт для изучения истории и информационных технологий.
    </body>
</html>

Обратите внимание, что код href="styles.css" отвечает за расположение CSS-файла. В данном случае он лежит в одной папке с файлом demo.html. Причём один и тот же CSS-файл может использоваться как для одной, так и для нескольких веб-страниц.

4) импорт внешних стилей с помощью правила @import