Как добавить CSS стили в body веб страницы

В одном из проектов понадобилось добавить новые стили к одной определённой странице, но шаблон позволял менять только содержимое после тега <body>. Чтобы не добавлять ненужные стили на весь сайт, а вставить их только для одной страницы, рассмотрим, какие есть варианты добавления CSS внутри <body>.

1.

Правильно загружать внешние CSS файлы на странице следующим образом:

<head>
  <link rel="stylesheet" type="text/css" href="file.css" />
</head>

То есть файлы стилей должны быть загружены внутри тега <head>.

Тем не менее с помощью функции JavaScript можно дополнить код <head> из тела страницы:

 <script type="text/javascript">

    function loadCSS(filename){ 

       var file = document.createElement("link");
       file.setAttribute("rel", "stylesheet");
       file.setAttribute("type", "text/css");
       file.setAttribute("href", filename);
       document.head.appendChild(file);

    }


   //просто вызовите функцию для загрузки вашего CSS
   //этот путь должен быть относительным для расположения вашего HTML
   loadCSS("ПУТЬ_ДО_CSS/file.css");

</script>

Либо вы можете добавить динамические определения, такие как:

 <script type="text/javascript">
      var sheet = (function() {
        var style = document.createElement("style");
        style.appendChild(document.createTextNode(""));
        document.head.appendChild(style);
        return style.sheet;
      })();

      sheet.insertRule("span { visibility: hidden }", 1);
 </script>

2.

Ещё один вариант — просто вставить нужные стили после тега <body>:

<html>
    <head>
        <style type='text/css'>
            * {color:red;}
            p {background-color:yellow;}
        </style>
    </head>
    <body>
        <style type='text/css'>
            * {color:green;}
            p {background-color:black;}
        </style>
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p>
        "Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."
        <p>"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit..."    </p> 
    </body>   
</html>

Не уверен по поводу валидности получаемого кода, но CSS работает!

3.

Этот вариант также работает:

<link href="/main.css" rel="stylesheet" type="text/css" />

Но только если не содержит /css в rel (то есть следующий вариант НЕ работает):

<link href="/main.css" rel="stylesheet/css" type="text/css" />

4.

Вы можете поместить теги <head></head> внутри <body></body>.