Как разделить разметку и внешний вид элементов?
Это возможно, но в этом нет никакого смысла.
Гораздо читабельные полные свойства у<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h2>position: absolute;</h2>

<p>An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed):</p>

<div class="relative">This div element has position: relative;
  <div class="absolute">This div element has position: absolute;</div>
</div>

</body>
</html>
и style.css: div.relative {
        position: relative;
        width: 400px;
        height: 200px;
        border: 3px solid #73AD21;
    }

    div.absolute {
        position: absolute;
        top: 80px;
        right: 0;
        width: 200px;
        height: 100px;
        border: 3px solid #73AD21;
    }
чем у <!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="blocks.css">
<link rel="stylesheet" href="appearance.css">
</head>
<body>
<div>Hello</div>
</body>
</html>
blocks.css:div.relative {

        border: 3px solid #73AD21;
    }

    div.absolute {

        border: 3px solid #73AD21;
    }
и appearance.css:div.relative {
        position: relative;
        width: 400px;
        height: 200px;

    }

    div.absolute {
        position: absolute;
        top: 80px;
        right: 0;
        width: 200px;
        height: 100px;

    }
Ну ужас же :)
Опять же, это возможно, но без базовых знаний, как советовал Роман Краббз выше, не тратьте время.
Не тратьте время на вопросы, которые вам еще рано задавать. Выучите теорию нормально для начала:
https://htmlacademy.ru/
htmlbook.ru