"body {background-color}" работает в HTML, но не в CSS

Я могу установить атрибут background-color для тела HTML в встроенной команде <style> но не тогда, когда идентичная команда перемещается во внешнюю таблицу стилей. Конкретный пример приведен ниже.

В test1.html background-color установлен на "синий: в HTML. Файл test2.html идентичен test1.html, за исключением того, что команда <style> закомментирована. Файл style.css содержит спецификацию для фона -color, а также для элемента <H1> (чтобы проверить, действительно ли браузер чтение таблицы стилей).

Первый тест создает оранжевый текст на синем фоне. Второй тест производит оранжевый текст, но на белом фоне. Я пробовал это на Firefox 21, Chrome 19 и IE 9; все дают одинаковые результаты.

Что происходит? Любая помощь будет оценена.

Вот три примера файлов:

test1.html:

<HTML>
<head> <link type="text/css" rel="stylesheet"  href="style.css">
<style type="text/css">
  body {background-color: blue}
</style> 
</head>
<body> <h1>This is a test.</h1> </body> </html>

test2.html:

<HTML>
<head> <link type="text/css" rel="stylesheet"  href="style.css">
<!-- <style type="text/css">
       body {background-color: blue} 
     </style> -->
</head>
<body> <h1>This is a test.</h1> </body> </html>

style.css:

<style type="text/css">
   body {background-color: green;}
   h1 {color: orange; }
</style>

Спасибо!

Ответ 1

не используйте <style type="text/css"></style> в style.css

Ответ 2

<style type="text/css"></style>

это HTML-теги, и вы не должны иметь их в вашем файле .css,

замените код в style.css этим. Просто скопируйте и вставьте.

   body {background-color: green;}
   h1 {color: orange; }