Home>

I'm currently studying using HTML/CSS/JS.
So I have a question about reading external files.

<! DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<title>Title</title>
<link rel = "stylesheet" href = "css/styles.css">
</head>
<body>
<script src = "js/main.js"></script>
</body>
</html>


After checking, it seems that the CSS file is read first in this case,
For example, create an element with createElement in a JS file and
If I want to style that element, you don't know what the style applies to.

If the CSS file is loaded first, I think the element doesn't exist yet, but when I tried it, the style was applied.
I'm not sure why this is the case, so please let me know.

I'm sorry if the terms and information are fundamentally different.
I look forward to working with you.

  • Answer # 1

    If the CSS file is loaded first, I think the element doesn't exist yet.

    CSS will be applied to HTML elements generated later without any problems.Dynamically generating elements in JavaScript after opening the page still applies the CSS style, but it's the same.

    (If anything, the comments have become the main, so I would appreciate it if you could refer to that.)