Блок style можно размещать в любом месте страницы. Он такой же элемент, как и все остальные. Стилем по умолчанию для него установлено display: none.
Если вы переместите его в раздел body и установите свойство display: block;, то сможете увидеть код стиля, который используется на странице.
Вы можете использовать атрибут HTML5 contenteditable, который позволит редактировать CSS прямо на странице, а изменения будут мгновенно вступать в действие.
Где такое можно использовать? Например в демонстрации кода CSS - не нужно будет повторять один и тот же код дважды, можно редактировать прямо на месте и видеть результат своих изменений.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS: style</title>
<style>
body style {
display: block;
background: #333;
color: white;
padding: 20px;
white-space: pre;
}
</style>
</head>
<body>
<h1>Редактируем style</h1>
<style contenteditable>body {
background: green;
}
</style>
</body>
</html>